ComboBox custom ControlTemplate

ComboBox custom ControlTemplate

• drdexter33

  change the highlighted lines

  if you want to change the background of the textbox

  <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
  <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
  </ControlTemplate>
  if you want to change the background of the popup

  <Grid
  Name="DropDown"
  SnapsToDevicePixels="True"
  MinWidth="{TemplateBinding ActualWidth}"
  MaxHeight="{TemplateBinding MaxDropDownHeight}">
  <Border
  x:Name="DropDownBorder"
  Background="{StaticResource WindowBackgroundBrush}"
  BorderThickness="1"
  BorderBrush="{StaticResource SolidBorderBrush}"/>
  <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
  <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
  </ScrollViewer>
  </Grid>
  

  
  
  

• Olle Gustafsson

  Thanks for all this... this is all useful stuff! Hopefully I'm learning as I'm reading the answers too!

  My custom ComboBox is looking good now... only snag is that the "IsFocused" trigger doesn't seem to be firing in the way it does on an ordinary ComboBox... I'll have to do a bit more investgating before I put this in as a formal querstion though!

  
  

• my name is jay

  It is because of the property value precedence. If you set a (dependency) property both on the element directly and through a style, the direct value will have precedence.
  
  There is a good explanation in the documentation, I don't have the link right now but check under Dependency Properties section.
  
  
  

• Leonid B

  add this style

  <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">

  <Setter Property="SnapsToDevicePixels" Value="true"/>

  <Setter Property="OverridesDefaultStyle" Value="true"/>

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="{x:Type ComboBoxItem}">

  <Border

  Name="Border"

  Padding="2"

  SnapsToDevicePixels="true">

  <TextBlock x:Name="txt1" Text="{TemplateBinding Content}"></TextBlock>

  </Border>

  <ControlTemplate.Triggers>

  <Trigger Property="IsHighlighted" Value="true">

  <Setter TargetName="Border" Property="Background" Value="gray"/>

  <Setter TargetName="txt1" Property="Foreground" Value="blue"/>

  </Trigger>

  </ControlTemplate.Triggers>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  
  
  

• Grotius

  I am also not getting "IsFocused" Trigger working right way. pls update me if u find any solution. I vl also do the same

  Thanks

  
  
  

• JonesAtl

  Hi, thanks for this!

  I am now in the situation where I have a nice customised ComboBox for which I can change the background colour:
  <RCC:MyComboBox Background="Violet" Name=.........

  My very last question (!) is that I'm having problems changing the background property elsewhere.

  For example, given:
  <Style x:Key="MyComboBoxStyle" TargetType="{x:Type local:MyComboBox}">
  <Setter Property="FontFamily" Value="Century Gothic" />
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontSize" Value="30pt" />
  <Setter Property="Foreground" Value="Red" />
  <Setter Property="Background" Value="Yellow" />

  All of this takes effect save for the Background colour which stays obstinately violet........

  Any help, as always, much appreciated.

  
  

• Vjy

  I was wrong try this

  find

  <TextBox x:Name="PART_EditableTextBox"

  and change the background,

  It is hidden by default, so you have to set the IsEditable property to true on the combobox or remove the trigger from the template and

  Visibility="Hidden"

  from the TextBox
  
  

• kehsiao

  Sadly I couldn't find that page in my help, I expect something was not installed properly... is there a verion on the sdk site anywhere

  I did find the ComboBox control template at
  http://windowssdk.msdn.microsoft.com/en-us/library/ms752094.aspx
  and have been playing with that, adding the label I wanted.

  The thing I can't seem to do is change the colour of the background.
  In an ordinary ComboBox I can put
  <ComboBox Background="Red"...
  and it works, but using the Microsoft template
  <Me:MyComboBox Background="Red"...
  has no effect.

  Everything else seems to work well however, so if anyone can help with this one thing it would be much appreciated.
  

  
  

• Pure Krome

  Hi, thanks for this.

  Is the only way to have this working to make the text Editable though

  Even then I still only seem to get a block of colour the length of the text, rather than having the whole of the box filled, as happens using the Background property on an ordinary ComboBox.

  I've been staring at that template, trying to get my head around how it works... if only there was some clear documentation for this stuff.....

  
  

• Avi_harush

  Do you want to change the hightlight color
  
  

• roeeoz

  Yes, the colour of the background of the selected text in the ComboBox... actually the problem seems to apply to both Foreground and Background (not just background as I previously said) and to standard ComboBoxes as well as customised ones... so in other words:

  <ComboBox Background="Violet" Foreground="White"..... is coloured just as one would expect....

  But....

  <Style x:Key="MyNewStyle" TargetType="{x:Type ComboBox}">
  <Setter Property="FontFamily" Value="Century Gothic" />
  <Setter Property="FontSize" Value="20pt" />
  <Setter Property="Foreground" Value="Bisque" />
  <Setter Property="Background" Value="Bisque" />

  ...only seems to affect the FontFamily and Size, not the colours which resolutely remain as Violet and White.
  

  
  

• Seas Comander

  ComboBox template is more involved than textbox template, did you look at the following

  ms-help://MS.MSSDK.1033/MS.NETFX30SDK.1033/wpf_conceptual/html/b0662fa1-16d7-4320-b26b-c1804e565a44.htm

  
  
  

• Ken Harris

  Thanks for this --- I've given it a quick try.

  Changing the background of the popup (ie dropdown) works a treat!

  However changing the background of the TextBox (which is what I was really after) doesn't seem to work

  
  

• tonhinbm

  you should add this to the textbox

  Width="{TemplateBinding ActualWidth}"

  
  
  
• ComboBox custom ControlTemplate