如何为 UWP 应用程序中的 Expander 组件添加分隔符？

Question

我正在寻找一种在 UWP 应用程序中为扩展器组件实现这种分隔符的方法：

知道怎么做吗？

我已经设法创建了与扩展器相似的外观，但我不知道如何实现分隔符？

另外，我想学习如何让扩展器在我扩展它们时将其他组件向下“推”，这样它们就不会与其他组件重叠，而只是简单地移动它们。

这是此扩展器的 XAML 代码：

<muxc:Expander x:Name="FontExpander"
                   x:Uid="FontExpander"
                   Width="1155"
                   IsExpanded="True"
                   Margin="22,323,0,0"
                   VerticalAlignment="Top"
                   Grid.Row="2"
                   Height="380"
                   HorizontalContentAlignment="Left"
                   ExpandDirection="Down">
        <muxc:Expander.Header>

            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <FontIcon Margin="0,0,12,0"
                                  VerticalAlignment="Center"
                                  Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                                  FontSize="16"
                                  Glyph="&#xE8D2;"/>

                <StackPanel Grid.Column="1"
                                    Margin="0,12"
                                    Orientation="Vertical">
                    <TextBlock x:Uid="SettingsFontTitle" Style="{StaticResource BodyTextBlockStyle}"/>
                    <TextBlock x:Uid="SettingsFontDescription"
                                       Style="{StaticResource CaptionTextBlockStyle}"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                       TextWrapping="WrapWholeWords"/>
                </StackPanel>
            </Grid>

        </muxc:Expander.Header>
        <muxc:Expander.Content>

            <Grid  Margin="-18,-170,-17,-170">

                <TextBlock x:Name="SettingsFamily" x:Uid="SettingsFamily" Text="Family" Margin="50,51,1000,286"/>
                <ComboBox x:Name="ComboBoxFamily" ItemsSource="{x:Bind Fonts}" Width="200" Margin="950,41,0,0" SelectionChanged="ComboBoxFamily_SelectionChanged" />


                <TextBlock x:Name="SettingsStyle" x:Uid="SettingsStyle" Text="Style" Margin="50,106,995,218" Loaded="SettingsStyle_Loaded"/>
                <ComboBox  x:Name="ComboBoxStyle" Width="200"  Margin="950,101,0,0">
                    <x:String>Regular</x:String>
                </ComboBox>

                <TextBlock x:Name="SettingsSize" x:Uid="SettingsSize" Text="Size" Margin="50,166,1002,158"/>
                <ComboBox x:Name="ComboBoxSize" ItemsSource="{x:Bind FontSizes}" Width="200" Margin="950,161,0,0"/>


                <TextBlock x:Name="Text" x:Uid="SettingsText" Text="Hello World! I am so excited to be here!" Margin="62,224,38,126" TextWrapping="Wrap" FontSize="{x:Bind (x:Double)ComboBoxSize.SelectedValue, Mode=OneWay}" TextAlignment="Center"/>

            </Grid>
        </muxc:Expander.Content>
    </muxc:Expander>

如有任何帮助，我们将不胜感激！

Answer 1

例如，可以使用 Border 或 Grid 来实现单独的：

<Grid Background="DarkGray" Height="1" />

附带说明一下，您不应使用边距来定位元素。使用适当的布局 Panel. Using a Grid, you should add ColumnDefinitions and RowDefinitions to it as examplified here.

如何为 UWP 应用程序中的 Expander 组件添加分隔符？

How to add a separator to the Expander component in UWP app?

c#

xaml

uwp