WPF Material Design how to change icon and press color of ComboBox icon?

139 Views Asked by At

I'm using WPF .NET 7 and Material Design for WPF

How do I easily change the icon and press color of the ComboBox icon?

I want to replace the current icon with "ChevronDown" from Material Design Icons

<materialDesign:PackIcon Width="15" Height="15" Foreground="{StaticResource Foreground}" Kind="ChevronDown" />

This is the ComboBox. The current icon is circled
ComboBox with White Triangle Arrow

This is the ComboBox when the popup is open and you press+hold on it. How do I disable to purple color of the icon and always keep it white?
ComboBox with Purple Triangle Arrow

Here is a video for more visual info on what's happening
https://www.youtube.com/watch?v=2zL3Rs6rCEM

Here is my GitHub repo
https://github.com/ZehsTeam/PhasmophobiaDiscordRPC


This is my ComboBox code
<ComboBox
    x:Name="LobbyTypeComboBox"
    Height="30"
    IsEnabled="True"
    SelectionChanged="LobbyTypeComboBox_SelectionChanged"
    Style="{DynamicResource ComboBoxDefault}">
    <ComboBoxItem Content="Public" />
    <ComboBoxItem Content="Private" />
</ComboBox>

If anyone has a solution, how do I implement it into my application resources resource dictionary?
<Application
    x:Class="PhasmophobiaDiscordRPC.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
    xmlns:internal="clr-namespace:MaterialDesignThemes.Wpf.Internal;assembly=MaterialDesignThemes.Wpf"
    xmlns:local="clr-namespace:PhasmophobiaDiscordRPC"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
    >
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Dark"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!--  Colors  -->
            <Color x:Key="Colors.Foreground">#F2F3F5</Color>
            <Color x:Key="Colors.Foreground2">#B5BAC1</Color>
            <Color x:Key="Colors.Background">#36393e</Color>
            <Color x:Key="Colors.Background2">#282b30</Color>
            <Color x:Key="Colors.Background3">#1e2124</Color>
            <Color x:Key="Colors.Background4">#424549</Color>

            <!--  Brushes  -->
            <SolidColorBrush x:Key="Foreground" Color="{StaticResource Colors.Foreground}" />
            <SolidColorBrush x:Key="Foreground2" Color="{StaticResource Colors.Foreground2}" />
            <SolidColorBrush x:Key="Background" Color="{StaticResource Colors.Background}" />
            <SolidColorBrush x:Key="Background2" Color="{StaticResource Colors.Background2}" />
            <SolidColorBrush x:Key="Background3" Color="{StaticResource Colors.Background3}" />
            <SolidColorBrush x:Key="Background4" Color="{StaticResource Colors.Background4}" />

            <!--  ComboBox  -->
            <Style
                x:Key="ComboBoxDefault"
                BasedOn="{StaticResource {x:Type ComboBox}}"
                TargetType="{x:Type ComboBox}">
                <Setter Property="Padding" Value="8,5,10,5" />
                <Setter Property="materialDesign:TextFieldAssist.DecorationVisibility" Value="Hidden" />
                <Setter Property="materialDesign:TextFieldAssist.UnderlineBrush" Value="{StaticResource Foreground}" />
                <Setter Property="BorderBrush" Value="{StaticResource Foreground}" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Foreground" Value="{StaticResource Foreground}" />
                <Setter Property="FontFamily" Value="{DynamicResource MaterialDesignFont}" />
                <Setter Property="FontSize" Value="12" />
                <Setter Property="FontWeight" Value="Normal" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

I was not able to easily find a way to change the icon using Material Design Icons I was not able to figure out how to keep the icon white at all times.

0

There are 0 best solutions below