How to center align combobox selected item in WPF

4
votes

I want combobox selected item alone center aligned while the drop down contents to be left aligned.

To achieve this I made an entire copy of the default combobox and modified the Content Presenter of Toggle button horizontal alignment to Center

Is there any simple approach to achieve this than to edit the entire template

4
c#wpfxamlcombobox
In short, no there is no simple way of doing this other than changing the control template. @XAML Lover's answer works for changing the alignment of the selected item in the drop down (the popup), but will not affect the alignment of the item displayed in the toggle button. – Steven Rands
Thanks, I used control template only – keerthee

4 Answers

2
votes

A simple approach that worked for me :

<Style TargetType="ComboBox">
    <Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
0
votes

You just need a trigger associated to the style of ComboBoxItem.

    <Style TargetType="ComboBoxItem">
        <Style.Triggers>
            <Trigger Property="IsSelected"
                     Value="True">
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Trigger>
        </Style.Triggers>
    </Style>
0
votes

Assigning the HorizontalAlignment = "Center" in the ContentPresenter in ControlTemplate of the ComboBox

<ControlTemplate x:Key="ComboBoxControlTemplate1" TargetType="{x:Type ComboBox}">
        <Grid x:Name="MainGrid" SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
            </Grid.ColumnDefinitions>                
           <Popup ...... />
           <ToggleButton ...../>
           <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="Center" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
</ControlTemplate>
0
votes

I figured out a way to do this without having to re-template the ComboBox:

<ComboBox HorizontalContentAlignment="Center">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="ComboBoxItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Visibility, RelativeSource={RelativeSource AncestorType=ComboBox}}" Value="Visible">
                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

<ComboBox HorizontalContentAlignment="Center"> will set all items to be centered by default- the ones in the drop down list, and the one that's in the selection box.

The DataTrigger in the ComboBoxItem style looks for a ComboBox parent somewhere in the visual tree. Since the drop down list is inside a Popup, which is not part of the main visual tree, this DataTrigger will always fail for non-selected items. The selected item is shown inside the ComboBox as part of the main visual tree, so the DataTrigger for that one item succeeds, and that one item gets aligned Left.

The Visibility part is somewhat arbitrary. I needed some property that I could predict the value of, so the DataTrigger would always activate if the Combobox source was found. In this case, Visibility won't necessarily always be Visible, but when it isn't, you can't see the alignment anyway, so it doesn't matter.