XAML 如何在WinUI 3中为DropDownButton添加标题?

kjthegm6  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(84)

在WinUI 3中,TextBoxNumberBox控件支援Header属性,此属性会在控件上方加入文字,以标示输入字段。我希望对DropDownButton控件使用同样的方法,但该控件不支持Header属性。
我尝试通过用StackPanel Package DropDownButton以用TextBlock将其分组来解决此限制,但文本与同一行中其他控件的标题文本不能正确对齐。
有没有一种方法可以在不完全放弃使用Header属性的情况下实现这一点?我知道我可以不对任何控件使用Header属性,而是为每行输入控件使用2行,一行用于文本标签,另一行用于输入控件。那样做似乎是一件粗制滥造的事。
下面是一个示例。在下列使用者控件中,B0 (T)Pulse Sequence标签的TextBlock文字未与相同数据列中其他控件的页首对齐。

<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="The.Fully.Qualified.Class.Name"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="MrAcquisitionParametersGrid" 
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          Style="{ThemeResource BorderedGridStyle}">
        <Grid.Resources>

        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" 
                       Margin="10 10 10 0" 
                       HorizontalAlignment="Left">
                MR Acquisition Parameters
        </TextBlock>

        <StackPanel Grid.Row="1" Grid.Column="0">
            <TextBlock Style="{StaticResource LabelTextStyle}">
                B0 (T)
            </TextBlock>
            <DropDownButton Content="1.5" x:Name="FieldStrength">
                <DropDownButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="1.5"/>
                        <MenuFlyoutItem Text="3.0"/>
                        <MenuFlyoutItem Text="4.7"/>
                        <MenuFlyoutItem Text="7.0"/>
                        <MenuFlyoutItem Text="9.4"/>
                    </MenuFlyout>
                </DropDownButton.Flyout>
            </DropDownButton>
        </StackPanel>
        <NumberBox Grid.Row="1" Grid.Column="1" 
                   Width="90"
                   Header="Flip Angle (°)"
                   x:Name="FlipAngle"/>

        <StackPanel Grid.Row="2" Grid.Column="0">
            <TextBlock Style="{StaticResource LabelTextStyle}">
                Pulse Sequence
            </TextBlock>
            <DropDownButton Content="FLASH" x:Name="PulseSequence">
                <DropDownButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="FLASH"/>
                        <MenuFlyoutItem Text="RARE"/>
                    </MenuFlyout>
                </DropDownButton.Flyout>
            </DropDownButton>
        </StackPanel>
        <NumberBox Grid.Row="2" Grid.Column="1" 
                   Header="Acquisition Interval (s)"
                   x:Name="AcquisitionInterval"/>
        <NumberBox Grid.Row="2" Grid.Column="2" 
                   Header="Echo Time (ms)"
                   x:Name="EchoTime"/>
        <NumberBox Grid.Row="2" Grid.Column="3" 
                   Header="Repetition Time (ms)"
                   x:Name="RepetitionTime"/>
    </Grid>
</UserControl>

字符串


的数据

ws51t4hk

ws51t4hk1#

你可以在Generic.xaml中看到NumberBox es的样式。

<Style TargetType="controls:NumberBox">
    ...
</Style>

字符串
您会发现TextBoxTopHeaderMargin已套用至信头控件。TextBoxTopHeaderMargin也在 * Generic.xaml * 中定义。

<Thickness x:Key="TextBoxTopHeaderMargin">0,0,0,8</Thickness>


所以应该这样做:

<Grid
    Margin="10"
    ColumnDefinitions="Auto,Auto"
    RowDefinitions="Auto,Auto">
    <NumberBox
        Grid.Row="0"
        Grid.Column="0"
        Header="Header" />

    <Grid
        Grid.Row="1"
        Grid.Column="0"
        RowDefinitions="Auto,Auto">
        <TextBlock
            Grid.Row="0"
            Margin="{StaticResource TextBoxTopHeaderMargin}"
            Text="Select an item" />
        <DropDownButton
            Grid.Row="1"
            Content="Items">
            <DropDownButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Item 1" />
                    <MenuFlyoutItem Text="Item 2" />
                    <MenuFlyoutItem Text="Item 3" />
                </MenuFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
    </Grid>

    <NumberBox
        Grid.Row="1"
        Grid.Column="1"
        Header="Header" />
</Grid>

相关问题