C#•7mo ago

✅ Trying to edit button onMouseOver styles, but to no avail

I'm trying to get my MouseOver effects altered in my styles, but so far I've not been able to edit the mouseover styles. It keeps reverting back to the default blue style when IsMouseOver = true My current style (attempt?)

<Style TargetType="{x:Type Button}" x:Key="BtnOutlinePrimary">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="{DynamicResource CtPrimary}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Button Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{DynamicResource BorderThickness}"
                            FontFamily="{DynamicResource Roboto-Regular}"
                            Foreground="Black" >
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <!-- On Hover -->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{DynamicResource CtPrimary}" />
                <Setter Property="BorderBrush" Value="{DynamicResource CtDark}" />
            </Trigger>
        </Style.Triggers>
    </Style>

<Style TargetType="{x:Type Button}" x:Key="BtnOutlinePrimary">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="{DynamicResource CtPrimary}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Button Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{DynamicResource BorderThickness}"
                            FontFamily="{DynamicResource Roboto-Regular}"
                            Foreground="Black" >
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <!-- On Hover -->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{DynamicResource CtPrimary}" />
                <Setter Property="BorderBrush" Value="{DynamicResource CtDark}" />
            </Trigger>
        </Style.Triggers>
    </Style>

20 Replies

Buddy•7mo ago

You cannot set the property directly when using a style, it must be set in the style.

malkavOP•7mo ago

I'm sorry, what? 😅 Isn't it in the style?

Buddy•7mo ago

Oh, my apologies.

malkavOP•7mo ago

I just got a little confused 😅 I've also tried doing:

<ControlTemplate>
<!-- ... -->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- ... -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate>
<!-- ... -->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- ... -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

To no avail

leowest•7mo ago

This is just an example

    <Style TargetType="Button" x:Key="SampleButtonStyle">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border BorderThickness="0"
                            Background="{TemplateBinding Background}"
                            CornerRadius="0">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="Purple" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="Button" x:Key="SampleButtonStyle">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border BorderThickness="0"
                            Background="{TemplateBinding Background}"
                            CornerRadius="0">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="Purple" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

to manipulate the ispressed/ismouseover

malkavOP•7mo ago

How come this one uses border instead of button in the template?

leowest•7mo ago

I dont know where u got yours from but this is the actual button template if u have a button inside a button it wouldn't make much sense

malkavOP•7mo ago

I've been pretty much doing the F around and find out thing 😅 I saw the border one as well, but wanted to add to the styles but fair enough, lemme try to fiddle around again

leowest•7mo ago

well what u normally do is u right click the button in the designer and go to mmmm I forgot the name sec

leowest•7mo ago

leowest•7mo ago

Edit a Copy

malkavOP•7mo ago

I am not using a designer 😅 I am using Rider, and afaik Rider does not have a designer

leowest•7mo ago

and then it gives u the full template of the button

leowest•7mo ago

https://paste.mod.gg/basic/viewer/ekwxvsytivlp/0

BlazeBin Basic - ekwxvsytivlp

A tool for sharing your source code with the world!

malkavOP•7mo ago

Yay! This worked! Thanks 😅 I just had to use Border instead of Button :catfacepalm: which I guess makes sense now

leowest•7mo ago

and this is what the full template looks like so as u can see there the default is

                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>

                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>

u can also see this on the docs

leowest•7mo ago

https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/button-styles-and-templates?view=netframeworkdesktop-4.8

Button Styles and Templates - WPF .NET Framework

Learn about styles and templates for the Windows Presentation Foundation Button control. Modify the ControlTemplate to give the control a unique appearance.

malkavOP•7mo ago

Fair enough. Thanks for sharing that docs

leowest•7mo ago

no worries 😉 $close

MODiX•7mo ago

If you have no further questions, please use /close to mark the forum thread as answered

Gaming

Programming

✅ Trying to edit button onMouseOver styles, but to no avail