如何从代码后面重新绘制按钮以显示新图标

Question

我有一个类似的XAML样式：

<Style x:Key="ImageTextButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="ButtonStyleBorder" CornerRadius="9"  Background="#FF9E9FA3">
                    <Grid Margin="0,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="10"/>
                        <Label Content="{TemplateBinding Content}" Grid.Column="1" FontSize="12.5" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我是这样使用的：

<Button x:Name="btn_StartStop" Tag="start.png" Content="START RECORDING" 
    Style="{StaticResource ImageTextButtonStyle}" Grid.Row="0" Grid.Column="0" Margin="12,10,10,10" 
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="Btn_StartStop_OnClick" />

我想在点击处理程序中做的是将显示的图像从start.png更改为stop.png。我试过这个，但它显然是错误的，因为我得到的只是一个空白点，而不是stop.png图像。

btn_StartStopRecording.SetResourceReference(TagProperty,"stop.png");
btn_StartStopRecording.InvalidateVisual();

我该怎么做？

Answer 1

我建议您使用ToggleButton而不是Button，并使用VisualStateManager设置选中和未选中状态，例如：

    <Style TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Start"
                                                                       Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Stop"
                                                                       Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Start"
                                                                       Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="Stop"
                                                                       Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="contentPresenter"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Image x:Name="Start" Source="start.png" />
                        <Image x:Name="Stop" Source="stop.png" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

另一种创建附加属性并将图像源绑定到它的方法。我在这里回答了类似的问题

希望这能有所帮助。