WinUI 3 ComboBox Header 在控件之上

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?

Answer 1

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>