I'm looking for a way of implementing this kind of separator to the expander component in UWP app:

Any ideas how to do that?

I've managed to create the similar look of the expander, but I don't know how to implement separators?

Also, I would like to learn how to make expanders kind of "push" other components down when I expand them, so they don't overlap with other components, but simply move them.

Here's the XAML code for this expander:

<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>

Any help would be much appreciated!

CodePudding user response：

A separate can for example be implemented using a Border or a Grid:

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

As a side note, you shouldn't use margins to position your elements. Use an appropriate layout Panel. Using a Grid, you should add ColumnDefinitions and RowDefinitions to it as examplified here.