WPF:在 XAML 中更改 ComboBox 箭头按钮颜色

Question

我想在 Mouse Over 时更改我的 ComboBox Arrow 颜色。目前我只在箭头周围发现了这个小的 Squesre 并在 Mouse Over 为 True 时更改它:

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

鼠标悬停 为false:

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

• 编辑

      <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 -->
  

顺便说一句，我还想用 Mouse Over 更改 Border 颜色

Answer 1

你需要做的是右键单击组合框并选择编辑模板 -> 编辑副本(这将为你提供组合框的整个模板)然后你需要找到“ComboBoxToggleButton”模板，你会找到一个路径在里面，你可以改变它的颜色，如果你愿意的话，甚至可以用不同的矢量替换它。