将第二个图像添加到按钮的内容

Question

这是按钮代码的和平：

<Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="border" CornerRadius="8">
            <Border.Background>
                SlateBlue
            </Border.Background>
            <StackPanel Orientation="Horizontal" Margin="3">
                <Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
                <TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" Padding="10,0,10,0" />                    
            </StackPanel>
        </Border>
    </ControlTemplate>
</Button.Template>

如您所见，我的按钮有图像和文字。但是，我想在文本后添加另一个图像。我该怎么做呢？我已经使用过Tag属性了一次。

以下是我如何使用按钮：

<myProject:ButtonWithTwoImages x:Name="btnHome" Tag="/Resources/Home.png" Content="Home" Command="{Binding Path=NavigateToCategoriesCommand}" Margin="20 0 0 0"/>

如何在按钮上添加其他图像？

Answer 1

我创建了一个名为ButtonWithTwoImages的新用户控件，这里是代码。

的Xaml

<UserControl x:Class="WpfUserControl.ButtonWithTwoImages"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Border x:Name="border" CornerRadius="8">
        <Border.Background>
            SlateBlue
        </Border.Background>
        <StackPanel Orientation="Horizontal" Margin="3">
            <Image Source="{Binding Path=Image1, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
            <TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" Padding="10,0,10,0" />
            <Image Source="{Binding Path=Image2, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
        </StackPanel>
    </Border>
</UserControl>

Xaml.cs

public partial class ButtonWithTwoImages : UserControl
{
    public ButtonWithTwoImages()
    {
        InitializeComponent();
    }

    public ImageSource Image1
    {
        get { return (ImageSource)GetValue(Image1Property); }
        set { SetValue(Image1Property, value); }
    }
    public static readonly DependencyProperty Image1Property = DependencyProperty.Register("Image1", typeof(ImageSource), typeof(ButtonWithTwoImages), new PropertyMetadata(null));

    public ImageSource Image2
    {
        get { return (ImageSource)GetValue(Image2Property); }
        set { SetValue(Image2Property, value); }
    }
    public static readonly DependencyProperty Image2Property = DependencyProperty.Register("Image2", typeof(ImageSource), typeof(ButtonWithTwoImages), new PropertyMetadata(null));
}

如何使用

<Window x:Class="WpfUserControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mylib="clr-namespace:WpfUserControl">
    <Grid>
        <mylib:ButtonWithTwoImages Image1="Images\A.jpg" Image2="Images\B.jpg"></mylib:ButtonWithTwoImages>
    </Grid>
</Window>