以编程方式更改 WPF 中的按钮图标

Question

我目前有一个按钮，上面有一个图标/图像。 我已经在 XAML 中配置了按钮和图像：

<Button Height="69" HorizontalAlignment="Left" Margin="-2,0,0,0" Name="toggleBroadcast" VerticalAlignment="Top" Width="64" Grid.Row="1" Opacity="0.5" Click="changeBroadcastState_Click">
        <Image Source="Images\playIcon.png" />
</Button>

我需要能够以编程方式将此按钮的图像从 playIcon 更改为 stopIcon。 我怎样才能做到这一点？

Answer 1

您可以通过事件处理程序更改按钮的内容来实现此目的。

你可以在Window.Resources下设置“Play”图标和“Stop”图标作为资源，如下Window.Resources ：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Image x:Key="Play" Source="/WpfApplication1;component/Play_Icon.png" Height="50" Width="50" />
    <Image x:Key="Stop" Source="/WpfApplication1;component/Stop_Icon.png" Height="50" Width="50"/>
</Window.Resources>
<Grid>
    <Button Click="Button_Click" Name="MediaButton">
        <DynamicResource ResourceKey="Play"/>
    </Button>
</Grid>

现在，当单击按钮时，您只需将按钮的内容更改为其他资源（停止图标）。 在按钮的事件处理程序中，您可以执行以下操作：

C＃

private void Button_Click(object sender, RoutedEventArgs e)
{
    if (MediaButton.Content == FindResource("Play"))
    {
        MediaButton.Content = FindResource("Stop");
    }
    else
    {
        MediaButton.Content = FindResource("Play");
    }
}

编辑：更短的表示法

MediaButton.Content = FindResource(MediaButton.Content == FindResource("Play") ? "Stop" : "Play");

希望这有帮助，如果您有任何疑问，请告诉我。

Answer 2

如果您的图像定义如下：

<Image Source="{Binding ImageSource}" Stretch="Fill"/>

然后在您想要进行切换的代码中，只需：

ImageSource = image;

其中image定义为：

image = new BitmapImage(new Uri("/Application;component/Resources/pause.png", UriKind.Relative));

当然，它依赖于您使用MVVM模式并在代码中实现INotifyPropertyChanged接口。

Answer 3

在更改条件上使用图像样式（/编辑）中的DataTrigger （编辑） ：

<Button Height="69" HorizontalAlignment="Left" Margin="-2,0,0,0" Name="toggleBroadcast" VerticalAlignment="Top" Width="64" Grid.Row="1" Opacity="0.5" Click="changeBroadcastState_Click">
    <Image>
        <Image.Style>        
            <Style TargetType="{x:Type Image}">
                <Setter Property="Source" Value="Images\playIcon.png" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding myCondition}" Value="True">
                        <Setter Property="Source" Value="Images\stopIcon.png" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>        
    </Image>
</Button>

然后， myCondition变量将成为ViewModel中的布尔属性（或者更常见的是Control的DataContext），类似于

public bool myCondition { get { return ([whatever that condition might be]); } }

这也可能包括一个setter，也可能是一个简单的自动财产。 与其他MVVM答案一样，它将依赖ViewModel来实现INotifyPropertyChanged 。

好处是，一旦条件不再满足，DataTrigger将自动将Source属性设置回其原始值。

免责声明：我现在无法对此进行测试，因此请谨慎使用，并进行一些调试工作......

Answer 4

试试这个代码

window.Icon = BitmapFrame.Create(Application.GetResourceStream(new Uri("LiveJewel.png", UriKind.RelativeOrAbsolute)).Stream);

Answer 5

我使用本主题中的其他答案来拼凑我的 MVVM 应用程序所需的解决方案。 该代码用于翻转工具栏按钮的图像和工具提示（在本例中为隐藏/取消隐藏）。 如果我把它们放在一起可能会对你有所帮助。 首先是xaml文件中按钮的声明：

<Button ToolTip="{Binding ButtonText}">
    <Image Height="32" Width="32" Source="{Binding ButtonImage}"/>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
        <i:CallMethodAction TargetObject="{Binding}" MethodName="HideAction"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

在我的 ViewModel 类中，我声明：

private BitmapImage _buttonImage;

public BitmapImage ButtonImage
{
    get { return _buttonImage; }
    set
    {
        _buttonImage = value;
        OnPropertyChanged("ButtonImage");
    }
}

private string _buttonText;

public string ButtonText
{
    get { return _buttonText; }
    set
    {
        _buttonText = value;
        OnPropertyChanged("ButtonText");
    }
}

这是更改按钮的事件处理程序的代码：

public void HideAction()
{
    // Hide the thing you want to hide
    ...

    // Flip the button
    if (ButtonText == "Hide")
    {
        ButtonImage = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Unhide32.png", UriKind.RelativeOrAbsolute));
        ButtonText = "Unhide";
    }
    else
    {
        ButtonImage = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Hide32.png", UriKind.RelativeOrAbsolute));
        ButtonText = "Hide";
    }
}

在我的 ViewModel 类的构造函数中，我初始化了图像和工具提示：

ButtonImage = new BitmapImage(new Uri(@"pack://application:,,,/Resources/Hide32.png", UriKind.RelativeOrAbsolute));
ButtonText = "Hide";