CODEWITHSUNDEEP
c#.netwpfxaml
Mark Denom
Mark Denom

Reputation: 1057

Why isnt my button using the style I created?

So I decided to try to give a button a custom style. Yet when I assign it the Style it wont use it, why is this?

I tried creatinga button with a textbox, image and a ellipse with a label on that too. I want the button to change color when I hover over it but its making my button disappear.

Window resources

<Window.Resources>
    <Style x:Key="MenuButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ControlTemplate.Triggers>
                        <Trigger Property="Background" Value="#272727">
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Gray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

And then the button

<Button Background="Transparent"
                        Style="{StaticResource MenuButton}"
                        Height="25"
                        BorderThickness="0">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Resources/earth-globe.png"
                               Height="20"
                               Width="20"
                               HorizontalAlignment="Left"
                               Margin="0,0,5,0"
                               UseLayoutRounding="True"
                               RenderOptions.BitmapScalingMode="Fant"/>
                        <Label Content="Websites"
                               Foreground="White"
                               VerticalAlignment="Center"

                               Width="100"
                               Height="24"/>

                        <Grid HorizontalAlignment="Right" Height="20" Width="20">
                            <Ellipse Width="20"
                                     Height="20"
                                     Fill="#555555"
                                     Margin="0,0,0,0">
                            </Ellipse>
                            <TextBlock Text="10"
                                       HorizontalAlignment="Center" 
                                       VerticalAlignment="Center"
                                       FontSize="12"
                                       TextAlignment="Center"
                                       Foreground="White"/>
                        </Grid>

                    </StackPanel>
                </Button>

Upvotes: 0

Views: 68

Answers (2)

Impurity
Impurity

Reputation: 1122

You do not want to put that style in the template portion of the style because a template is used for customizing the full control look (i.e. making a button a circle) and a way of giving the developer more flexibility over styling. What you could do is make a style that is applied to the button. Instead try this:

<Window.Resources>
    <Style x:Key="MenuButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#272727" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Gray" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

If you did want to modify the template property though, also a valid approach you need to add a <ContentPresenter />. See the below example:

<Window.Resources>
    <Style x:Key="MenuButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter />
                    <ControlTemplate.Triggers>
                        <Trigger Property="Background" Value="#272727">
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Gray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

However, with the minimal styling you have it seems like a poor use case to modify the template and I would recommend the first approach.

Upvotes: 1

Dipen Shah
Dipen Shah

Reputation: 26075

Add missing ContentPresenter to your DataTemplate.

<Style x:Key="MenuButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter /> <!--This thing was missing-->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="RED" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 0

Related Questions