How to change the combobox's header position?

Hi @Fry Liu ,

Welcome to Microsoft Q&A!

You can change the default layout of ComboBox by copying and overriding the style code in Generic.xaml.

For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\ <SDK version>\Generic folder from a Windows SDK installation.

Combobox is composed of multiple controls. From the official code, we can see that the Header is located in the first row and first column. (Grid.Row="0" Grid.Column="0").

<ContentPresenter x:Name="HeaderContentPresenter"
                            Grid.Row="0"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"

If you need to put the Header Text on the left of the combobox, you need to add a column, and the columns number of other original elements need add 1, then move the HeaderContentPresenter to (Grid.Row="1" Grid.Column="0"). Here is my test code, hope it helps.

<Grid>
<Grid.Resources>
<!-- Default style for Windows.UI.Xaml.Controls.ComboBox -->
    <Style TargetType="ComboBox">
        <Setter Property="Padding" Value="12,5,0,7" />
        <Setter Property="MaxDropDownHeight" Value="504" />
        <Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
        <Setter Property="Background" Value="{ThemeResource ComboBoxBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThemeThickness}" />
        <Setter Property="TabNavigation" Value="Once" />
        <Setter Property="TextBoxStyle" Value="{StaticResource ComboBoxTextBoxStyle}" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <CarouselPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid x:Name="LayoutRoot">

                        <Grid.Resources>
                            <Storyboard x:Key="OverlayOpeningAnimation">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.383" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="OverlayClosingAnimation">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.216" KeySpline="0.1,0.9 0.2,1.0" Value="0.0" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="PointerOver">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundDisabled}}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HighlightBackground"
                Storyboard.TargetProperty="Opacity"
                To="1"
                Duration="0" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundBorderBrushFocused}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocused}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundFocused}}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocused}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="FocusedPressed">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HighlightBackground"
                Storyboard.TargetProperty="Opacity"
                To="1"
                Duration="0" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocusedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForegroundFocusedPressed}}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                                <VisualState x:Name="FocusedDropDown">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DropDownStates">
                                <VisualState x:Name="Opened">

                                    <Storyboard>
                                        <SplitOpenThemeAnimation OpenedTargetName="PopupBorder"
            ClosedTargetName="ContentPresenter"
            OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
            OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Closed">

                                    <Storyboard>
                                        <SplitCloseThemeAnimation OpenedTargetName="PopupBorder"
            ClosedTargetName="ContentPresenter"
            OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
            OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="EditableModeStates">
                                <VisualState x:Name="TextBoxFocused">
                                    <VisualState.Setters>
                                        <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
                                        <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="TextBoxFocusedOverlayPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
                                        <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxFocusedDropDownBackgroundPointerOver}" />
                                        <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="TextBoxFocusedOverlayPressed">
                                    <VisualState.Setters>
                                        <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
                                        <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxFocusedDropDownBackgroundPointerPressed}" />
                                        <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="TextBoxOverlayPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="TextBoxOverlayPressed">
                                    <VisualState.Setters>
                                        <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPointerPressed}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="TextBoxUnfocused" />

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="32" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
        Grid.Row="1"
        Grid.Column="0"                
        Content="{TemplateBinding Header}"
        ContentTemplate="{TemplateBinding HeaderTemplate}"
        FlowDirection="{TemplateBinding FlowDirection}"
        FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
        Margin="{ThemeResource ComboBoxTopHeaderMargin}"
        TextWrapping="Wrap"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"                   
        Visibility="Collapsed"
        x:DeferLoadStrategy="Lazy" />
                        <Border x:Name="Background"
        Grid.Row="1"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{TemplateBinding CornerRadius}"
        Control.IsTemplateFocusTarget="True"
        MinWidth="{ThemeResource ComboBoxThemeMinWidth}" />
                        <Border x:Name="HighlightBackground"
        Grid.Row="1"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Background="{ThemeResource ComboBoxBackgroundUnfocused}"
        BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushUnfocused}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{TemplateBinding CornerRadius}"
        Opacity="0" />
                        <ContentPresenter x:Name="ContentPresenter"
        Grid.Row="1"
        Grid.Column="1"
        Margin="{TemplateBinding Padding}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <TextBlock x:Name="PlaceholderTextBlock"
          Text="{TemplateBinding PlaceholderText}"
          Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}" />
                        </ContentPresenter>
                        <TextBox x:Name="EditableText"
        Grid.Row="1"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Style="{StaticResource ComboBoxTextBoxStyle}"
        Margin="0,0,0,0"
        Padding="10,3,30,5"
        BorderBrush="Transparent"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        PlaceholderText="{TemplateBinding PlaceholderText}"
        Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
        Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
        Visibility="Collapsed"
        Header="{TemplateBinding Header}"
        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
        x:Load="False"/>
                        <Border x:Name="DropDownOverlay"
        Grid.Row="1"
        Grid.Column="2"
        Background="Transparent"
        Margin="0,2,2,2"
        Visibility="Collapsed"
        Width="30"
        HorizontalAlignment="Right"
        x:Load="False"/>
                        <FontIcon x:Name="DropDownGlyph"
        Grid.Row="1"
        Grid.Column="2"
        IsHitTestVisible="False"
        Margin="0,10,10,10"
        Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
        FontFamily="{ThemeResource SymbolThemeFontFamily}"
        FontSize="12"
        Glyph=""
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        AutomationProperties.AccessibilityView="Raw" />
                        <ContentPresenter x:Name="DescriptionPresenter"
        Grid.Row="2"
        Grid.Column="1"
        Grid.ColumnSpan="2"
        Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
        Content="{TemplateBinding Description}"
        x:Load="False"/>
                        <Popup x:Name="Popup">
                            <Border x:Name="PopupBorder"
          Background="{ThemeResource ComboBoxDropDownBackground}"
          BackgroundSizing="OuterBorderEdge"
          BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
          BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
          Margin="0,-1,0,-1"
          Padding="{ThemeResource ComboBoxDropdownBorderPadding}"
          HorizontalAlignment="Stretch">
                                <ScrollViewer x:Name="ScrollViewer"
            Foreground="{ThemeResource ComboBoxDropDownForeground}"
            MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
            VerticalSnapPointsType="OptionalSingle"
            VerticalSnapPointsAlignment="Near"
            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
            ZoomMode="Disabled"
            AutomationProperties.AccessibilityView="Raw">
                                    <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
                                </ScrollViewer>
                            </Border>
                        </Popup>

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Grid.Resources>

<ComboBox  Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

</Grid>

Thank you

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.