Search code examples
wpfcomboboxstyles

WPF Combobox Styling


Below is my ComboBox style code. Idea is to put a border around the ComboBox and reuse the style.

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Window1.xaml">
  <Application.Resources>
    <Style x:Key="UserInputComboBoxStyle"
           TargetType="{x:Type ComboBox}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ComboBox}">
            <Grid>
              <Border BorderBrush="Black"
                      BorderThickness="2"
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch" />
              <ComboBox HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        HorizontalContentAlignment="Left"
                        VerticalContentAlignment="Center"
                        Margin="5">
              </ComboBox>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Application.Resources>
</Application>

However after applying this style, in the resultant combobox the combobox items are not getting displayed.

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ComboBoxTest"
        Height="300"
        Width="300">
  <StackPanel>
    <ComboBox Margin="5"
              Style="{StaticResource UserInputComboBoxStyle}">
      <ComboBoxItem Content="Test0"
                    IsSelected="True" />
      <ComboBoxItem Content="Test1" />
      <ComboBoxItem Content="Test2" />
    </ComboBox>
  </StackPanel>
</Window>

Why are the ComboBox Iitems not displayed?


EDIT:

Finally settled for this, still would like to know how this can be done with least number of XAML code.

<Grid>
  <Border BorderBrush="Black"
          BorderThickness="2"
          CornerRadius="5">
    <ComboBox SelectedIndex="0"
              VerticalAlignment="Top"
              HorizontalAlignment="Stretch"
              VerticalContentAlignment="Center"
              HorizontalContentAlignment="Center"
              BorderBrush="Black"
              BorderThickness="5"
              Margin="5">
      <ComboBoxItem IsSelected="True">Test0</ComboBoxItem>
      <ComboBoxItem>Test1</ComboBoxItem>
      <ComboBoxItem>Test2</ComboBoxItem>
      <ComboBoxItem>Test3</ComboBoxItem>
    </ComboBox>
  </Border>
</Grid>

Solution

  • ComboBox has few named parts responsible for styling different parts which means certain parts of template must be named properly in order to be used in correct places. I think you want to style ContentPresenterBorder. Everything has been explained on this MSDN site.

    MSDN example:

    <Setter Property="Template">
       <Setter.Value>
          <ControlTemplate TargetType="ComboBox">
             <Grid>
                <Border x:Name="ContentPresenterBorder">
                   <Grid>
                      <ToggleButton x:Name="DropDownToggle"/>
                      <ContentPresenter x:Name="ContentPresenter">
                         <TextBlock Text=" " />
                      </ContentPresenter>
                   </Grid>
                </Border>
             </Grid>
          </ControlTemplate>
       </Setter.Value>
    </Setter>