WPF Buttons Style

Question

I have WPF Form which has many buttons with the same code. Appearance of all buttons must be the same For example, code for one of these buttons

                       <Button x:Name="btnAddRelative" Width="120" Click="btnAddRelative_Click"  >
                        <Button.Content>
                            <StackPanel Orientation="Horizontal">
                                <Image Height="26" HorizontalAlignment="Left">
                                    <Image.Source>
                                        <BitmapImage UriSource="images/add.png" />
                                    </Image.Source>
                                </Image>
                                <TextBlock Text="  Add Relative" Height="20" VerticalAlignment="Center"/>
                            </StackPanel>
                        </Button.Content>
                    </Button>

How can I create one style and use it for all my buttons. All buttons has the same png image, only their text different. How can I do this. I tried to do this with Style object in Resource Section:

    <UserControl.Resources>
    <Style TargetType="Button" x:Key="AddStyle">
        <Setter Property="Content">
            <Setter.Value>
                <StackPanel Orientation="Horizontal">
                    <Image Height="26" HorizontalAlignment="Left">
                        <Image.Source>
                            <BitmapImage UriSource="images/add.png" />
                        </Image.Source>
                    </Image>
                    <TextBlock Text="  " Height="20" VerticalAlignment="Center"/>
                </StackPanel>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

But this code not work. Can any body know how can I do this?

Answer 1

Try changing your style as follows

<UserControl.Resources>
        <Style
            TargetType="Button"
            x:Key="AddStyle">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel
                            Orientation="Horizontal">
                            <Image
                                Height="26"
                                HorizontalAlignment="Left">
                                <Image.Source>
                                    <BitmapImage
                                        UriSource="images/add.png" />
                                </Image.Source>
                            </Image>
                            <TextBlock
                                Text="  "
                                Height="20"
                                VerticalAlignment="Center" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

[Edit inspired by comment]

You could create a new UserControl, lets call it AddButtonContent containing your Stackpanel and such, then include that within your button, like so:

<Button>
    <local:AddButtonContent
        ButtonText="Testing, one, two, three" />
</Button>

You'll need to add a xmlns reference called local (or whatever you'd like to call it) to the UserControl with all of the buttons.

The codebehind portion of your AddButtonContent UserControl will need the following code, and you'll need to name your TextBlock (I used testText for this example).

public static DependencyProperty ButtonTextProperty = DependencyProperty.Register("ButtonText", typeof(string), typeof(AddButtonContent), new PropertyMetadata("", onTextChangedCallback));

public string ButtonText
{
    get { return (string)GetValue(ButtonTextProperty); }
    set
    {
        SetValue(ButtonTextProperty, value);
    }
}


static void onTextChangedCallback(
    DependencyObject dobj,
    DependencyPropertyChangedEventArgs args)
{
    AddButtonContent abc = dobj as AddButtonContent;
    abc.testText.Text = args.NewValue.ToString();
}

Answer 2

just try this

   <Window.Resources>
    <Style TargetType="Button"
           x:Key="AddStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <StackPanel Orientation="Horizontal">
                        <Image Height="26"
                               Width="20"
                               HorizontalAlignment="Left">
                            <Image.Source>
                                <BitmapImage UriSource="/WpfApplication33;component/Images/MoveLeft.png" />
                            </Image.Source>
                        </Image>
                        <TextBlock Text ="{TemplateBinding Content}"
                                   Height="20"
                                    />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>
<Grid>
    <StackPanel>
    <Button  Style="{StaticResource AddStyle}"
             Height="25" Width="100"  
             Content="Button1"></Button>
    <Button  Style="{StaticResource AddStyle}"
             Height="25"
             Width="100"

             Content="Button22"></Button>
        <Button  Style="{StaticResource AddStyle}"
                 Height="25"
                 Width="100"
                 Content="Button2233"></Button>
        <Button  Style="{StaticResource AddStyle}"
                 Height="25"
                 Width="100"
                 Content="Button2332"></Button>

    </StackPanel>
</Grid>

Note: Use ContentPresenter instead of TextBlock if you have to display anything other than flat text

Answer 3

If the image is fix you can hard-code it in the style, and use the Content property of Button bin to the Content of TextBox

 <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border
                            Background="{TemplateBinding Background}"                            
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <StackPanel 
                                Orientation="Horizontal">
                                <!--<Image Height="26" HorizontalAlignment="Left">
                                    <Image.Source>
                                        <BitmapImage UriSource="images/add.png" />
                                    </Image.Source>
                                </Image>-->
                                <TextBlock 
                                    Foreground="{TemplateBinding Foreground}"
                                    Text="{TemplateBinding Content}" 
                                    Height="20" 
                                    VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>