Broken Expander UI

[Valkirie]

Describe the bug Expanders have broken UI with:

• Transparent background.
• Header and Content won't stretch to Expander width.
• Expander arrow is on the wrong side of the expander.

Screenshots

[NotYoojun]

Hi! Sorry to hear that. However, the fact, is that for compatibility reasons, we changed the default expander style to old ones. The new card expander style is now ExpanderCardStyle. For example, in the newer versions, you can use the following code to create an expander with card-like styles:

            <Expander x:Name="Expander_Language" IsExpanded="True" Style="{StaticResource {x:Static ui:ThemeKeys.ExpanderCardStyleKey}}" HorizontalAlignment="Stretch">
                <Expander.Header>
                    <Grid VerticalAlignment="Center" Margin="0,10,-10,10">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>
                        <ui:FontIcon Glyph="{x:Static ui:SegoeIcons.LocaleLanguage}" Grid.RowSpan="2" Margin="5,15,20,15" FontSize="20"/>
                        <TextBlock x:Name="TextBlock_2" Text="Language" Grid.Column="1" VerticalAlignment="Bottom" Margin="0,0,0,2"/>
                        <TextBlock x:Name="TextBlock_3" Text="Set the current UI display language" Grid.Column="1" VerticalAlignment="Top" Grid.Row="1" Margin="0,2,20,5" Opacity="0.615" FontSize="12" TextTrimming="CharacterEllipsis" TextWrapping="WrapWithOverflow"/>

                        <ui:HyperlinkButton x:Name="HyperlinkButton_ChangeSettings_Language" Content="Change value" RaiseHyperlinkClicks="False" Grid.Column="2" HorizontalAlignment="Right" Grid.RowSpan="2" Click="HyperlinkButton_ChangeSettings_Language_Click"/>
                    </Grid>
                </Expander.Header>

                <Grid Margin="5,0,5,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="TextBlock_4" Text="Author" Margin="0,5,0,5"/>
                    <TextBlock x:Name="TextBlock_5" Text="Version" Grid.Row="1" Margin="0,5,0,5"/>

                    <TextBlock x:Name="TextBlock_Language_Author_Value" Text="M_AUTHOR" Margin="0,5,0,5" Grid.Column="1"/>
                    <TextBlock x:Name="TextBlock_Language_Version_Value" Text="M_VERSION" Grid.Row="1" Margin="0,5,0,5" Grid.Column="1"/>

                </Grid>

            </Expander>

However, if you are building something like a settings page, I think it's better to add the following style to your root element resources so that all expander will show as crad-like style:

        <Style TargetType="Expander" BasedOn="{StaticResource {x:Static ui:ThemeKeys.ExpanderCardStyleKey}}">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>

Hope things work out for ya!

[NotYoojun]

Btw, for the navigation view, I think it is better to put the settings and about into the bottom (also the 'footer').

[Valkirie]

Thank you, all fixed :)