Change appearance of a control if the windows is maximized in WPF

Posted on 2 mins read

Yesterday I was presented with an interesting question:

How can I design a user control that change appearance when the windows containing it is maximized?

Thanks to WPF binding and Triggers the solution is simple, suppose you want to create a border control that change thickness when the windows that contains this User Control is maximized , here is the code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

 <Border BorderBrush="Black"
                HorizontalAlignment="Left" 
                Height="100" 
                Margin="124,54,0,0" 
                VerticalAlignment="Top"
                Width="100">
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="1" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, 
                                Path=WindowState}" 
                              Value="Maximized">
                            <Setter Property="BorderThickness" Value="10" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>

The solution is using a simple style that determines the value for the BorderThickness property of the Border Control. The key part is that I did not set an explicit value for BorderThickness in declaration of the control, but only in the style. This is necessary because value set at control level has higher priority than the style. The real power of WPF binding permits you to bind to RelativeSource with FindAncestor where Type is a Window. That specific binding is really useful in a UserControl, because you cannot know any property name of containers, but it is easy to find the first ancestor of type Window. Then you can simply create the trigger with this specific binding and change the property BorderThickness of the Border to 10 when the windows containing the user control gets maximized.

Gian Maria.