How to change the background of the StackPanel control when any child element has focus?

Question

Hello folks!
I need to change the background of the StackPanel control when any element within the StackPanel has focus. I am executing the code snippet below. The code works fine with elements within the Grid control named "main". It doesn't work when I focus
an element within the Grid control named "header".
<StackPanel x:Name="techReportStackPanel" Width="250" Background="{Binding ColorBrush}" >
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=techReportStackPanel, Path=IsKeyboardFocusWithin}" Value="True">
<Setter Property="Background" Value="Gray" />
<Setter Property="Opacity" Value=".5" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Grid x:Name="header">
<TextBlock x:Name="headerColumn" Text="{Binding Name}" Style="{StaticResource ColumHeader}"/>
<Button Visibility="{Binding ElementName=headerColumn, Path=Text, Converter={StaticResource delButtonVisibilityConverter}}" Command="{Binding DelCommand}" Content="x" ToolTip="{l:Translate TechReportDeleteToolTip}"/>
</Grid>
<Grid x:Name="main">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<wpftoolkit:WatermarkTextBox Grid.Column="0" Style="{StaticResource OrdinaryTextbox}" Watermark="{l:Translate LengthLabel}" ToolTip="{l:Translate BoreholeSpacingInRow}" Text="{Binding BoreholeSpacingInRow, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=F2, Converter={StaticResource zeroToEmptyDoubleConverter}}" />
<wpftoolkit:WatermarkTextBox Grid.Column="1" Style="{StaticResource OrdinaryTextbox}" Watermark="{l:Translate WidthLabel}" ToolTip="{l:Translate BoreholeSpacingBetweenRow}" Text="{Binding BoreholeSpacingBetweenRow, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=F2, Converter={StaticResource zeroToEmptyDoubleConverter}}" />
</Grid>
</StackPanel>
Any advice and suggestions will be greatly appreciated!

Answer 1

>>It doesn't work when I focus an element within the Grid control named "header".
You mean when the Button in the "header" Grid is focused? A TextBlock is not focusable so when the Button is not visible no element in the "header" Grid will be focused since you only have two elements in the "header" Grid.
But when the Button is visible it should work. Please refer to the following code:
<StackPanel x:Name="techReportStackPanel" Width="250" Background="{Binding ColorBrush}" >
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=techReportStackPanel, Path=IsKeyboardFocusWithin}" Value="True">
<Setter Property="Background" Value="Gray" />
<Setter Property="Opacity" Value=".5" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Grid x:Name="header">
<TextBlock Text="text..."/>
<Button Visibility="Visible" Content="Button" />
</Grid>
<Grid x:Name="main">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0">main grid...</TextBox>
<TextBox Grid.Column="1">main grid...</TextBox>
</Grid>
</StackPanel>
When the Button is focused the Background colour of the StackPanel is set to Gray as expected.
If you want to be able to focus the TextBlock you should set its Focusable property to true:
<Grid x:Name="header">
<TextBlock Focusable="True" x:Name="headerColumn" Text="{Binding Name}" Style="{StaticResource ColumHeader}"/>
<Button Visibility="{Binding ElementName=headerColumn, Path=Text, Converter={StaticResource delButtonVisibilityConverter}}" Command="{Binding DelCommand}" Content="x" ToolTip="{l:Translate TechReportDeleteToolTip}"/>
</Grid>
Hpoe that helps.
Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.