[英]WinUI 3 ComboBox Header is On Top of Control
當我使用 Header 屬性時,header 位於 ComboBox 之上,因此 ComboBox 隱藏在 header 后面,使 ComboBox 無法使用。
<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}"/>
我找到了這個,但是沒有示例說明如何使用資源將 header 移動到 ComboBox 之上(您認為默認情況下會這樣做)。 我還檢查了包含這個 ComboBox 的網格行,header 和 ComboBox 應該有足夠的高度。
我如何重新定位 header,使其在垂直方向上高於 ComboBox 或位於其左側?
正如@Junjie Zhu 在評論中提到的,您可能需要重新安裝最新的WindowsAppSDK 。
如果您需要定位Header
,假設在左側,這是一個示例。
注意:默認樣式來自默認的generic.xaml文件。 (這個答案告訴你如何找到generic.xaml文件。)
主頁.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="" />
</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.