WPF：如何在按下时更改按钮的画布？

Question

我是 XAML 和 WPF 的新手。

按下按钮我想将按钮上绘制的画布从 ic_maximize 更改为 ic_restore 并在再次按下按钮时切换画布。我正在使用 mahapps 库。你能告诉我该怎么做吗？

我尝试了很多不同的 StackOverflow 链接，但没有一个与我的问题相关。

这是我的最大化按钮的样式。我已经准备好“IsPressed”触发器，但无法弄清楚触发时需要设置什么。-

<Canvas x:Key="ic_maximize" Width="13.3333" Height="13.3333" Canvas.Left="0" Canvas.Top="0">
    <Rectangle Width="11.7333" Height="11.7333" Canvas.Left="2.136" Canvas.Top="-0.536002" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999"/>
    <Rectangle Width="11.7333" Height="11.7333" Canvas.Left="5.36442e-007" Canvas.Top="1.6" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999" Fill="#FF161616"/>
</Canvas>

<Canvas x:Key="ic_restore" Width="12" Height="12" Canvas.Left="0" Canvas.Top="0">
    <Rectangle Width="11.7333" Height="11.7333" Canvas.Left="5.36442e-007" Canvas.Top="0.266666" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999"/>
</Canvas>

<Style x:Key="ExtendedMaxButtonStyle"
   TargetType="{x:Type Button}"
   BasedOn="{StaticResource MetroWindowButtonStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Name="grid" Background="{StaticResource MaxButton.Grid.background}">
                        <!-- either one of the ic_maximize/ic_restore canvases should come here -->
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="grid" Property="Background" Value="{StaticResource MaxButton.MouseOver.Background}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                    <!-- What should I write here?-->
                    </Trigger>
                    <Trigger Property="IsPressed" Value="False">
                     <!-- What should I write here?-->
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

将两个Canvas 放在一起，并在IsPressed 上隐藏一个。

<Grid Name="grid">
    <Canvas Background="Purple">
        <Canvas.Style>
            <Style TargetType="Canvas">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Style>
        <TextBlock Text="ic_max" FontSize="48"/>
    </Canvas>
    <Canvas Background="Green">
        <Canvas.Style>
            <Style TargetType="Canvas">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Style>
        <TextBlock Text="ic_restore" FontSize="48"/>
    </Canvas>
</Grid>