WinUI 3 ComboBox Header is On Top of Control

Question

When I use the Header property, the header rests on over the ComboBox so that the ComboBox is hidden behind the header, making the ComboBox unusable.

            <ComboBox x:Name="DataGridFilter" Header="Filter By" Grid.Row="0" Grid.Column="1"
                      VerticalAlignment="Center" HorizontalAlignment="Stretch"
                      ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}" 
                      SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

I found this, but there is no example of how the resource can be used to move the header to be above the ComboBox (you'd think it did that by default). I also checked the grid row that contains this ComboBox, and there should be plenty of height for both the header and ComboBox.

How can I relocate the header so that it is vertically higher or to the left of the ComboBox?

That's weird. The header should be located at the top side of the ``ComboBox``. Try the code above in a plain WinUI 3 project. Are you sure you are not restyling the ``ComboBox`` somewhere? — Andrew KeepCoding, Feb 02 '23 at 01:16
It is recommended to reinstall the latest [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/downloads). — Junjie Zhu - MSFT, Feb 02 '23 at 02:20

score 1 · Answer 1 · answered Feb 02 '23 at 03:46

As @Junjie Zhu mentions in the comments, you might want to reinstall the latest WindowsAppSDK.

If you need to locate the Header, let's say to the left side, this is an example for it.

Note: The default style comes from the default generic.xaml file. (This answer shows you how to find the generic.xaml file.)

MainPage.xaml

<Page
    x:Class="ComboBoxTests.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:ComboBoxTests"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Page.Resources>
        <Style
            BasedOn="{StaticResource DefaultComboBoxStyle}"
            TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid x:Name="LayoutRoot">
                            <Grid.Resources>
                                ...
                            </Grid.Resources>

                            <Grid.RowDefinitions>
                                <!-- This is for the "Header". We won't need this. But we need to change each Grid.Column and Grid.Row of the controls to move the Header to the left.
                                <RowDefinition Height="Auto" />
                                -->
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="38" />
                            </Grid.ColumnDefinitions>
                            <!--  This ContentPresenter is for the Header.  -->
                            <ContentPresenter
                                x:Name="HeaderContentPresenter"
                                Grid.Row="0"
                                Grid.Column="0"
                                Margin="{ThemeResource ComboBoxTopHeaderMargin}"
                                VerticalAlignment="Top"
                                x:DeferLoadStrategy="Lazy"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                FlowDirection="{TemplateBinding FlowDirection}"
                                FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
                                Foreground="{ThemeResource ComboBoxHeaderForeground}"
                                LineHeight="20"
                                TextWrapping="Wrap"
                                Visibility="Collapsed" />
                            <Border
                                x:Name="HighlightBackground"
                                Grid.Row="0"
                                Grid.Column="1"
                                Grid.ColumnSpan="2"
                                Margin="-4"
                                Background="{ThemeResource ComboBoxBackgroundFocused}"
                                BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushFocused}"
                                BorderThickness="{StaticResource ComboBoxBackgroundBorderThicknessFocused}"
                                CornerRadius="{StaticResource ComboBoxHiglightBorderCornerRadius}"
                                Opacity="0" />
                            <Border
                                x:Name="Background"
                                Grid.Row="0"
                                Grid.Column="1"
                                Grid.ColumnSpan="2"
                                MinWidth="{ThemeResource ComboBoxThemeMinWidth}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Control.IsTemplateFocusTarget="True"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Translation="0,0,1" />
                            <Rectangle
                                x:Name="Pill"
                                Grid.Row="0"
                                Grid.Column="1"
                                Margin="1,0,0,0"
                                Opacity="0"
                                Style="{StaticResource ComboBoxItemPill}">
                                <Rectangle.RenderTransform>
                                    <CompositeTransform
                                        x:Name="PillTransform"
                                        ScaleY="1" />
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Grid.Row="0"
                                Grid.Column="1"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <TextBlock
                                    x:Name="PlaceholderTextBlock"
                                    Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
                                    Text="{TemplateBinding PlaceholderText}" />
                            </ContentPresenter>
                            <TextBox
                                x:Name="EditableText"
                                Grid.Row="0"
                                Grid.Column="1"
                                Grid.ColumnSpan="2"
                                Margin="0,0,0,0"
                                Padding="{ThemeResource ComboBoxEditableTextPadding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                x:Load="False"
                                AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
                                BorderBrush="Transparent"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
                                Header="{TemplateBinding Header}"
                                PlaceholderText="{TemplateBinding PlaceholderText}"
                                Style="{TemplateBinding TextBoxStyle}"
                                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                Visibility="Collapsed" />
                            <Border
                                x:Name="DropDownOverlay"
                                Grid.Row="0"
                                Grid.Column="2"
                                Width="30"
                                Margin="4,4,4,4"
                                HorizontalAlignment="Right"
                                x:Load="False"
                                Background="Transparent"
                                CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
                                Visibility="Collapsed" />
                            <controls:AnimatedIcon
                                x:Name="DropDownGlyph"
                                Grid.Row="0"
                                Grid.Column="2"
                                Width="12"
                                Height="12"
                                MinHeight="{ThemeResource ComboBoxMinHeight}"
                                Margin="0,0,14,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                controls:AnimatedIcon.State="Normal"
                                AutomationProperties.AccessibilityView="Raw"
                                Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
                                IsHitTestVisible="False">
                                <animatedVisuals:AnimatedChevronDownSmallVisualSource xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals" />
                                <controls:AnimatedIcon.FallbackIconSource>
                                    <controls:FontIconSource
                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                        FontSize="12"
                                        Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
                                        Glyph="&#xE0E5;" />
                                </controls:AnimatedIcon.FallbackIconSource>
                            </controls:AnimatedIcon>
                            <ContentPresenter
                                x:Name="DescriptionPresenter"
                                Grid.Row="1"
                                Grid.Column="1"
                                Grid.ColumnSpan="2"
                                x:Load="False"
                                Content="{TemplateBinding Description}"
                                Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
                            <Popup x:Name="Popup">
                                ...
                            </Popup>

                            <VisualStateManager.VisualStateGroups>
                                ...
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid
        ColumnDefinitions="Auto,*"
        RowDefinitions="Auto,*">
        <ComboBox
            Grid.Row="0"
            Grid.Column="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Header="Filter by"
            ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    </Grid>

</Page>

WinUI 3 ComboBox Header is On Top of Control

1 Answers1