2014-03-27 110 views
11

在我的WPF應用程序中,我只想更改組合框的背景顏色。我不是說下拉列表,我想要的是任何選擇背景的項目。 就像設置一個按鈕的背景一樣 - 當控件顯示在屏幕上時,它應該有LightYellow背景。而已。 我在網上搜索了很多,但到處都可以找到下拉背景顏色的解決方案。我嘗試將SolidColorBrush和Style.Triggers應用於Combobox的TextBlock,但沒有成功。通過添加SolidColorBrush行,我得到了我的下拉背景設置,但這不是我正在尋找的。我的代碼是:WPF更改組合框的背景顏色

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

任何人都可以幫助我設置他期望的組件的背景。

感謝

回答

12

試試這個

<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

+0

我可以與我的其他幾個用戶控件共享相同的樣式嗎?我想在我的5個UserControls中使用相同的樣式(我有很多)。我可以在沒有寫入所有5個控件的情況下訪問它嗎?我很懷疑,但想確認一下。 – Tvd

+2

所選項目不顯示在頂部。嘗試了許多變化來設置前景,但沒有影響。爲什麼選定的項目在頂部不可見?我的意思是,即使在選擇後組合框出現空白 - 而選擇的項目應該出現在最上面。什麼設置相同? – Tvd

+0

偉大的答案,工作的魅力 –

0

試試這個

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

如果你正在使用VS 2012和VS 2013在文檔大綱窗口中查看您的xaml獲取控制模板組合框的te。 找到樣式x:Key="ComboBoxReadonlyToggleButton"並更新主題:ButtonChrome上的RenderMouseOver = "False"RenderPressed="False",並註釋掉影響IsEnabled的觸發器。

My Combo box when I dont click on it My Combobox when I click on it

下面是編輯我在我的箱子來說明我的意思的人。

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

爲此我需要添加Aero或任何如此的組裝,否則這也滿足我的需要。非常感謝。 – Tvd

7

雖然我喜歡接受的答案,我與它的問題是,在文本框中主持人完全錯過了這樣的話你可以選擇和風格化的東西,但他們將永遠不會被呈現給最終用戶。我認爲,最簡單的方法,實現了組合框,顯示數據,然後選擇顯示器時,它會是這樣:

<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」爲初始顯示。我選擇忽略製作更多的畫筆和更多模板的鏈接,只是將它們全部內聯,以便其他人可以根據需要使用它。我也選擇了我認爲是很容易識別的顏色,只是跳到參考它應該看起來像下面,當它的工作原理:

ComboBoxPicture

0

就以下內容添加到您的ComboBox風格:)

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

例子:

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

相信我,這可能是做最短的路......我不明白爲什麼我們要COMP letely重新定義ComboBox模板。

+4

它什麼都不做 – Treycos