wordpress array,网站建设 seo模块,做二手平台公益的网站,wordpress json 登陆这里是借助三方UI框架实现了#xff0c;感兴趣的小伙伴可以看一下。 深色模式#xff1a; 浅色模式#xff1a; 这里主要使用了以下三个包#xff1a;
MahApps.Metro#xff1a;UI库#xff0c;提供菜单导航和其它控件
实现步骤#xff1a;1、使用B…这里是借助三方UI框架实现了感兴趣的小伙伴可以看一下。 深色模式 浅色模式 这里主要使用了以下三个包
MahApps.MetroUI库提供菜单导航和其它控件
实现步骤1、使用BlurWindow放置一个窗口 1 tianxia:BlurWindow x:ClassGameOptimizerTool.MainWindow2 xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation3 xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml4 xmlns:dhttp://schemas.microsoft.com/expression/blend/20085 xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/20069 xmlns:tianxiaclr-namespace:TianXiaTech
10 mc:Ignorabled
11 Title工具箱 Height650 Width1100 TitleForeground{DynamicResource MahApps.Brushes.Text} Iconlogo.png Background{DynamicResource MahApps.Brushes.ThemeBackground}
12 Grid
13 /Grid
14 /tianxia:BlurWindow 这里的一些颜色使用了动态资源 以便实现深色和浅色模式的切换。 2、引入 XAML命名空间前缀
1 xmlns:mahhttp://metro.mahapps.com/winfx/xaml/controls
2 xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themes
3 xmlns:iconPackshttp://metro.mahapps.com/winfx/xaml/iconpacks 3、放置HamburgerMenu控件
通过设置HamburgerMenu.ItemsSource属性可以设置菜单项
通过设置HamburgerMenu.OptionsItemsSource属性可以增加设置项设置项会显示在左下角 注意这里我们需要设置控件的控件模板否则 会显示异常 1 mah:HamburgerMenu x:NameHamburgerMenuControl2 CompactPaneLength483 OpenPaneLength704 HamburgerWidth485 IsPaneOpenTrue6 ItemInvokedHamburgerMenuControl_OnItemInvoked7 ItemTemplate{StaticResource MenuItemTemplate}8 OptionsItemTemplate{StaticResource MenuItemTemplate}9 SelectedIndex0
10 Style{StaticResource MahApps.Styles.HamburgerMenu.Ripple}
11 VerticalScrollBarOnLeftSideFalse
12 !--Items--
13 mah:HamburgerMenu.ItemsSource
14 mah:HamburgerMenuItemCollection
15 mah:HamburgerMenuIconItem Icon{iconPacks:Material KindHome} Label首页
16 mah:HamburgerMenuIconItem.Tag
17 local:HomeView /
18 /mah:HamburgerMenuIconItem.Tag
19 /mah:HamburgerMenuItemCollection
20 /mah:HamburgerMenu.ItemsSource
21
22 !--设置--
23 mah:HamburgerMenu.OptionsItemsSource
24 mah:HamburgerMenuItemCollection
25 mah:HamburgerMenuIconItem Icon{iconPacks:Material KindCog} Label设置
26 mah:HamburgerMenuIconItem.Tag
27 local:OptimizerView /
28 /mah:HamburgerMenuIconItem.Tag
29 /mah:HamburgerMenuIconItem
30 /mah:HamburgerMenuItemCollection
31 /mah:HamburgerMenu.OptionsItemsSource
32
33 mah:HamburgerMenu.ContentTemplate
34 DataTemplate DataType{x:Type mah:HamburgerMenuIconItem}
35 Grid Margin20 0 10 0
36 Grid.RowDefinitions
37 RowDefinition HeightAuto /
38 RowDefinition Height* /
39 /Grid.RowDefinitions
40 !--标题文本如果需要大标题显示取消注释这段代码--
41 TextBlock Grid.Row0
42 Margin0 15 0 5
43 Padding0
44 FontFamily{DynamicResource MahApps.Fonts.Family.Header}
45 FontSize{DynamicResource MahApps.Font.Size.Header}
46 Foreground{DynamicResource MahApps.Brushes.Text}
47 Text{Binding Label} /
48 ScrollViewer Grid.Row1
49 FocusableFalse
50 HorizontalScrollBarVisibilityDisabled
51 VerticalScrollBarVisibilityAuto
52 ContentControl Content{Binding Tag} FocusableFalse /
53 /ScrollViewer
54 /Grid
55 /DataTemplate
56 /mah:HamburgerMenu.ContentTemplate
57
58 /mah:HamburgerMenu 4、设置HamburgerMenu控件菜单项的样式
我们直接放到窗口资源 里 1 tianxia:BlurWindow.Resources2 ResourceDictionary3 !--左侧菜单的样式--4 DataTemplate x:KeyMenuItemTemplate DataType{x:Type mah:HamburgerMenuIconItem}5 Grid Height406 Grid.ColumnDefinitions7 ColumnDefinition Width{Binding RelativeSource{RelativeSource AncestorType{x:Type mah:HamburgerMenu}}, PathCompactPaneLength} /8 ColumnDefinition /9 /Grid.ColumnDefinitions10 ContentControl Grid.Column011 HorizontalAlignmentCenter12 VerticalAlignmentCenter13 Content{Binding Icon}14 FocusableFalse15 IsTabStopFalse /16 TextBlock Grid.Column117 VerticalAlignmentCenter18 FontSize1319 Text{Binding Label} /20 /Grid21 /DataTemplate22 23 ObjectDataProvider x:KeyDisplayModeEnumValues24 MethodNameGetValues25 ObjectType{x:Type mah:SplitViewDisplayMode}26 ObjectDataProvider.MethodParameters27 x:Type TypeNamemah:SplitViewDisplayMode /28 /ObjectDataProvider.MethodParameters29 /ObjectDataProvider30 31 ObjectDataProvider x:KeyVisibilityEnumValues32 MethodNameGetValues33 ObjectType{x:Type Visibility}34 ObjectDataProvider.MethodParameters35 x:Type TypeNameVisibility /36 /ObjectDataProvider.MethodParameters37 /ObjectDataProvider38 39 Style x:KeyMahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple40 BasedOn{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem}41 TargetType{x:Type ListBoxItem}42 Setter PropertyTemplate43 Setter.Value44 ControlTemplate TargetType{x:Type ListBoxItem}45 Grid x:NameRootGrid46 BackgroundTransparent47 RenderOptions.ClearTypeHint{TemplateBinding RenderOptions.ClearTypeHint}48 Border x:NameBorder49 Background{TemplateBinding Background}50 BorderBrush{TemplateBinding BorderBrush}51 BorderThickness{TemplateBinding BorderThickness}52 SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} /53 Grid Margin{TemplateBinding BorderThickness}54 Grid HorizontalAlignmentLeft55 VerticalAlignmentCenter56 Visibility{Binding RelativeSource{RelativeSource FindAncestor, AncestorType{x:Type mah:HamburgerMenu}}, PathShowSelectionIndicator, ModeOneWay, Converter{StaticResource BooleanToVisibilityConverter}}57 Rectangle x:NameSelectionIndicator58 Width{DynamicResource HamburgerMenuSelectionIndicatorThemeWidth}59 Height{DynamicResource HamburgerMenuSelectionIndicatorThemeHeight}60 Fill{TemplateBinding Foreground}61 FocusableFalse62 Opacity0.0 /63 /Grid64 materialDesign:Ripple x:NameContentPresenter65 Padding{TemplateBinding Padding}66 HorizontalContentAlignment{TemplateBinding HorizontalContentAlignment}67 VerticalContentAlignment{TemplateBinding VerticalContentAlignment}68 Content{TemplateBinding Content}69 ContentTemplate{TemplateBinding ContentTemplate}70 ContentTemplateSelector{TemplateBinding ContentTemplateSelector}71 Feedback{DynamicResource MahApps.Brushes.Gray.MouseOver}72 FocusableFalse73 SnapsToDevicePixels{TemplateBinding SnapsToDevicePixels} /74 /Grid75 /Grid76 ControlTemplate.Triggers77 Trigger PropertyIsSelected ValueTrue78 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.SelectedBackgroundBrush), ModeOneWay} /79 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.SelectedForegroundBrush), ModeOneWay} /80 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.SelectedForegroundBrush), ModeOneWay} /81 Setter TargetNameSelectionIndicator PropertyOpacity Value1.0 /82 /Trigger83 MultiTrigger84 MultiTrigger.Conditions85 Condition PropertyIsSelected ValueTrue /86 Condition PropertySelector.IsSelectionActive ValueTrue /87 /MultiTrigger.Conditions88 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.ActiveSelectionBackgroundBrush), ModeOneWay} /89 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.ActiveSelectionForegroundBrush), ModeOneWay} /90 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.ActiveSelectionForegroundBrush), ModeOneWay} /91 /MultiTrigger92 93 MultiTrigger94 MultiTrigger.Conditions95 Condition PropertyIsMouseOver ValueTrue /96 Condition PropertyIsSelected ValueTrue /97 /MultiTrigger.Conditions98 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverSelectedBackgroundBrush), ModeOneWay} /99 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverSelectedForegroundBrush), ModeOneWay} /
100 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverSelectedForegroundBrush), ModeOneWay} /
101 /MultiTrigger
102 MultiTrigger
103 MultiTrigger.Conditions
104 Condition PropertyIsMouseOver ValueTrue /
105 Condition PropertyIsSelected ValueFalse /
106 /MultiTrigger.Conditions
107 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverBackgroundBrush), ModeOneWay} /
108 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverForegroundBrush), ModeOneWay} /
109 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.HoverForegroundBrush), ModeOneWay} /
110 /MultiTrigger
111
112 Trigger Propertymah:ItemHelper.IsMouseLeftButtonPressed ValueTrue
113 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseLeftButtonPressedBackgroundBrush), ModeOneWay} /
114 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseLeftButtonPressedForegroundBrush), ModeOneWay} /
115 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseLeftButtonPressedForegroundBrush), ModeOneWay} /
116 /Trigger
117 Trigger Propertymah:ItemHelper.IsMouseRightButtonPressed ValueTrue
118 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseRightButtonPressedBackgroundBrush), ModeOneWay} /
119 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseRightButtonPressedForegroundBrush), ModeOneWay} /
120 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.MouseRightButtonPressedForegroundBrush), ModeOneWay} /
121 /Trigger
122
123 Trigger PropertyIsEnabled ValueFalse
124 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledBackgroundBrush), ModeOneWay} /
125 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledForegroundBrush), ModeOneWay} /
126 Setter TargetNameRootGrid PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, PathBackground, ModeOneWay} /
127 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledForegroundBrush), ModeOneWay} /
128 /Trigger
129 MultiTrigger
130 MultiTrigger.Conditions
131 Condition PropertyIsEnabled ValueFalse /
132 Condition PropertyIsSelected ValueTrue /
133 /MultiTrigger.Conditions
134 Setter TargetNameBorder PropertyBackground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledSelectedBackgroundBrush), ModeOneWay} /
135 Setter TargetNameContentPresenter PropertyForeground Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledSelectedForegroundBrush), ModeOneWay} /
136 Setter TargetNameSelectionIndicator PropertyFill Value{Binding RelativeSource{RelativeSource TemplatedParent}, Path(mah:ItemHelper.DisabledSelectedForegroundBrush), ModeOneWay} /
137 /MultiTrigger
138 /ControlTemplate.Triggers
139 /ControlTemplate
140 /Setter.Value
141 /Setter
142 Setter Propertymah:ItemHelper.ActiveSelectionBackgroundBrush ValueTransparent /
143 Setter Propertymah:ItemHelper.ActiveSelectionForegroundBrush Value{DynamicResource MahApps.Brushes.AccentBase} /
144 Setter Propertymah:ItemHelper.DisabledForegroundBrush Value{DynamicResource MahApps.Brushes.Gray} /
145 Setter Propertymah:ItemHelper.DisabledSelectedBackgroundBrush ValueTransparent /
146 Setter Propertymah:ItemHelper.DisabledSelectedForegroundBrush Value{DynamicResource MahApps.Brushes.Gray} /
147 Setter Propertymah:ItemHelper.HoverBackgroundBrush Value{DynamicResource MahApps.Brushes.Gray.SemiTransparent} /
148 Setter Propertymah:ItemHelper.HoverSelectedBackgroundBrush Value{DynamicResource MahApps.Brushes.Gray.SemiTransparent} /
149 Setter Propertymah:ItemHelper.HoverSelectedForegroundBrush Value{DynamicResource MahApps.Brushes.AccentBase} /
150 Setter Propertymah:ItemHelper.SelectedBackgroundBrush ValueTransparent /
151 Setter Propertymah:ItemHelper.SelectedForegroundBrush Value{DynamicResource MahApps.Brushes.AccentBase} /
152 /Style
153
154 Style x:KeyMahApps.Styles.HamburgerMenu.Ripple
155 BasedOn{StaticResource MahApps.Styles.HamburgerMenu}
156 TargetType{x:Type mah:HamburgerMenu}
157 Setter PropertyItemContainerStyle Value{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple} /
158 Setter PropertyOptionsItemContainerStyle Value{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple} /
159 Setter PropertyPaneBackground Value{DynamicResource MahApps.Brushes.ThemeBackground} /
160 Setter PropertyPaneForeground Value{DynamicResource MahApps.Brushes.Text} /
161 Setter PropertyShowSelectionIndicator ValueTrue /
162 /Style
163
164 /ResourceDictionary
165 /tianxia:BlurWindow.Resources 5、增加菜单项切换时的事件处理程序
在放置HamburgerMenu控件时设置了ItemInvoked事件
1 ItemInvokedHamburgerMenuControl_OnItemInvoked 事件处理程序如下
1 private void HamburgerMenuControl_OnItemInvoked(object sender, MahApps.Metro.Controls.HamburgerMenuItemInvokedEventArgs args)
2 {
3 HamburgerMenuControl.Content args.InvokedItem;
4 } 6、切换深色模式
MahApps.Metro提供了模式切换的功能直接调用以下代码即可
1 private void Window_Loaded(object sender, RoutedEventArgs e)
2 {
3 ThemeManager.Current.ChangeThemeBaseColor(Application.Current, Dark);
4 } HamburgerMenu控件是如何实现的
这里内部其实是使用的ListBoxListBox自身已经具备了切换事件和选中事件所以在ListBox的基础上加以封装就能实现HamburgerMenu。
这里不做详细介绍可以参考MahApps.Metro源码里的Themes\HamburgerMenuTemplate.xaml和Controls\HamburgerMenu里的文件。
项目地址GitHub - MahApps/MahApps.Metro: A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort. 最终效果 示例代码
