Question

我有一个按钮，其中的图像在XAML中定义如下：

<Button x:Name="buttonTest">
    <Button.Template>
        <ControlTemplate>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image x:Name="imageTest" Width="57" Height="81" Source="/Images/sample.png" />
                </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

如何在单击按钮时更改图像的来源？

Answer 1

我可能会使用切换按钮代替按钮，因为它具有可以基于图像开关的IsChecked属性。

首先，您需要一些转换器从true / false转到图像路径，也可以将它作为一个可以反复使用的通用转换器，将其添加到项目中并设置xmlns指向它在你的xaml。

public class BooleanSwitchConverter : DependencyObject, IValueConverter
    {
        public object TrueValue
        {
            get { return (object)GetValue(TrueValueProperty); }
            set { SetValue(TrueValueProperty, value); }
        }
        public static readonly DependencyProperty TrueValueProperty =
            DependencyProperty.Register("TrueValue", typeof(object), typeof(BooleanSwitchConverter), new PropertyMetadata(null));

        public object FalseValue
        {
            get { return (object)GetValue(FalseValueProperty); }
            set { SetValue(FalseValueProperty, value); }
        }
        public static readonly DependencyProperty FalseValueProperty =
            DependencyProperty.Register("FalseValue", typeof(object), typeof(BooleanSwitchConverter), new PropertyMetadata(null));

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((bool)value) ? TrueValue : FalseValue;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

然后用这样的切换按钮替换你的按钮，使用IsChecked上的Binding来选择图像。

<ToggleButton>
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border>
                        <Image>
                            <Image.Source>
                                <Binding Path="IsChecked" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <local:BooleanSwitchConverter 
                                            TrueValue="1.jpg" 
                                            FalseValue="2.jpg"/>
                                    </Binding.Converter>
                                </Binding>
                            </Image.Source>
                        </Image>
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

Answer 2

您可以使用这样的触发器（为了简单起见，在示例中使用了矩形）：

<Button x:Name="buttonTest" Width="200" Height="200">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Rectangle x:Name="Image" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="Yellow"></Rectangle>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Image" Property="Fill" Value="Red"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer 3

所以我终于想通了，用户Gambi在另一个thread.

中提供了答案

在Button模板中更改Image的源

3 个答案: