WinUI3开发记录（2）设置页面修改

设置页面风格参照WinUI3 Gallery和照片修改。主要使用到RelativePanel和Expander。

默认设置页面

修改后效果

1. 主题设置

1. 在SettingsViewModel.cs中设置主题下拉数据

2. 在SettingsPage.xaml中使用RelativePanel和ComboBox来实现设置条

3. 在SettingsPage.xaml.cs中设置ComboBox选择事件

SettngsViewModel.cs代码如下：

    // 主题列表
    public List<KeyValuePair<string, ElementTheme>> ThemeItems = new();
    // 当前默认主题
    public KeyValuePair<string, ElementTheme> CurrentTheme => ThemeItems.Find(x => x.Value == ElementTheme);
    public SettingsViewModel(IThemeSelectorService themeSelectorService, ILocalSettingsService localSettingsService)
    {
       ......
 
        // 添加主题选项
        ThemeItems.Add(new KeyValuePair<string, ElementTheme>("Settings_Theme_Default".GetLocalized(), ElementTheme.Default));
        ThemeItems.Add(new KeyValuePair<string, ElementTheme>("Settings_Theme_Light".GetLocalized(), ElementTheme.Light));
        ThemeItems.Add(new KeyValuePair<string, ElementTheme>("Settings_Theme_Dark".GetLocalized(), ElementTheme.Dark));
    }

SettingsPage.xaml代码如下，ComboBox通过设置SelectedValuePath和DisplayMemberPath来绑定传递的值和页面展示文本，可以方便的通过ItemsSource接入多语言。

<RelativePanel Margin="{StaticResource SmallTopMargin}" x:Name="ThemeSettingPanel" Background="{ThemeResource CardBackgroundFillColorDefault}">
    <FontIcon x:Name="icon1" Glyph="&#xE790;" FontSize="28" Height="30" Width="30" VerticalAlignment="Center" FontFamily="{StaticResource SymbolThemeFontFamily}" RelativePanel.AlignLeftWithPanel="True"/>
    <StackPanel Padding="10 0" RelativePanel.RightOf="icon1">
        <TextBlock x:Uid="Settings_Theme" RelativePanel.AlignLeftWithPanel="True" Style="{ThemeResource BaseTextBlockStyle}"/>
        <TextBlock x:Uid="Settings_Theme_Description" Style="{ThemeResource CaptionTextBlockStyle}" />
    </StackPanel>
    <ComboBox x:Name="ThemeComboBox" RelativePanel.AlignRightWithPanel="True" Width="120"
                SelectionChanged="ComboBox_SelectionChanged"
                ItemsSource="{x:Bind ViewModel.ThemeItems}"
                SelectedItem="{x:Bind ViewModel.CurrentTheme}"
                SelectedValuePath="Value"
                DisplayMemberPath="Key"/>
</RelativePanel>

SettingsPage.xaml.cs代码如下：

    private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var theme = (KeyValuePair<string, ElementTheme>)e.AddedItems[0];
        ViewModel.SwitchThemeCommand.Execute(theme.Value);
    }

2. 关于软件信息

关于信息比较简单、通过Expander设置Header和Content即可，主要为内部通过StackPanel、RelativePanel等进行布局展示数据。

            <Expander x:Name="ExpanderAbout"  Margin="{StaticResource SmallTopBottomMargin}" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch">
                <Expander.Header>
                    <RelativePanel Padding="0 15">
                        <FontIcon x:Name="icon3" Glyph="&#xE946;" FontSize="28" Height="30" Width="30" VerticalAlignment="Center" FontFamily="{StaticResource SymbolThemeFontFamily}" RelativePanel.AlignLeftWithPanel="True"/>
                        <StackPanel Padding="10 0" RelativePanel.RightOf="icon3">
                            <TextBlock Text="{x:Bind ViewModel.AppDisplayName,Mode=OneWay}" Style="{ThemeResource BaseTextBlockStyle}"/>
                            <TextBlock Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        </StackPanel>
                    </RelativePanel>
                </Expander.Header>
                <Expander.Content>
                    <StackPanel>
                        <TextBlock Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}"/>
                        <TextBlock
                    x:Uid="Settings_AboutDescription"
                    Margin="{StaticResource XSmallTopMargin}" />
                        <HyperlinkButton x:Uid="SettingsPage_PrivacyTermsLink" Margin="{StaticResource SettingsPageHyperlinkButtonMargin}" />
                    </StackPanel>
                </Expander.Content>
            </Expander>