Change content of Image and of TextBlock when the

Question

I have this style:

<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>

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?

Answer 1

Resource

<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>

Note : You can set Image Source using Tag property also

Answer 2

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:

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