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

Question

I am new to XAML and WPF.

On Button press I want to change the canvas drawn on the button from ic_maximize to ic_restore and switch the canvas when the button is pressed again. I am using the mahapps library. Can you please tell me how to go about doing this?

I have tried a lot of different StackOverflow links, but none of them are pertinent to my problem.

Here is the style for my maximize button. I have the "IsPressed" triggers ready but not able to figure out what need to be set when it is triggered.-

<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

Place both Canvas on top of each other, and hide one upon 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>