WPF 按钮数据触发器未正确设置内容

Question

I'm making a class, inherting from Window which adds some additional functionality to the TitleBar.

I have tried to recreate the Windows 10 title bar using this XAML as the minimize, restore/maximize and close buttons:

            <Button x:Name="CloseButton"
                    Click="CloseButton_Click"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Content="&#xE106;" FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,10" Background="Transparent" BorderBrush="Transparent" Foreground="White"
                    DockPanel.Dock="Right">
                <Button.Style>
                    <Style TargetType="{x:Type Button}"/>
                </Button.Style>
            </Button>

            <Button x:Name="MaximizeButton"
                    Click="MaximizeButton_Click"
                    DockPanel.Dock="Right"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,10" Background="Transparent" BorderBrush="Transparent" Foreground="White">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Button.Content" Value="&#xE739;" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
                                <Setter Property="Button.Content" Value="&#xE923;" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MainWindow}}, Path=WindowState}" Value="Normal">
                                <Setter Property="Button.Content" Value="&#xE739;" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>

            <Button x:Name="MinimizeButton"
                    Content="&#xE949;"
                    Click="MinimizeButton_Click"
                    DockPanel.Dock="Right"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,15,15,5" Background="Transparent" BorderBrush="Transparent" Foreground="White">
                <Button.Style>
                    <Style TargetType="{x:Type Button}"/>
                </Button.Style>
            </Button>

The problem is that while my Maximize button correctly displays like this, initially:

If I click it, it turns into this:

Which looks like a sort of invalid character? It is a valid character according to Segoe UI MDL2 icon guidelines .

If I then click it again to restore it, the restore works correctly but the icon stays the same and doesn't change back to the correct image, this:

Is there something wrong with my Style or DataTrigger ?

You'll note I've tried AncestorType={x:Type Window}} and AncestorType={x:Type local:MainWindow}} , MainWindow being my class, but neither of these made any difference.

Answer 1

I realised I was setting the Button.Content in the MaximizeButton_Click method, which I'd forgotten about. Removing that and it all works as expected.