WPF Изменить цвет фона Combobox

В моем приложении WPF я просто хочу изменить цвет фона в поле Combo. Я не имею в виду раскрывающийся список, я хочу, чтобы какой-либо элемент был выбран в качестве фона. Подобно настройке фона кнопки - когда элемент управления отображается на экране, у него должен быть фона LightYellow. Это. Я много искал в сети, но везде можно было найти решения для выпадающих цветов фона. Я попытался применить SolidColorBrush и Style.Triggers к TextBlock от Combobox, но не успел, как хотел. Добавив строки SolidColorBrush, я получил свой набор раскрывающегося списка, но это не то, что я ищу. Мой код:

<ComboBox ItemsSource="{Binding MtrCm}" SelectedValue="{Binding WellboreDiameter_Unit, Mode=TwoWay}" Grid.Row="1" Height="23" HorizontalAlignment="Right" Margin="0,26,249,0" x:Name="cboWellDiameter" VerticalAlignment="Top" Width="120"   Background="LightYellow"  >
    <ComboBox.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Yellow" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Yellow" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow" />
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="True">
                    <Setter Property="Background" Value="Red" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.Resources>
</ComboBox>

Может ли кто-нибудь помочь мне настроить его на желаемый компонент, который я ищу.

Спасибо

Ответ 1

Попробуйте это

 <Window.Resources>  //Put this resourse n Window.Resources or UserControl.Resources
   <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
      <GradientBrush.GradientStops>
         <GradientStopCollection>
            <GradientStop Color="#FFDC3939" Offset="0.0"/>
            <GradientStop Color="#FFE80E0E" Offset="1.0"/>
         </GradientStopCollection>
      </GradientBrush.GradientStops>
   </LinearGradientBrush>

    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFFBE618" />

    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2"
  Background="{StaticResource NormalBrush}"
  BorderThickness="1" />
            <Border 
  Grid.Column="0"
  CornerRadius="2,0,0,2" 
  Margin="1" 
  Background="{StaticResource WindowBackgroundBrush}" 
  BorderThickness="0,0,1,0" />
            <Path 
  x:Name="Arrow"
  Grid.Column="1"     
  HorizontalAlignment="Center"
  VerticalAlignment="Center"
  Data="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    </ControlTemplate>


<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
  <Setter Property="Template">
   <Setter.Value>
     <ControlTemplate TargetType="ComboBox">
      <Grid>
       <ToggleButton 
         Name="ToggleButton" 
         Template="{StaticResource ComboBoxToggleButton}" 
         Grid.Column="2" 
         Focusable="false"
         IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
         ClickMode="Press">
      </ToggleButton>
      <ContentPresenter
        Name="ContentSite"
        IsHitTestVisible="False" 
        Margin="3,3,23,3"
        VerticalAlignment="Center"
        HorizontalAlignment="Left" />
       <TextBox x:Name="PART_EditableTextBox"
         Style="{x:Null}" 
         Template="{StaticResource ComboBoxTextBox}" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Margin="3,3,23,3"
         Focusable="True" 
         Background="Transparent"
         Visibility="Hidden"
         IsReadOnly="{TemplateBinding IsReadOnly}"/>
      <Popup 
        Name="Popup"
        Placement="Bottom"
        IsOpen="{TemplateBinding IsDropDownOpen}"
        AllowsTransparency="True" 
        Focusable="False"
        PopupAnimation="Slide">
        <Grid 
          Name="DropDown"
          SnapsToDevicePixels="True"                
          MinWidth="{TemplateBinding ActualWidth}"
          MaxHeight="{TemplateBinding MaxDropDownHeight}">
           <Border 
            x:Name="DropDownBorder"
            Background="{StaticResource WindowBackgroundBrush}"
            BorderThickness="1"/>
           <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
           </ScrollViewer>
          </Grid>
         </Popup>
        </Grid>
       </ControlTemplate>
      </Setter.Value>
     </Setter>
    <Style.Triggers>
   </Style.Triggers>
  </Style>
 </Window.Resources>
 <Grid>
    <ComboBox HorizontalAlignment="Left" Margin="256,57,0,0" VerticalAlignment="Top" Width="120">
    </ComboBox>

 </Grid>

Вот полный стиль, который вы можете изменить: http://msdn.microsoft.com/en-us/library/ms752094%28v=VS.85%29.aspx

Ответ 2

В то время как мне нравится принятый ответ, проблема с ним заключается в том, что презентатор текстового окна был полностью упущен, и поэтому вы можете выбирать и стилизовать вещи, но они никогда не будут представлены конечному пользователю. Я думаю, что самый простой способ получить комбинированный блок, который показывает данные, а затем, когда будет выбран, будет следующим:

<Window http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test" x:Class="MainWindow"
        mc:Ignorable="d" Title="MainWindow" Height="100" Width="200">
  <Window.Resources>
    <Style x:Key="ComboBoxTest2" TargetType="{x:Type ComboBox}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ComboBox">
            <Grid>
              <ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
                <ToggleButton.Template>
                  <ControlTemplate>
                    <Grid>
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*" />
                        <ColumnDefinition Width="*" />
                      </Grid.ColumnDefinitions>
                      <Border x:Name="Border"  Grid.ColumnSpan="2" CornerRadius="5" Background="Beige" BorderBrush="Black" BorderThickness="1" />
                      <Border Grid.Column="0" CornerRadius="5,0,0,5"  Margin="1"  Background="AliceBlue"  BorderBrush="Black" BorderThickness="0,0,1,0" />
                      <Path x:Name="Arrow" Grid.Column="1"  Fill="Orange" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                      <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                      </Trigger>
                      <Trigger Property="ToggleButton.IsChecked" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                      </Trigger>
                    </ControlTemplate.Triggers>
                  </ControlTemplate>
                </ToggleButton.Template>
              </ToggleButton>
              <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3"  />
              <TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>
              <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Slide">
                <Grid  Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                  <Border x:Name="DropDownBorder" Background="Blue" />
                  <ScrollViewer SnapsToDevicePixels="True">
                    <StackPanel IsItemsHost="True" />
                  </ScrollViewer>
                </Grid>
              </Popup>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="10">
    <ComboBox VerticalAlignment="Top" Width="120" Style="{StaticResource ComboBoxTest2}">
      <ComboBoxItem>Item1</ComboBoxItem>
      <ComboBoxItem>Item2</ComboBoxItem>
    </ComboBox>
  </StackPanel>
</Window>

Ключевыми частями презентации, которые необходимо сделать, является шаблон "ToggleButton.Template" для начального отображения. Я решил игнорировать создание большего количества кистей и ссылок на большее количество шаблонов и просто сделать все это встроенным, чтобы другие могли играть с ним по мере необходимости. Я также выбрал то, что, как я думал, было легко Идентифицируемые цвета, чтобы просто перейти к ссылке, он должен выглядеть ниже, когда он работает:

Ответ 3

Если вы используете VS 2012 или VS 2013 в окне "Структура документа", при просмотре вашего xaml получите шаблон управления выпадающего списка. Найдите стиль x:Key="ComboBoxReadonlyToggleButton" и обновите RenderMouseOver = "False" и RenderPressed="False" в темах: ButtonChrome, а также закомментируйте триггер, который влияет на IsEnabled.

Ниже приведено то, что я редактировал в своем поле, чтобы проиллюстрировать, что я имею в виду.

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="False" RenderPressed="False" SnapsToDevicePixels="true">
                        <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                            <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>
                        </Grid>
                    </Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="False"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <!--<Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Ответ 4

Попробуйте это

 <Window.Resources>
    <Style x:Key="style" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Grid>
                        <Border x:Name="Border" Background="Transparent">
                            <TextBlock FontSize="12" FontFamily="Segoe UI Light">
                        <ContentPresenter></ContentPresenter>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ComboBoxItem.IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Red"></Setter>
                        </Trigger>
                        <Trigger Property="ComboBoxItem.IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightGray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<ComboBox Height="35" Width="200" ItemContainerStyle="{StaticResource style}">
    <ComboBoxItem>Item1</ComboBoxItem>
    <ComboBoxItem>Item2</ComboBoxItem>
</ComboBox>

Ответ 5

Просто добавьте следующее в свой стиль ComboBox:)

BasedOn="{StaticResource {x:Type ComboBox}}"

Пример:

<Style TargetType="ComboBox" BasedOn="{StaticResource {x:Type ComboBox}}">
    <Setter Property="Background" Value="Red" />
    //Other setters, triggers, etc...
</Style>

Поверьте мне, это, вероятно, самый короткий способ сделать это... Я не понимаю, почему мы должны полностью переопределить шаблон ComboBox.