Search code examples
c#wpfxamluser-controlseventtrigger

Change usercontrol border on its GotFocus-event within the XAML of a WPF-Project


I have a UserControl, which contains a Grid which contains a Border:

<UserControl Focusable="True" Name="uctrlScenePanel">
    <Grid MouseDown="Grid_MouseDown">
      <Border BorderThickness="0" BorderBrush="Black">
      </Border>
    </Grid>

I now wanted to change the Border-Thickness once the usercontrol "uctrlScenePanel" got Focus, but i can't get it to work and i dont really find useful Eventtrigger-Tutorials which a can understand, because i am very new to WPF.

edit: d.moncada's answer was very helpful! my xaml now looks like this:

       <Border BorderBrush="Black">
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="0" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsKeyboardFocusWithin, ElementName=uctrlScenePanel}" Value="true">
                            <Setter Property="BorderThickness" Value="2" />
                            <Setter Property="Background" Value="Green" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsKeyboardFocusWithin, ElementName=uctrlScenePanel}" Value="false">
                            <Setter Property="BorderThickness" Value="0" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>

I have still problems,because the focusing of a user control behaves weird, but thats another story...this one is solved for me, thanks for the lesson ;)


Solution

  • You can bind to the UserControl IsFocused property using a DataTrigger.

    <UserControl Focusable="True" x:Name="uctrlScenePanel">
        <Grid MouseDown="Grid_MouseDown">
          <Border BorderBrush="Black">
            <Broder.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="1"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsFocused, ElementName=uctrlScenePanel}" Value="True">
                            <Setter Property="BorderThickness" Value="0"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
          </Border>
        </Grid>
    </UserControl>