WPF - Convert button to style

Question

I've created a button inside a window. For an easier usage, I want to convert the button into a style.

The button in the window file

<Button x:Name="btn_CustomButton" 
                            HorizontalAlignment="Stretch" 
                            VerticalAlignment="Top"  
                            Padding="0,10,0,7" 
                            HorizontalContentAlignment="Stretch" 
                            BorderBrush="{x:Null}" 
                            Background="#FF2E2E2E" 
                            Margin="0,0,0,1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="3*"/>
                            </Grid.ColumnDefinitions>

                            <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" />
                            <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label>
                        </Grid>
                    </Button>

The style I tried:

<Style x:Key="NavigationButton" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="#FF2E2E2E" />
    <Setter Property="Padding" Value="0,10,0,7"/>
    <Setter Property="Margin" Value="0,0,0,1"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="{TemplateBinding Width}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" />
                        <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem is, the style seems to ignore some attributes like the background color and also the padding.

What it should look like:

What it does look like:

It's hard to see the difference, but the style actually ignores the background color.

Also, how could I send the image path to the button so I could use

<button Style="{StaticResource NavigationButton}" 
    Content="Text" 
    ImageSource="someImage.png" />

Since I'm new in learning wpf styling, any help is appreciated :)

Something in the control template has to use the background color, but your control template ignores it. Try using ContentTemplate instead; that will leave the base button control template stuff intact, like your original did. — 15ee8f99-57ff-4f92-890c-b56153, Oct 26 '16 at 02:31
Possible duplicate of [Creating an image+text button with a control template?](http://stackoverflow.com/questions/1933127/creating-an-imagetext-button-with-a-control-template) — Suresh, Oct 26 '16 at 06:20

score 1 · Answer 1 · answered Nov 03 '16 at 16:04

You don't need to set the OverridesDefaultStyle in the style because setting the ControlTemplate does that. That's the whole point.

<Style x:Key="NavigationButton" TargetType="{x:Type Button}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="#FF2E2E2E" />
    <Setter Property="Padding" Value="0,10,0,7"/>
    <Setter Property="Margin" Value="0,0,0,1"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Padding="{TempalteBinding Padding}"
                        Margin="{TemplateBinding Margin}">
                    <Grid Width="{TemplateBinding Width}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" 
                               Source="UIExplorer_64x.png"
                               Margin="10,0,0,0"
                               Stretch="UniformToFill" />
                        <Label Grid.Column="1" 
                               HorizontalAlignment="Left" 
                               VerticalAlignment="Center" 
                               Margin="10,0,0,2" 
                               FontSize="18" 
                               Foreground="#FFD6D6D6" 
                               Padding="0">
                            btn_CustomButton
                        </Label>
                    </Grid> 
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

That should get your closer to what you're looking for. You're defining the template for the control, in this case a button. That means that you are throwing all the property settings away and setting them yourself. You're starting with a blank slate, and that's why you lose all the other stuff that came as default. So if you want to do that, you have to be willing to add in the visual style you want – every last property you want your users to see.

WPF - Convert button to style

1 Answers1