Search code examples
c#wpfbuttonstyles

How to 'call' my styled button(xaml) from code behind


I have a button in XAML which i styled the way I need it. This is XAML code of that button:

        <Button x:Name="btnAddNewItem"
            Grid.Column="0" Grid.Row="0"
            FontSize="15"
            BorderThickness="1.5"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            Foreground="White"
            Background="White"
            BorderBrush="#0091EA" Margin="5,0,0,0" Height="90" Width="90">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderThickness="{TemplateBinding BorderThickness}"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                </ControlTemplate>
            </Button.Template>

And I would like to achieve something like this, so I would like to delete xaml button, and create same button programatically when its needed, with same style and everything like I did in xaml, example how I would like to create it:

 private void AddSubmenuButton(string name)
 {
            MyButton button = new MyButton();
            button.ButtonText = name;
 }

Is this possible and if so: how?

P.S I tried classic way, like this:

  Button a = new Button();
            a.BorderThickness = new Thickness(1);
            a.Foreground = new SolidColorBrush(Colors.Black);
            a.BorderBrush = mySolidColorBrush;
            a.Content = "Button1";
            a.Width = 90;
            a.Height = 90;

But I get this:

enter image description here

It's possible to notice that thickness it not 1 at all, it has some weird value and I don't know how to change it.. So that is reason why I created button in xaml which looks much more nice and I want to call it/create it from code behind.

EDIT:

@mm8 THANK YOU A LOT! THAT'S IT!

This is awesome mate, but what about that If I would like to place icon + text in my button, I would ussualy add something like this and its fine for me:

<Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="80*">
    <RowDefinition Height="20*"/>
</Grid.RowDefinitions>
    <Image Source="/MyProject.Wpf;component/Icons/customer-icon.png" Margin="10" Grid.Row="0" Width="Auto"/>
    <TextBlock Foreground="Black" Margin="0,0,0,3" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" >Izlaz</TextBlock>
</Grid>

as you can see I would add Grid to my button and it would look like this:

<Button x:Name="btnAddNewItem"
                    Grid.Column="0" Grid.Row="0"
                    FontSize="15"
                    ToolTip="Podaci"
                    BorderThickness="1.5"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Foreground="White"
                    Background="White"
                    BorderBrush="#0091EA" Margin="5,0,0,0" Height="90" Width="90">
                    <Button.Template>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                        </ControlTemplate>
                    </Button.Template>
        <Grid>
         <Grid.RowDefinitions>
            <RowDefinition Height="80*">
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
            <Image Source="/MyProject.Wpf;component/Icons/customer-icon.png" Margin="10" Grid.Row="0" Width="Auto"/>
            <TextBlock Foreground="Black" Margin="0,0,0,3" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" >Izlaz</TextBlock>
        </Grid>
                    </Button>

So could I somehow achieve this (image + text IN MY button ) also to create it programatically.


Solution

  • Define a style in your App.xaml:

    <Application x:Class="WpfApplication1.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:WpfApplication1"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <Style x:Key="theStyle" TargetType="Button">
                <Setter Property="FontSize" Value="15" />
                <Setter Property="BorderThickness" Value="1.5" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <!-- and so on for each property...-->
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Application.Resources>
    </Application>
    

    You can then apply this style to any Button in your application, either in XAML:

    <Button x:Name="btnAddNewItem" Style="{StaticResource myStyle}"/>
    

    ...or programmatically:

    Button button = new Button();
    button.Style = Application.Current.Resources["myStyle"] as Style;