C#•3y ago

❔ WPF How to change button hover color?

It seems there is some default color WPF uses as a highlight when the user mouses over a button, and i can't figure out what it is, where it is, or how to change it. My closest answer is far is maybe its a system brush, that gets the color from...your operating system? (ew).

74 Replies

Doombox•3y ago

it's changed via style triggers

<Style.Triggers>
  <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Background" Value="Red"/>
  </Trigger>
</Style.Triggers>

<Style.Triggers>
  <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Background" Value="Red"/>
  </Trigger>
</Style.Triggers>

ignoring the actual declaration/usage of the style itself as for the default colour... uhh, I don't actually know, I assume the default style for WPF controls are declared the exact same way as any other style, in which case the colour will just be based on whatever internal document microsoft uses when designing their OS'

Alexicon•3y ago

You can do this by applying a style to a button and changing its template. For example with this simple style:

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
               <Border 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="#FFCBCBCB"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" Value="#FFB8B8B8"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
               <Border 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" Value="#FFCBCBCB"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" Value="#FFB8B8B8"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Unfortunately I don't think what @Doombox says will work for buttons in particular since the highlight effect is part of the template and cannot be changed on a simple style trigger like other elements. I might be wrong but a quick test I just did seems to suggest that is the case.

Doombox•3y ago

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

should work though I'm too lazy to spin up Rider to try pepelaff

you might be right though thinking about it

Alexicon•3y ago

@Doombox, What you just posted works actually with the style trigger since you are overriding the template. So using what you did I think actually this is the simplest style @Dawnbomb could use that doesn't really change anything else:

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="#FFCBCBCB"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" Value="#FFB8B8B8"/>
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
                    <ContentPresenter 
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="#FFCBCBCB"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" Value="#FFB8B8B8"/>
        </Trigger>
    </Style.Triggers>
</Style>

Doombox•3y ago

love WPF, making what should be relatively simple very complex unironically do love it though, just stuff like this is annoying

.button:hover {
      background-color:#ffffff;
  }

.button:hover {
      background-color:#ffffff;
  }

if only... pepehands

DawnbombOP•3y ago

@Alexicon I am losing my mind. I don't understand templates at all, all i get is i can't change hover colors without them, and it just takes a ton of code and makes everything so confusing just to have code that says the content is the content (why is this no assumed / default? WPF is so bad omggg) and it seems regardless if i put a trigger inside data, or data inside a trigger, it just gives me an error anyway. 😡

Alexicon•3y ago

Ah, so if you want to check for two conditions things become slightly more complicated (I know that's exactly what you want to hear). What you need to do in this case is use what's called a multi-trigger. This is like using an if statement with 'and' (&&) clauses. For example, if you want to set the background when the theme is light and the mouse is pressed you would have to do this:

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
        <Condition Binding="{Binding Path=Theme, Source={x:Static properties:Settings.Default}}" Value="light"/>
    </MultiDataTrigger.Conditions>
    <MultiDataTrigger.Setters>
        <Setter Property="Background" Value="#FFC5C5C5"/>
    </MultiDataTrigger.Setters>
</MultiDataTrigger>

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
        <Condition Binding="{Binding Path=Theme, Source={x:Static properties:Settings.Default}}" Value="light"/>
    </MultiDataTrigger.Conditions>
    <MultiDataTrigger.Setters>
        <Setter Property="Background" Value="#FFC5C5C5"/>
    </MultiDataTrigger.Setters>
</MultiDataTrigger>

note the slight complexity with getting the 'IsPressed' value, because this is a 'data-trigger' we have to use a relative source to get the property of the button itself. I wont get into those details now but is something you might consider looking into if you continue to use WPF. I went ahead and made a fully working example of what I think your trying to achieve here, which I recommend looking at: https://github.com/AlexLexicon/Discord.Example.MultiBindings

GitHub

GitHub - AlexLexicon/Discord.Example.MultiBindings

Contribute to AlexLexicon/Discord.Example.MultiBindings development by creating an account on GitHub.

Alexicon•3y ago

Now additionally something else you can do that makes the xaml slightly easier is making one of your themes the default setters for the style. What I mean by this is that you can have this in your style:

<!--Default-->
<Setter Property="Background" Value="#FFF4F4F4"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>

<Style.Triggers>

    <!--Default MouseOver-->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="#FFD7D7D7"/>
    </Trigger>

    <!--Default Pressed-->
    <Trigger Property="IsPressed" Value="True">
        <Setter Property="Background" Value="#FFC5C5C5"/>
    </Trigger>

    <!--DarkMode Default-->
    <DataTrigger Binding="{Binding Path=Theme, Source={x:Static properties:Settings.Default}}" Value="dark">
        <Setter Property="Background" Value="#FF606060"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
    </DataTrigger>

    ...

</Style.Triggers>

<!--Default-->
<Setter Property="Background" Value="#FFF4F4F4"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>

<Style.Triggers>

    <!--Default MouseOver-->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="#FFD7D7D7"/>
    </Trigger>

    <!--Default Pressed-->
    <Trigger Property="IsPressed" Value="True">
        <Setter Property="Background" Value="#FFC5C5C5"/>
    </Trigger>

    <!--DarkMode Default-->
    <DataTrigger Binding="{Binding Path=Theme, Source={x:Static properties:Settings.Default}}" Value="dark">
        <Setter Property="Background" Value="#FF606060"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
    </DataTrigger>

    ...

</Style.Triggers>

which will give the button a default look of "light" but then you can use the data-triggers to only apply changes when you want the button to be "dark" or any other themes. Like I said this is only a minor simplification to the xaml but I might recommend it. You can find a working example of this in the same github repo but on this separate branch: https://github.com/AlexLexicon/Discord.Example.MultiBindings/tree/WithDefaultSetters

GitHub

GitHub - AlexLexicon/Discord.Example.MultiBindings at WithDefaultSe...

Contribute to AlexLexicon/Discord.Example.MultiBindings development by creating an account on GitHub.

DawnbombOP•3y ago

it...didn't exactly work? oh, it does, just the...order matters... oh my god an is pressed trigger must be after a hover....KJFKLSFKJSDLKFJ why can't it work like normal code....

<Style.Triggers>
                
                <!--Light Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Light">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= White}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Black}"/>
                </DataTrigger>                

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                        <Condition Binding="{Binding Path=ColorMode, Source={x:Static properties:Settings.Default}}" Value="Light"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Background" Value="#FF715151"/>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
                
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                        <Condition Binding="{Binding Path=ColorMode, Source={x:Static properties:Settings.Default}}" Value="Light"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Background" Value="#FF59C550"/>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
</Style.Triggers>

<Style.Triggers>
                
                <!--Light Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Light">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= White}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Black}"/>
                </DataTrigger>                

                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                        <Condition Binding="{Binding Path=ColorMode, Source={x:Static properties:Settings.Default}}" Value="Light"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Background" Value="#FF715151"/>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
                
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
                        <Condition Binding="{Binding Path=ColorMode, Source={x:Static properties:Settings.Default}}" Value="Light"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="Background" Value="#FF59C550"/>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
</Style.Triggers>

Is this really the shortest for 1 style? i feel like these walls of text are going to get obscenely massive very quickly instead of winforms just having a color picked in a tired

Alexicon•3y ago

Yeah it ends up being a lot thats true, however that is more of a symptom of being a markup language. You can of course always move things into their own files so as to not become overwhelming. (For example you can put this one style in its own resource dictionary file called MyButtonStyle.xaml)

DawnbombOP•3y ago

next...in no particular order... where is grid borders, or was that just removed from the property menu to troll me. Treeview ignores foreground colors? Dropdown ignores foreground and background colors. my instinct was its the content of dropdown, but no, those are ofcorse seperatde from the actual dropdown.

DawnbombOP•3y ago

DawnbombOP•3y ago

leaving ugly white bars even f i did style every single one

Alexicon•3y ago

Lets start with #1, what do you mean by grid borders exactly? I haven't worked with winforms in over five years so if you referencing something from that I don't remember what it was.

DawnbombOP•3y ago

DawnbombOP•3y ago

in winforms you can just have a border that appears in the application without writing code (there is a lot of things winforms lets one do without writing code...why am i learning WPF again...?)

Alexicon•3y ago

ah gotcha

DawnbombOP•3y ago

google said i can use a border brush, and conveniently, there is no border brush in properties. my guess is that i must add it as a style

Alexicon•3y ago

ok so yeah in wpf some elements do have borders built in and others dont. However the easiest thing to do is just add a border by surrounding the element in a border. like this:

<Border
    BorderBrush="Black"
    BorderThickness="2">
    <Button Content="I now have a border!"/>
</Border>

<Border
    BorderBrush="Black"
    BorderThickness="2">
    <Button Content="I now have a border!"/>
</Border>

DawnbombOP•3y ago

and then if things want diffrent borders, suddenly im mass producing styles what about for a grid

Alexicon•3y ago

Same thing

<Border
    BorderBrush="Black"
    BorderThickness="2">
    <Grid>
        <!--this grid now has a border-->
    </Grid>
</Border>

<Border
    BorderBrush="Black"
    BorderThickness="2">
    <Grid>
        <!--this grid now has a border-->
    </Grid>
</Border>

DawnbombOP•3y ago

ahh it goes OUTSIDE the grid in XML, omg

Alexicon•3y ago

Now you second question was about foreground colors?

DawnbombOP•3y ago

treeview ignores forground, and combobox ignores background and foreground they accept them without errors, but ignore them

Alexicon•3y ago

lets start with comboboxes as I am more familiar with those. I must admit I am still not quite sure what your seeing. Because for me if I create just a default combobox and set the foreground I see that as the text color, for example:

<ComboBox
    Foreground="Red">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
    <ComboBoxItem Content="Option 3"/>
</ComboBox>

<ComboBox
    Foreground="Red">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
    <ComboBoxItem Content="Option 3"/>
</ComboBox>

Alexicon•3y ago

sorry the "yo" "whats" "up" i changed to options in my example xaml but didnt when I ran it, just ignore that part. haha

DawnbombOP•3y ago

i now realize i had assigned a backcolor and forcolor on aixedent but

DawnbombOP•3y ago

its still not obeying very much / fully

Alexicon•3y ago

Can you paste the xaml and tell me what you expect it to look like, then maybe I can point out the issue

DawnbombOP•3y ago

oh i

DawnbombOP•3y ago

DawnbombOP•3y ago

<ComboBox Style="{DynamicResource ComboBoxBasic}" HorizontalAlignment="Left" Margin="289,107,0,0" VerticalAlignment="Top" Width="120">
                        <ComboBoxItem Content="PC" />
                        <ComboBoxItem Content="Nintendo NES / Famicom" Background="#FF400000" />
                        <ComboBoxItem Content="Nintendo SNES / Super Famicom" Background="#FF400000" />
                        <ComboBoxItem Content="Nintendo 64"/>
                        <ComboBoxItem Content="Nintendo Gamecube"/>
                    </ComboBox>

<ComboBox Style="{DynamicResource ComboBoxBasic}" HorizontalAlignment="Left" Margin="289,107,0,0" VerticalAlignment="Top" Width="120">
                        <ComboBoxItem Content="PC" />
                        <ComboBoxItem Content="Nintendo NES / Famicom" Background="#FF400000" />
                        <ComboBoxItem Content="Nintendo SNES / Super Famicom" Background="#FF400000" />
                        <ComboBoxItem Content="Nintendo 64"/>
                        <ComboBoxItem Content="Nintendo Gamecube"/>
                    </ComboBox>

and

<Style TargetType="{x:Type ComboBox}" x:Key="ComboBoxBasic">
            <Style.Triggers>
                <!--Light Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Light">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= White}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Black}"/>
                </DataTrigger>

                <!--Dark Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Dark">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= Dark}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Light}"/>
                    <!--<Setter Property="BorderThickness" Value="4,1,1,1"/>-->
                </DataTrigger>
            </Style.Triggers>
        </Style>

<Style TargetType="{x:Type ComboBox}" x:Key="ComboBoxBasic">
            <Style.Triggers>
                <!--Light Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Light">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= White}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Black}"/>
                </DataTrigger>

                <!--Dark Mode-->
                <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorMode}" Value="Dark">
                    <Setter Property="Background" Value="{StaticResource ResourceKey= Dark}"/>
                    <Setter Property="Foreground" Value="{StaticResource ResourceKey= Light}"/>
                    <!--<Setter Property="BorderThickness" Value="4,1,1,1"/>-->
                </DataTrigger>
            </Style.Triggers>
        </Style>

the items other then ones i set manual colors to ignore the combobox color, but even before that...

DawnbombOP•3y ago

the combo box isn't inheriting the properties of it's items, so, the text is white on white theres no black or dark background and this item was one of the red background ones, so i know its not just inheriting from item even ignoring styling, if i assign it a background color, its entirely ignored

Alexicon•3y ago

ok so yes, now I get what your saying. Unfortunately combo boxes are one of the more annoying elements to style due to the complexity of their use. However I think I have a example I can provide that will solve this, one moment

DawnbombOP•3y ago

based on time to post, this is gonne be a giant wall of text. x.x

Alexicon•3y ago

ok, your going to love this one The first thing to keep in mind is that as with all similar elements in wpf children and their containers need to be styled separately so in the following example I will soon post I am only referring to the actual combo box and not the combobox items (however they are much easier anyway) When it comes to styling a combobox, it is sort of an all or nothing experience which means you need to modify the template (just like we did with the button) but because a combo box is more complicated, its template is more complication. I went ahead and created based on some things I have done in the past a very basic combobox style that you should be able to customize pretty easily.

Alexicon•3y ago

message.txt

Alexicon•3y ago

I made this style to use the following resources which are pretty self explanatory:

<SolidColorBrush x:Key="MyComboBoxStyle_Background_Normal" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Background_MouseOver" Color="#FFE5E5E5"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Background_Open" Color="#FFD6D6D6"/>

<!--this includes the arrow-->
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_Normal" Color="#FF000000"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_MouseOver" Color="#FF000000"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_Open" Color="#FF000000"/>

<SolidColorBrush x:Key="MyComboBoxStyle_Border_Brush" Color="#FFBFBFBF"/>
<Thickness x:Key="MyComboBoxStyle_Border_Thickness">1</Thickness>

<Thickness x:Key="MyComboBoxStyle_Padding">4,2</Thickness>

<HorizontalAlignment x:Key="MyComboBoxStyle_HorizontalContentAlignment">Left</HorizontalAlignment>
<VerticalAlignment x:Key="MyComboBoxStyle_VerticalContentAlignment">Center</VerticalAlignment>

<SolidColorBrush x:Key="MyComboBoxStyle_Background_Normal" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Background_MouseOver" Color="#FFE5E5E5"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Background_Open" Color="#FFD6D6D6"/>

<!--this includes the arrow-->
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_Normal" Color="#FF000000"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_MouseOver" Color="#FF000000"/>
<SolidColorBrush x:Key="MyComboBoxStyle_Foreground_Open" Color="#FF000000"/>

<SolidColorBrush x:Key="MyComboBoxStyle_Border_Brush" Color="#FFBFBFBF"/>
<Thickness x:Key="MyComboBoxStyle_Border_Thickness">1</Thickness>

<Thickness x:Key="MyComboBoxStyle_Padding">4,2</Thickness>

<HorizontalAlignment x:Key="MyComboBoxStyle_HorizontalContentAlignment">Left</HorizontalAlignment>
<VerticalAlignment x:Key="MyComboBoxStyle_VerticalContentAlignment">Center</VerticalAlignment>

Now this style is not taking into consideration your theming design and just has constant colors, however you can use the exact same technique as with the button (multidatatriggers) to get the theming working the same way. Again here is the same github repo but another branch incase you need to see the full example of this working: https://github.com/AlexLexicon/Discord.Example.MultiBindings/tree/ComboBoxFun Now as for styling the actual ComboBoxItems give me another minute...

GitHub

GitHub - AlexLexicon/Discord.Example.MultiBindings at ComboBoxFun

Contribute to AlexLexicon/Discord.Example.MultiBindings development by creating an account on GitHub.

Alexicon•3y ago

For the comboboxitem you can do something as simple as say this:

<Style x:Key="MyComboxItem" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border>
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="{StaticResource MyComboBoxStyle_Background_Normal}"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource MyComboBoxStyle_Background_MouseOver}"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <ContentPresenter Content="{TemplateBinding Content}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MyComboxItem" TargetType="{x:Type ComboBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Border>
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="{StaticResource MyComboBoxStyle_Background_Normal}"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource MyComboBoxStyle_Background_MouseOver}"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <ContentPresenter Content="{TemplateBinding Content}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and then you can make it so the combobox style uses this style for its items by adding this to the setters:

<Style x:Key="MyComboBoxStyle" TargetType="ComboBox">
    ...
    <Setter Property="ItemContainerStyle" Value="{StaticResource MyComboxItem}"/>
    ...
</Style>

<Style x:Key="MyComboBoxStyle" TargetType="ComboBox">
    ...
    <Setter Property="ItemContainerStyle" Value="{StaticResource MyComboxItem}"/>
    ...
</Style>

I pushed an update to that github branch if you want to see all of it together

DawnbombOP•3y ago

uh i dont see it on github

DawnbombOP•3y ago

DawnbombOP•3y ago

even though i saw an update its just some buttons

Alexicon•3y ago

try this link: https://github.com/AlexLexicon/Discord.Example.MultiBindings/tree/ComboBoxFun

GitHub

GitHub - AlexLexicon/Discord.Example.MultiBindings at ComboBoxFun

Contribute to AlexLexicon/Discord.Example.MultiBindings development by creating an account on GitHub.

Alexicon•3y ago

The branch is called "ComboBoxFun"

DawnbombOP•3y ago

how do i download a branch? it just keeps giving me the main one

Alexicon•3y ago

Oh sorry, you can select the branch from here:

DawnbombOP•3y ago

but also i am getting so extremely confused

Alexicon•3y ago

Then once you select the branch you want you can just download as normal

DawnbombOP•3y ago

well, how does one download as normal?

Alexicon•3y ago

You can do this:

DawnbombOP•3y ago

thats what i did hmmm

Alexicon•3y ago

Are you using visual studio?

DawnbombOP•3y ago

yes

Alexicon•3y ago

Have you used git before or is that new to you?

DawnbombOP•3y ago

okay, i got it, but i had to download as zip instead of just open with VS i feel like WPF is so convolted i need help with literally every single step of every single thing i do and its infuriating

Alexicon•3y ago

yeah it is not simple thats for sure. I felt exactly the same when I started wanting to use it.

DawnbombOP•3y ago

whoever designed picking a color to need a template and 200+ lines of codes should be assassinated irredeemably evil

Alexicon•3y ago

haha, yeah I think they could have made the default templates better thats for sure.

DawnbombOP•3y ago

this is "so complicated you will quit and pay us to do it for you" tier im going to need a lot of help to understand how to use this in any meaningful way its so much like Even adding a single thing to a list is so much effect, its faster to type in C# add thing to collection, then to actually add it to the collection

Alexicon•3y ago

Well most of the time adding things to lists and collections should be done in C#, Ideally in a view model if you are going that route but even the code behind is fine.

DawnbombOP•3y ago

1 Im not sure how much i care, but the items backround is ignored now. 2 i have no idea how to apply any of this to a new combo box. I just take one, slam it down, painfully add items to it very slowly because adding things to a collection menu is so slow, apply style, i hit go, and...its...not working.

DawnbombOP•3y ago

DawnbombOP•3y ago

DawnbombOP•3y ago

I mean i guess its similuar but its not the same, despite both having the same style

Alexicon•3y ago

well the second one is using listboxitems rather than comboboxitems

Alexicon•3y ago

So I went ahead and made a full example showing what I think it is you want. Again here is the source code: https://github.com/AlexLexicon/Discord.Example.ThemesAndStyles But also here is a video where I am demoing it. https://www.youtube.com/watch?v=mhg_UpsciHM Notice how simple the actual view code is (The xaml for the MainWindow), Yes styles are annoying but once you have defined them all of your elements of that type can use them. You will also notice I am not even telling it to use those styles but it still is. Thats because if you do not give a style a "x:Key" then it is used as the default style for all those types of elements which makes it nice to use.

GitHub

GitHub - AlexLexicon/Discord.Example.ThemesAndStyles

Contribute to AlexLexicon/Discord.Example.ThemesAndStyles development by creating an account on GitHub.

Alexicon

YouTube

Discord.Example.ThemesAndStyles Demo 1

DawnbombOP•3y ago

I see your offline, i'll look a bit later. I've been frying my brain for hours. I realize this now. I wish i...why would it even allow.....UGH I'm about to get it busy, but i got it working, horay! I also removed the keys on things and seperated them all into seperated dictionaries (Plus merged dictionaries) that all aside, now i have a new problem

DawnbombOP•3y ago

DawnbombOP•3y ago

DawnbombOP•3y ago

i set treeview to have a red background

<Style TargetType="{x:Type Grid}" >
        <Style.Triggers>
            <!--Light Mode-->
            <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorTheme}" Value="Light">
                <Setter Property="Background" Value="{StaticResource ResourceKey= WhiteGrid}"/>
            </DataTrigger>

            <!--Dark Mode-->
            <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorTheme}" Value="Dark">
                <Setter Property="Background" Value="{StaticResource ResourceKey= Dark}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

<Style TargetType="{x:Type Grid}" >
        <Style.Triggers>
            <!--Light Mode-->
            <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorTheme}" Value="Light">
                <Setter Property="Background" Value="{StaticResource ResourceKey= WhiteGrid}"/>
            </DataTrigger>

            <!--Dark Mode-->
            <DataTrigger Binding="{Binding Source={x:Static properties:Settings.Default}, Path=ColorTheme}" Value="Dark">
                <Setter Property="Background" Value="{StaticResource ResourceKey= Dark}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

But using this, now makes the treeview take in the grid as its own color for it's uh...nodes or whatever their called (items?) this affects the radio buttons as well and is even overrighting the checked state of dark mode (the inner part is square instead of circle) so im guessing more template stuff again. this occurs without any style spplied to the tree or radio, and i bet other things have problems as well i just havn't made those tools yet Presumably this is more template stuff

Accord•3y ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ WPF How to change button hover color?

Did you find this page helpful?