2016-03-01 57 views
2

我正在尝试更改ComboBoxItem的前景色,但它不能按预期方式工作。如何使用图标更改所选ComboBoxItem的前景?

前景的默认颜色是黑色,我想在打开下拉菜单/弹出菜单时将选定的项目前景设置为白色。当ComboBoxItem仅包含文本内容时,它工作正常。但是,如果选择包含非纯文本内容的ComboBoxItem,则在关闭下拉菜单/弹出窗口后,前景将保持白色。

的XAML:

<ComboBox HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Style="{DynamicResource ComboBoxStyle1}" ItemContainerStyle="{DynamicResource ComboBoxItemStyle1}"> 
     <ComboBoxItem> 
      <StackPanel Orientation="Horizontal"> 
       <Rectangle Height="16" Width="16" Fill="Red"/> 
       <TextBlock Text="123"/> 
      </StackPanel> 
     </ComboBoxItem> 
     <ComboBoxItem Content="456"/> 
     <ComboBoxItem> 
      <StackPanel Orientation="Horizontal"> 
       <Rectangle Height="16" Width="16" Fill="Red"/> 
       <TextBlock Text="789"/> 
      </StackPanel> 
     </ComboBoxItem> 
    </ComboBox> 

,显示如下图:

请找到下面的图片了解更多信息。

enter image description here

<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}"> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Grid x:Name="MainGrid" SnapsToDevicePixels="true"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/> 
        </Grid.ColumnDefinitions> 
        <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> 
         <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}"> 
          <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"> 
           <ScrollViewer x:Name="DropDownScrollViewer"> 
            <Grid RenderOptions.ClearTypeHint="Enabled"> 
             <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
              <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/> 
             </Canvas> 
             <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
            </Grid> 
           </ScrollViewer> 
          </Border> 
         </Themes:SystemDropShadowChrome> 
        </Popup> 
        <ToggleButton x:Name="ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/> 
        <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsChecked" Value="true" SourceName="ToggleButton"> 
         <Setter Property="Foreground" Value="White"/> 
        </Trigger> 
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
         <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
         <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
        </Trigger> 
        <Trigger Property="HasItems" Value="false"> 
         <Setter Property="Height" TargetName="DropDownBorder" Value="95"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         <Setter Property="Background" Value="#FFF4F4F4"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="ComboBoxItemStyle1" TargetType="{x:Type ComboBoxItem}"> 
    <Setter Property="Padding" Value="3,0,3,0"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
       <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="Background" TargetName="Bd" Value="LightBlue"/> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="true"> 
         <Setter Property="Background" TargetName="Bd" Value="Blue"/> 
         <Setter Property="Foreground" Value="White"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

回答

0

最后由我向后思维想出了一个解决方案。

首先,我打开下拉菜单/弹出窗口时将ComboBox的前景设置为白色,并使ComboBoxItem继承前景色。

ComboBoxStyle:

<Trigger Property="IsDropDownOpen" Value="true"> 
    <Setter Property="Foreground" Value="White"/> 
</Trigger> 

ComboBoxItemStyle:

<Setter Property="Foreground" Value="{Binding Foreground,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ComboBox}}}"/> 

然后,我改变未选择ComboBoxItem的前景色为黑色。

<Trigger Property="IsSelected" Value="false"> 
    <Setter Property="Foreground" Value="Black"/> 
</Trigger> 

下面是完整的XAML:

<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}"> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Grid x:Name="MainGrid" SnapsToDevicePixels="true"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/> 
        </Grid.ColumnDefinitions> 
        <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> 
         <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}"> 
          <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"> 
           <ScrollViewer x:Name="DropDownScrollViewer"> 
            <Grid RenderOptions.ClearTypeHint="Enabled"> 
             <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
              <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/> 
             </Canvas> 
             <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
            </Grid> 
           </ScrollViewer> 
          </Border> 
         </Themes:SystemDropShadowChrome> 
        </Popup> 
        <ToggleButton x:Name="ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/> 
        <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsDropDownOpen" Value="true"> 
         <Setter Property="Foreground" Value="White"/> 
        </Trigger> 
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
         <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
         <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
        </Trigger> 
        <Trigger Property="HasItems" Value="false"> 
         <Setter Property="Height" TargetName="DropDownBorder" Value="95"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         <Setter Property="Background" Value="#FFF4F4F4"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="ComboBoxItemStyle1" TargetType="{x:Type ComboBoxItem}"> 
    <Setter Property="Padding" Value="3,0,3,0"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" Value="{Binding Foreground,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ComboBox}}}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
       <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="Background" TargetName="Bd" Value="LightBlue"/> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="true"> 
         <Setter Property="Background" TargetName="Bd" Value="Blue"/> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="false"> 
         <Setter Property="Foreground" Value="Black"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
相关问题