电子商务网站建设作用,做黄金的经常看什么网站,开发网站的软件,建筑公司网站关键词有哪些设置模块设计
1.效果图 一.系统设置模块#xff0c;主要有个性化(用于更改主题颜色)#xff0c;系统设置#xff0c;关于更多#xff0c;3个功能点。 个性化的颜色内容样式#xff0c;主要是从 Material Design Themes UI简称md、提供的demo里复制代码过来使用的。 1.设置…设置模块设计
1.效果图 一.系统设置模块主要有个性化(用于更改主题颜色)系统设置关于更多3个功能点。 个性化的颜色内容样式主要是从 Material Design Themes UI简称md、提供的demo里复制代码过来使用的。 1.设置模块里面左侧导航栏个性化、系统设置、关于更多实现该功能点主要用到Prism 框架的导航模块来实现。 整体设置界面布局主要分上下2行第1行是设置字体以及一条横线。第2行放置整个左侧导航栏以及展现对应的动态内容。横线使用 Border 来实现 设置颜色属性 BorderBrush设置粗细属性 BorderThickness第2行根据内容布局重新在Grid 里面创建 2列。例如1列用于放置导航栏左侧菜单2列用于放置当点击导航栏菜单时动态展现的内容区域。 SettingsView.xaml
UserControl x:ClassMyToDo.Views.SettingsViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MyToDo.Viewsmc:Ignorabled xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesxmlns:ihttp://schemas.microsoft.com/xaml/behaviorsxmlns:prismhttp://prismlibrary.com/xmlns:extclr-namespace:MyToDo.Extensionsd:DesignHeight450 d:DesignWidth800GridGrid.RowDefinitionsRowDefinition Heightauto/RowDefinition //Grid.RowDefinitionsTextBlock Text设置 FontSize26 Margin20,10/Border BorderBrush#DDDDDD BorderThickness0,0,0,0.3/Grid Grid.Row1 Margin50Grid.ColumnDefinitionsColumnDefinition Width220/ColumnDefinition //Grid.ColumnDefinitions!--左侧菜单栏--ListBox x:NamemenuBar ItemContainerStyle{StaticResource MyListBoxItemStyle} ItemsSource{Binding MenuBars}i:Interaction.Triggersi:EventTrigger EventNameSelectionChangedi:InvokeCommandAction Command{Binding NavigateCommand} CommandParameter{Binding ElementNamemenuBar,PathSelectedItem} //i:EventTrigger/i:Interaction.TriggersListBox.ItemTemplateDataTemplateStackPanel OrientationHorizontal BackgroundTransparentmaterialDesign:PackIcon Kind{Binding Icon} Margin15,0 /TextBlock Text{Binding Title} Margin10,0//StackPanel/DataTemplate/ListBox.ItemTemplate/ListBox!--右侧菜单栏内容区域动态区域。根据导航栏切换不同的页面--ScrollViewer Grid.Column1ContentControl Margin10,0 prism:RegionManager.RegionName{x:Static ext:PrismManager.SettingsViewRegionName}//ScrollViewer/Grid/Grid
/UserControlMyListBoxItemStyle 是App.xaml 里定义的一个静态资源文件。 App.xaml 文件源码在第3章节 PrismManager 导航区域名称管理扩展类添加设置页区域动态展示内容区域一个名称。 public static class PrismManager{/// summary/// 首页区域/// /summarypublic static readonly string MainViewRegionName MainViewReion;/// summary/// 设置页区域/// /summarypublic static readonly string SettingsViewRegionName SettingsViewRegionName;} 左侧导航菜单栏对应后端逻辑代码 实现
SettingsViewModel.cs
public class SettingsViewModel: BindableBase
{public SettingsViewModel(IRegionManager regionManager){MenuBarsnew ObservableCollectionMenuBar();NavigateCommand new DelegateCommandMenuBar(Navigate);this.regionManager regionManager;CreateMenuBar();}/// summary/// 导航命令/// /summarypublic DelegateCommandMenuBar NavigateCommand { get; private set; }private ObservableCollectionMenuBar menuBars;private readonly IRegionManager regionManager;/// summary/// 导航日志/// /summaryprivate IRegionNavigationJournal journal;public ObservableCollectionMenuBar MenuBars{get { return menuBars; }set { menuBars value; RaisePropertyChanged(); }}void CreateMenuBar(){MenuBars.Add(new MenuBar() { Icon Bowling, Title 个性化, NameSpace SkinView });MenuBars.Add(new MenuBar() { Icon CogOutline, Title 系统设置, NameSpace });MenuBars.Add(new MenuBar() { Icon InformationOutline, Title 关于更多, NameSpace AboutView });}/// summary/// 导航方法/// /summary/// param namebar菜单/paramprivate void Navigate(MenuBar bar){//命名空间为空不进行导航if (bar null || string.IsNullOrEmpty(bar.NameSpace)) return;regionManager.Regions[PrismManager.SettingsViewRegionName].RequestNavigate(bar.NameSpace);}
}
完成以上步骤后就能显示左侧菜单导航栏了。 2.左侧菜单点击时右侧区域需动态展示对应的内容 当点击对应的导航菜单例如个性化或系统设置或关于更多时右侧需要根据不同的导航菜单动态展现不同的内容。需要创建右侧内容区域对应的视图(V)-业务逻辑(VM)-实体类(M)俗称MVVM 模式。 以个性化 SkinView为例只需要创建SkinView.xaml 和 SkinViewModel。 创建完毕后需要在 App.xaml.cs 中进行模块注入。 containerRegistry.RegisterForNavigationSkinView, SkinViewModel(); 二.个性化SkinView页面功能实现 个性化内容页面分上下2行只需要创建一个2行即可。 添加命名空间 xmlns:materialDesignColorsclr-namespace:MaterialDesignColors;assemblyMaterialDesignColorsUserControl.Resources 表示当前用户控件的资源文件当前窗口的资源文件RelativeSource{RelativeSource AncestorTypelocal:SkinView} 表示的是查找绑定需要绑定到当前的SkinView添加颜色转换器转换器命名空间 xmlns:convertersclr-namespace:MyToDo.Common.Converters SkinView.xaml
UserControl x:ClassMyToDo.Views.SkinViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MyToDo.Viewsxmlns:materialDesignColorsclr-namespace:MaterialDesignColors;assemblyMaterialDesignColorsxmlns:convertersclr-namespace:MyToDo.Common.Convertersmc:Ignorabled d:DesignHeight450 d:DesignWidth800!--当前窗口的资源文件--UserControl.Resourcesconverters:ColorToBrushConverter x:KeyColorToBrushConverter /DataTemplate x:KeySwatchColorTemplate DataType{x:Type Color}Button Width40Height40 BorderThickness0 Margin1Background{Binding Converter{StaticResource ColorToBrushConverter}}Command{Binding DataContext.ChangeHueCommand, RelativeSource{RelativeSource AncestorTypelocal:SkinView}}CommandParameter{Binding}/Button/DataTemplate/UserControl.ResourcesGridGrid.RowDefinitionsRowDefinition Heightauto /RowDefinition //Grid.RowDefinitionsStackPanel OrientationHorizontal Margin0,10TextBlock Text浅色/ToggleButton Margin8 0 16 0 IsChecked{Binding IsDarkTheme}/TextBlock Text深色//StackPanelItemsControl Grid.Row1 ItemsSource{Binding Swatches}ItemsControl.ItemTemplateDataTemplate DataType{x:Type materialDesignColors:ISwatch}StackPanel OrientationHorizontalTextBlock Width80VerticalAlignmentCenterText{Binding Name, ModeOneTime} /ItemsControl ItemTemplate{StaticResource SwatchColorTemplate} ItemsSource{Binding Hues, ModeOneTime}ItemsControl.ItemsPanelItemsPanelTemplateVirtualizingStackPanel OrientationHorizontal //ItemsPanelTemplate/ItemsControl.ItemsPanel/ItemsControl/StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid
/UserControlSkinViewModel.cs
public class SkinViewModel: BindableBase
{public SkinViewModel(){ChangeHueCommand new DelegateCommandobject(ChangeHue);}private bool _isDarkThemetrue;public bool IsDarkTheme {get _isDarkTheme;set{if(SetProperty(ref _isDarkTheme, value)){ModifyTheme(theme theme.SetBaseTheme(value ? Theme.Dark : Theme.Light));}}}public IEnumerableISwatch Swatches { get; } SwatchHelper.Swatches;public DelegateCommandobject ChangeHueCommand { get; private set; }private readonly PaletteHelper paletteHelper new PaletteHelper();private void ChangeHue(object? obj){var hue (Color)obj!;Theme theme (Theme)paletteHelper.GetTheme();theme.PrimaryLight new ColorPair(hue.Lighten());theme.PrimaryMid new ColorPair(hue);theme.PrimaryDark new ColorPair(hue.Darken());paletteHelper.SetTheme(theme);}private static void ModifyTheme(ActionTheme modificationAction){PaletteHelper paletteHelper new PaletteHelper();Theme theme (Theme)paletteHelper.GetTheme();modificationAction?.Invoke(theme);paletteHelper.SetTheme(theme);}
} ColorToBrushConverter.cs 颜色转换器 [ValueConversion(typeof(Color), typeof(Brush))]public class ColorToBrushConverter : IValueConverter{public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture){if (value is Color color){SolidColorBrush rv new(color);rv.Freeze();return rv;}return Binding.DoNothing;}public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture){if (value is SolidColorBrush brush){return brush.Color;}return default(Color);}} 三.系统设置页以及关于更多页 系统设置页是空可根据需求开发关于更多页也就是一些简介 例如关于更多页设计。第一步添加一个 用户控件并且名称为AboutView.xaml。第二步对用户控件进行注入。然后写功能。。。 注个性化页面代码均从Md框架中搬运过来的
