WPF - Customized Window Style and Use Image to Minimize, Maximize and Close Button Triggered by Different Data

Question

I want to use customized window style and use image to Minimize, Maximize, Normal and Close Button.

Now I hope when WindowState is Maximized, show Maximize image (from resource).

When WindowState is Normal, show Normal image (from resource).

Xaml is below:

<Button Height="42" Width="42" Background="Transparent" BorderBrush="Transparent" Click="Button_Maximize_Click">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding WindowState}" Value="Maximized">
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <ImageBrush ImageSource="/AccuPick3D;component/Image/Maximize.png" Stretch="Uniform"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding WindowState}" Value="Normal">
                                    <Setter Property="Background">
                                        <Setter.Value>
                                            <ImageBrush ImageSource="/AccuPick3D;component/Image/Restore.png" Stretch="Uniform"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <Button.ToolTip>
                        <ToolTip Style="{StaticResource ToolTipStyle}">Maximize or Restore</ToolTip>
                    </Button.ToolTip>
                </Button>

Button_Maximize_Click event:

private void Button_Maximize_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = (this.WindowState != WindowState.Maximized) ? WindowState.Maximized : WindowState.Normal;
        }

But it doesn't show image whatever I click button or not.

Please help me, thanks!

Answer 1

Don't set the Background property directly. Instead you should specify the default value in a Style setter:

<Button Height="42" Width="42" BorderBrush="Transparent" Click="Button_Maximize_Click">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding WindowState}" Value="Maximized">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="/AccuPick3D;component/Image/Maximize.png" Stretch="Uniform"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding WindowState}" Value="Normal">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="/AccuPick3D;component/Image/Restore.png" Stretch="Uniform"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <Button.ToolTip>
        <ToolTip Style="{StaticResource ToolTipStyle}">Maximize or Restore</ToolTip>
    </Button.ToolTip>
</Button>

The reason for this is that local property sets take precedence over style setters as explained in the docs.

You should also make sure that your bindings work. Unless you have set the DataContext to this, you should set the RelativeSource property of the bindings like this to bind to a property of the parent window:

Binding="{Binding WindowState, RelativeSource={RelativeSource AncestorType=Window}}"