CODEWITHSUNDEEP
wpfcomboboxstyles
Abbas
Abbas

Reputation: 4069

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>

Upvotes: 3

Views: 25965

Answers (1)

dkozl
dkozl

Reputation: 33384

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>

Upvotes: 5

Related Questions