如何使用数据触发器更改按钮图标？ wpf

Question

我是 wpf 新手。实际上我想改变按钮图标（play.ico/stop.ico）。当我单击按钮时，它会将状态（状态为数据库列）值 'Online' 更改为离线，或从离线更改为在线。它也在数据库中更新但是我想在状态为在线按钮时显示 stop.ico，当我状态为离线时按钮应显示 play.ico。如何做到这一点？我尝试使用以下代码，但它不起作用。请帮助并建议我遗漏了什么。

//Xaml代码

<StackPanel Margin="0 0 0 0" Grid.Column="5"  Grid.Row="0" Grid.RowSpan="2">
                    <Button Name="Ignition_Button1" Click="Ignition_Button1_Click_1" Width="35" Height="35" Margin="16,5,16,0"

                            Style="{DynamicResource CircleButton}"
                            Command="{Binding StartStopCommand}">
                        <Button.ToolTip>
                            <ToolTip>
                                <StackPanel>
                                    <TextBlock FontWeight="Bold"
                                               Text="Start or Stop Control Center" />
                                </StackPanel>
                            </ToolTip>
                        </Button.ToolTip>
                        <StackPanel Orientation="Vertical">
                            <Rectangle Width="15" Height="15" StrokeThickness="0">
                                <Rectangle.Style>
                                    <Style TargetType="{x:Type Rectangle}">
                                        <Setter Property="Fill" Value="{StaticResource play.ico}" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Online">
                                                <Setter Property="Fill" Value="{StaticResource stop.ico }" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Offline">
                                                <Setter Property="Fill" Value="{StaticResource play.ico}" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Rectangle.Style>
                            </Rectangle>
                        </StackPanel>
                    </Button>
                </StackPanel>

Answer 1

我想在这里提出几点建议。而不是位图并且会有锯齿的 ico，我会推荐几何图形和路径。使用具有两种状态的按钮，您可以在两种状态之间切换，然后切换按钮是一个很好的选择。下面我将我的两个几何图形放在我的切换按钮的资源中。这些通常被放入资源字典（连同许多其他用于图像的几何图形）并合并到 app.xaml.

        <ToggleButton IsChecked="True"
                      IsThreeState="False"
                      >
            <ToggleButton.Resources>
                <Geometry x:Key="StopGeom">
                    M0,0L32,0 32,32 0,32z
                </Geometry>
                <Geometry x:Key="PlayGeom">
                    M0,0L16,8 32,16 16,24 0,32 0,16z
                </Geometry>
            </ToggleButton.Resources>
            <Path Fill="Black"
                  Stretch="Uniform"
                  Margin="4">
                <Path.Style>
                    <Style TargetType="Path">
                        <Setter Property="Data" Value="{StaticResource PlayGeom}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="True">
                                <Setter Property="Data" Value="{StaticResource StopGeom}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </ToggleButton>

这需要做更多的工作，但应该可以让您了解一种方法。有关布局和几何形状的更多信息：

https://social.technet.microsoft.com/wiki/contents/articles/32610.wpf-layout-lab.aspx

我不知道您如何设计按钮的形状，但我用这个来向 wpf 新手强调无外观控件的含义：

https://social.technet.microsoft.com/wiki/contents/articles/29866.aspx

如何使用数据触发器更改按钮图标？ wpf

How to change Icon of button with data trigger ? wpf

wpf

xaml

datatrigger