当 Image 和 TextBlock 在按钮中时更改 Image 和 TextBlock 的内容

Question

我有这种风格：

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" >
                        <Border x:Name="border" CornerRadius="8">
                            <Border.Background>
                                SlateBlue
                            </Border.Background>
                        </Border>

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" >
                            <ContentPresenter.Content>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{TemplateBinding Source}"></Image>
                                    <TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Text="{TemplateBinding Content}"/>
                               </StackPanel>
                            </ContentPresenter.Content>
                        </ContentPresenter>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

gjgj

我有三个使用它的按钮：

<Button Style="{StaticResource RoundCorner}" Name="btnOK"  Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/OK.xaml" CommandTarget="{Binding ElementName=frmContent}" ></Button>
<Button Style="{StaticResource RoundCorner}" Name="btnHome" Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/Home.xaml" CommandTarget="{Binding ElementName=frmContent}" ></Button>
<Button Style="{StaticResource RoundCorner}" Name="btnHelp" Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/Help.xaml" CommandTarget="{Binding ElementName=frmContent}" ></Button>

我希望这 3 个按钮实现相同的样式，以显示不同的图像和文本。 第一个按钮上应该写有 OK 和“OK”的图像，第二个按钮相同，但用于“Home”等。我该怎么做？

Answer 1

尝试创建一个用户控件。这是我的，只需修改它以满足您的需要： XAML：

<UserControl x:Class="ButtonWithImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" Name="ImagedButton">
    <Button FocusVisualStyle="{x:Null}" Foreground="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
            BorderThickness="3" Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
            Command="{Binding ElementName=ImagedButton, Path=Command}" Padding="0 0 1 1"
            CommandParameter="{Binding ElementName=ImagedButton, Path=CommandParameter}">
        <StackPanel Orientation="Horizontal" Margin="3">
            <Image Source="{Binding ElementName=ImagedButton, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
            <TextBlock Text="{Binding ElementName=ImagedButton, Path=Text}" FontSize="{Binding ElementName=ImagedButton, Path=FontSize}"
                       VerticalAlignment="Center" />
        </StackPanel>
        <Button.Background>
            <LinearGradientBrush>
                <GradientStop Color="AliceBlue" Offset="0" />
                <GradientStop Color="#AAAEDAFF" Offset="0.5" />
                <GradientStop Color="WhiteSmoke" Offset="1" />
            </LinearGradientBrush>
        </Button.Background>
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="8" BorderThickness="1" RenderTransformOrigin="0.5 0.5" x:Name="border"
                        BorderBrush="#037BBB">
                    <Border Background="{TemplateBinding Background}" CornerRadius="8" x:Name="innerBorder">
                        <Grid>
                            <ContentPresenter VerticalAlignment="Center" Grid.RowSpan="2" HorizontalAlignment="Center" x:Name="contentPresenter" />
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="border" Value="1" />
                        <Setter Property="Opacity" TargetName="contentPresenter" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="RenderTransform" TargetName="border">
                            <Setter.Value>
                                <ScaleTransform ScaleX="0.92" ScaleY="0.92" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</UserControl>

代码隐藏：

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

public partial class ButtonWithImage
{
    public ButtonWithImage()
    {
        InitializeComponent();
    }

    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }

    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ButtonWithImage), new UIPropertyMetadata(null));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ButtonWithImage), new UIPropertyMetadata(null));

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register("Command", typeof(ICommand), typeof(ButtonWithImage), new UIPropertyMetadata(null));

    public object CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    public static readonly DependencyProperty CommandParameterProperty =
        DependencyProperty.Register("CommandParameter", typeof(object), typeof(ButtonWithImage), new UIPropertyMetadata(null));


    public event RoutedEventHandler Click;

    private void OnClick(object sender, RoutedEventArgs e)
    {
        if (Click != null)
        {
            Click(this, e);
        }
    }
}

Answer 2

资源

<Window.Resources>
    <Style x:Key="RoundCorner" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" >
                        <Border x:Name="border" CornerRadius="8" Background="SlateBlue"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" >
                            <ContentPresenter.Content>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{DynamicResource ResourceKey=Bmp}" Height="30" Width="30"></Image>
                                    <TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,10,0" FontSize="12" Foreground="White" Text="{TemplateBinding Content}"/>
                                </StackPanel>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

xaml

 <StackPanel Orientation="Horizontal">
    <Button Height="30" Width="100" Content="BUTTON1" Style="{StaticResource RoundCorner}">
        <Button.Resources>
            <BitmapImage x:Key="Bmp" UriSource="btn2.png"></BitmapImage>
        </Button.Resources>
    </Button>
    <Button Height="30" Width="100" Content="BUTTON2" Margin="20,0,0,0" Style="{StaticResource RoundCorner}">
        <Button.Resources>
            <BitmapImage x:Key="Bmp" UriSource="btn3.png"></BitmapImage>
        </Button.Resources>
    </Button>
    <Button Height="30" Width="100" Content="BUTTON3" Margin="20,0,0,0" Style="{StaticResource RoundCorner}">
        <Button.Resources>
            <BitmapImage x:Key="Bmp" UriSource="btn3.png"></BitmapImage>
        </Button.Resources>
    </Button>
</StackPanel>

注意：您也可以使用 Tag 属性设置图像源