WinUI3开发记录(2)设置页面修改
设置页面风格参照WinUI3 Gallery和照片修改。主要使用到RelativePanel和Expander。
默认设置页面
修改后效果
1. 主题设置
在SettingsViewModel.cs中设置主题下拉数据
在SettingsPage.xaml中使用RelativePanel和ComboBox来实现设置条
在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="" 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="" 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>
本文链接:
/archives/1713428118666
版权声明:
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自
KnifeZ!
喜欢就支持一下吧
打赏
微信
支付宝