改变形象和TextBlock的内容时，图像与文本块是在一个按钮 [英] Change content of Image and of TextBlock when the Image and the TextBlock are in a button

问题描述

我有这样的风格：

<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

和我有使用它的三个按钮：

And I have three buttons that use it:

<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的形象写在上面，第二个按钮相同但'家'，等我该怎么做呢？

I want these 3 buttons which implement the same style, to show different image and text. The first button should have image of OK and 'OK' written on it, the second button the same but for 'Home', etc. How do I do that?

推荐答案

尝试创建一个用户控件。这里是我的，只是对其进行修改以满足您的需求：
XAML：

Try creating a UserControl. Here is mine, just modify it to suit your needs: 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>

codeBehind：

CodeBehind:

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);
        }
    }
}

这篇关于改变形象和TextBlock的内容时，图像与文本块是在一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！