Clever Geek Handbook

WPF: Change ComboBox Button Arrow Button Color in XAML

I want to change the color ComboBox

Arrow

as well Mouse Over

. Currently I only found this little one Squesre

around the arrow and changed it instead Mouse Over

- True

:

<Trigger Property="UIElement.IsMouseOver" Value="True">
    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="White"/>
</Trigger>

enter image description here

Mouse Over

false

:

<Trigger Property="UIElement.IsMouseOver" Value="false">
    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="Transparent"/>
</Trigger>

enter image description here

  • Edit

                                      

        <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="2" Name="Border"
          BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
          CornerRadius="0" BorderThickness="1, 1, 1, 1" 
          Background="Transparent" />
            <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder"
          CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" 
          Background="#FF998F8F" />

            <Path Name="Arrow" Grid.Column="1" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
        HorizontalAlignment="Center" Fill="#444"
        VerticalAlignment="Center" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
                <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="Transparent"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="Gainsboro"/>
            </Trigger>
            <Trigger Property="UIElement.IsMouseOver" Value="false">
                <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="Transparent"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="Gray"/>
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
                <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
                <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type ComboBox}" >
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="TextElement.Foreground" Value="Black"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Grid.Column="2"
            ClickMode="Press" Focusable="False"
            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
            Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                        <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                          HorizontalAlignment="Left" VerticalAlignment="Center"                              
                          Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                          ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

                        <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                         IsReadOnly="{TemplateBinding IsReadOnly}"
                         Visibility="Hidden" Background="Transparent"
                         HorizontalAlignment="Left" VerticalAlignment="Center"
                         Focusable="True" >
                            <TextBox.Template>
                                <ControlTemplate TargetType="TextBox" >
                                    <Border Name="PART_ContentHost" Focusable="False" />
                                </ControlTemplate>
                            </TextBox.Template>
                        </TextBox>
                        <!-- Popup showing items -->
                        <Popup Name="Popup" Placement="Bottom"
                           Focusable="False" AllowsTransparency="True"
                           IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                           PopupAnimation="Slide" >
                            <Grid Name="DropDown" SnapsToDevicePixels="True"
                MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                                <Border Name="DropDownBorder" Background="Transparent" Margin="0, 1, 0, 0"
                    CornerRadius="0" BorderThickness="1,1,1,1" 
                    BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                                <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                    <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ItemsControl.HasItems" Value="False">
                            <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                        </Trigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </Trigger>
                        <Trigger Property="ComboBox.IsEditable" Value="True">
                            <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                            <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                            <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- endregion -->

By the way, I also want to change the color Border

withMouse Over

+3


source to share


1 answer


What you need to do is right click on the combobox and select edit template -> edit copy (which will give you the whole template for the combobox) then you need to find the template "ComboBoxToggleButton" and you will find the path inside it you can change your color or even replace it with another vector if you like).



0


source






More articles:


All Articles