Border of the control is not displayed at appropriate time - wpf

Question

I am trying to create a designer like Visual Studio.
Suppose I have a Grid.
Inside that I have a TextBox and a TextBlock. For better understanding look at the sample code below:
<Page.Resources>
<Style x:Key="myStyle" TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="DodgerBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Border Style="myStyle">
<Grid>
<Border Style="myStyle">
<TextBox ...... />
</Border>
<Border Style="myStyle">
<TextBlock ...... />
</Border>
</Grid>
</Border>
Now when I mouseOver on any of the element I want to get a border around it.
My Problems:
I get a border around grid as well as a border around textblock when mouse cursor is over textblock.
When my mouse cursor goes over empty area of grid the border is not shown.
Requirements :
when mouse cursor goes over textblock, the border around grid should become invisible.
when mouse cursor goes over empty area in grid, the border around grid should become visible.
Please suggest the changes that I should make in the above code to have the required functionality.

Answer 1

Why did you assign myStyle to the outter Border? Just leave that out.

Answer 2

1: I think, your idea with glowing parent border is not good. Because it will be blink whenever user hold mouse over the grid. Perhaps, it will annoy user :)
2: Try to set Grid.Background="Transparent".

Answer 3

Try this
<Grid Background="LightGray" >
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Grid_Bd" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Grid_Bd" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid Height="50" Width="50">
<Border x:Name="TextBlock_Bd" Opacity="0" BorderBrush="Blue" BorderThickness="1"/>
<TextBlock Text="Hello !!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TextBlock_Bd" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TextBlock_Bd" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>
<Border x:Name="Grid_Bd" Opacity="0" BorderBrush="Red" BorderThickness="1"/>
</Grid>