江苏营销型网站推广,网站跳出率是什么意思,西安企业建站价格,长春专业网站建设模板1. Panuon环境配置 1.1. 通过Nuget 安装 Panuon.WPF.UI1.2. xaml引用命名空间1.3. using Panuon.WPF.UI; 2. VS2019 view 2.1. 设置窗体尺寸和title2.2. 添加静态资源 2.2.1. 什么是静态资源 2.3. 主Grid 2.3.1. 盒子模型2.3.2. 嵌套布局 3. 总结
1. Panuon环境配置
1.1. 通…1. Panuon环境配置 1.1. 通过Nuget 安装 Panuon.WPF.UI1.2. xaml引用命名空间1.3. using Panuon.WPF.UI; 2. VS2019 view 2.1. 设置窗体尺寸和title2.2. 添加静态资源 2.2.1. 什么是静态资源 2.3. 主Grid 2.3.1. 盒子模型2.3.2. 嵌套布局 3. 总结
1. Panuon环境配置
1.1. 通过Nuget 安装 Panuon.WPF.UI
现在最新的是1.2.4.9点击安装即可 1.2. xaml引用命名空间
修改MainWindow.xaml,引用命名空间xmlns:puclr-namespace:Panuon.WPF.UI;assemblyPanuon.WPF.UI
然后把Window标签改为pu:WindowX 1.3. using Panuon.WPF.UI;
在MainWindow.cs中引用命名空间using Panuon.WPF.UI;
同样需要把基类Window 改为 WindowX, 这样窗体变成了Panuon 窗体了很简单。
2. VS2019 view
下面我们用panuon开发一个高仿VS2019启动界面最终成品如下 2.1. 设置窗体尺寸和title
新建WPF工程按第1节配置panuon环境然后在pu:WindowX继续添加属性
TitleVisual Studio (SIM)
Height630
Width1058
MinHeight630
MinWidth1058
Background#252526
BorderBrush#3E3E45
BorderThickness1
Foreground#F1F1F12.2. 添加静态资源
2.2.1. 什么是静态资源
资源可以分为静态资源或动态资源进行引用。
分别是通过使用 StaticResource 标记扩展或 DynamicResource 标记扩展完成的。
StaticResource的用法
通过替换已定义资源的值x:Key来为 XAML 属性提供值。
这里添加静态资源就是可以对单个控件的样式单独控制定制化。为后面的控件样式所用。 pu:WindowX.ResourcesStyle x:KeySearchComboBoxStyleTargetTypeComboBoxBasedOn{StaticResource {x:Type ComboBox}}Setter Propertypu:ComboBoxHelper.HoverBorderBrushValue#007ACC /Setter Propertypu:ComboBoxHelper.FocusedBorderBrushValue#007ACC /Setter PropertyHeightValue35 /Setter PropertyWidthValue320 /Setter PropertyBackgroundValue#333337 /Setter PropertyBorderBrushValue#3F3F46 /Setter PropertyForegroundValue#F1F1F1 //StyleStyle x:KeyCardButtonStyleTargetTypeButtonBasedOn{StaticResource {x:Type Button}}Setter Propertypu:IconHelper.FontFamilyValue{StaticResource PanuonIconFont} /Setter Propertypu:IconHelper.FontSizeValue30 /Setter Propertypu:IconHelper.VerticalAlignmentValueTop /Setter Propertypu:IconHelper.MarginValue7,2,17,0 /Setter Propertypu:ButtonHelper.HoverBackgroundValue#3F3F40 /Setter Propertypu:ButtonHelper.ClickBackgroundValue{x:Null} /Setter PropertyForegroundValue#F1F1F1 /Setter PropertyBackgroundValue#333337 /Setter PropertyPaddingValue10,7,10,10 /Setter PropertyHeightValue75 /Setter PropertyVerticalContentAlignmentValueStretch /Setter PropertyHorizontalContentAlignmentValueStretch //StyleStyle x:KeyLinkButtonStyleTargetTypeButtonBasedOn{StaticResource {x:Type Button}}Setter Propertypu:IconHelper.FontFamilyValue{StaticResource PanuonIconFont} /Setter Propertypu:ButtonHelper.HoverBackgroundValue{x:Null} /Setter Propertypu:ButtonHelper.ClickBackgroundValue{x:Null} /Setter PropertyForegroundValue#0097FB /Setter PropertyBackgroundValue{x:Null} /Setter PropertyCursorValueHand /Setter PropertyVerticalContentAlignmentValueStretch /Setter PropertyHorizontalContentAlignmentValueStretch /Style.TriggersTrigger PropertyIsMouseOverValueTrueSetter PropertyContentTemplateSetter.ValueDataTemplateTextBlock Text{Binding} TextDecorationsUnderline//DataTemplate/Setter.Value/Setter/Trigger/Style.Triggers/StyleStyle x:KeyProjectListBoxStyleTargetTypeListBoxBasedOn{StaticResource {x:Type ListBox}}Setter Propertypu:IconHelper.FontFamilyValue{StaticResource PanuonIconFont} /Setter Propertypu:IconHelper.WidthValue25 /Setter Propertypu:IconHelper.HeightValue25 /Setter Propertypu:IconHelper.VerticalAlignmentValueTop /Setter Propertypu:IconHelper.MarginValue0,-15,7,0 /Setter Propertypu:ListBoxHelper.ItemsHeightValue65 /Setter Propertypu:ListBoxHelper.ItemsPaddingValue10,0,10,0 /Setter Propertypu:ListBoxHelper.ItemsHoverBackgroundValue#3F3F40 /Setter Propertypu:ListBoxHelper.ItemsSelectedBackgroundValue{x:Null} /Setter PropertyForegroundValue#F1F1F1 /Setter PropertyBackgroundValueTransparent /Setter PropertyBorderThicknessValue0 /Setter PropertyVerticalContentAlignmentValueCenter /Setter PropertyHorizontalContentAlignmentValueStretch //Style/pu:WindowX.Resources
2.3. 主Grid
2.3.1. 盒子模型
主Grid里面的布局需要手写手写需要有一定布局的基础。如果不是很清楚需要先了解下盒子模型。
盒子模型最开始是应用于网页布局将页面中所有元素都看作是一个盒子盒子都包含以下几个属性
width 宽度
height 高度
border 边框——围绕在内边距和内容外的边框
padding 内边距——清除内容周围的区域内边距是透明的
margin 外边距——清除边框外的区域外边距是透明的
content 内容——盒子的内容显示文本和图像 2.3.2. 嵌套布局 用xaml写布局当层级嵌套比较深比较复杂的时候自己都会很晕这里有个小技巧我经常用就是给背景/边框标红这样能直观看到当前的嵌套到哪里了。等找到自己的定位后在把红色标记去掉。
Grid Margin55,0,65,35 BackgroundRed
完整的Grid布局代码 Grid Margin55,0,65,35Grid.RowDefinitionsRowDefinition HeightAuto/RowDefinition //Grid.RowDefinitionsTextBlock TextVisual Studio 2019 (SIM)FontSize33/Grid Grid.Row1Grid.ColumnDefinitionsColumnDefinition /ColumnDefinition Width30/ColumnDefinition Width0.6* //Grid.ColumnDefinitionsGrid.RowDefinitionsRowDefinition HeightAuto/RowDefinition //Grid.RowDefinitionsTextBlock Margin0,30,0,0TextOpen recentFontSize20 /Grid Grid.Row1Grid.RowDefinitionsRowDefinition HeightAuto /RowDefinition //Grid.RowDefinitionsComboBox Margin0,15,0,0HorizontalAlignmentLeftIsEditableTrueStyle{StaticResource SearchComboBoxStyle}pu:ComboBoxHelper.WatermarkSearch recent /ListBox Grid.Row1Margin0,15,0,0Style{StaticResource ProjectListBoxStyle}ListBoxItem pu:ListBoxItemHelper.Icon/Samples;component/Resources/WebForms.pngGridGrid.RowDefinitionsRowDefinition HeightAuto/RowDefinition HeightAuto//Grid.RowDefinitionsTextBlock FontSize14FontWeightBoldTextProjectA.sln /TextBlock VerticalAlignmentCenterHorizontalAlignmentRightForeground#C6C8D2Text2021/4/12 12:00 /TextBlock Grid.Row1Margin0,8,0,0TextD:\ProjectATextTrimmingCharacterEllipsisForeground#C6C8D2 //Grid/ListBoxItemListBoxItem pu:ListBoxItemHelper.Icon/Samples;component/Resources/WebForms.pngGridGrid.RowDefinitionsRowDefinition HeightAuto /RowDefinition HeightAuto //Grid.RowDefinitionsTextBlock FontSize14FontWeightBoldTextProjectB.sln /TextBlock VerticalAlignmentCenterHorizontalAlignmentRightForeground#C6C8D2Text2021/4/12 12:00 /TextBlock Grid.Row1Margin0,8,0,0TextD:\ProjectBTextTrimmingCharacterEllipsisForeground#C6C8D2 //Grid/ListBoxItem/ListBox/GridTextBlock Grid.Column2Margin0,30,0,0TextGet startedFontSize20 /StackPanel Grid.Column2Grid.Row1Margin0,15,0,0Button Style{StaticResource CardButtonStyle}pu:ButtonHelper.Icon#xe941;StackPanelTextBlock FontSize18TextConnect to a codespace/TextBlock Margin0,5,0,0TextCreate and manage cloud-powered development environmentsTextWrappingWrapForeground#C6C8D2//StackPanel/ButtonButton Margin0,5,0,0Style{StaticResource CardButtonStyle}pu:ButtonHelper.Icon#xe94d;StackPanelTextBlock FontSize18TextClone a repository /TextBlock Margin0,5,0,0TextGet code from an online repository like GitHub or Azure DevOpsTextWrappingWrapForeground#C6C8D2 //StackPanel/ButtonButton Margin0,5,0,0Style{StaticResource CardButtonStyle}pu:ButtonHelper.Icon#xe951;StackPanelTextBlock FontSize18TextOpen a project or solution /TextBlock Margin0,5,0,0TextOpen a local Visual Studio project or .sln fileTextWrappingWrapForeground#C6C8D2 //StackPanel/ButtonButton Margin0,5,0,0Style{StaticResource CardButtonStyle}pu:ButtonHelper.Icon#xe956;StackPanelTextBlock FontSize18TextOpen a local folder /TextBlock Margin0,5,0,0TextNavigate and edit code within any folderTextWrappingWrapForeground#C6C8D2 //StackPanel/ButtonButton Margin0,5,0,0Style{StaticResource CardButtonStyle}pu:ButtonHelper.Icon#xe960;StackPanelTextBlock FontSize18TextCreate a new project /TextBlock Margin0,5,0,0TextChoose a project template with code scaffolding to get startedTextWrappingWrapForeground#C6C8D2 //StackPanel/ButtonStackPanel Margin0,10,0,0HorizontalAlignmentCenterOrientationHorizontalButton Style{StaticResource LinkButtonStyle}ContentContinue without code /TextBlock Text#xe90e;VerticalAlignmentCenterForeground#0097FBFontFamily{StaticResource PanuonIconFont}//StackPanel/StackPanel/Grid
/Grid
3. 总结
Panuon.WPF.UI 是一个适用于定制个性化UI界面的组件库。它能帮助你快速完成样式和控件的UI设计而不必深入了解WPF的 ControlTemplate 、 Storyboard 等知识。
例如在原生WPF中下如果你想要修改 Button 按钮 控件的悬浮背景色你需要修改按钮的 Style 属性并编写 Trigger 和 Storyboard 来实现悬浮渐变效果。如果你想要更复杂的效果你可能还需要编写内部的ControlTemplate模板。但现在 Panuon.WPF.UI 为你提供了一个更简单的方式。你只需要在 Button 按钮 控件上添加一条 pu:ButtonHelper.HoverBackground#FF0000 属性即可实现背景色悬浮渐变到红色的效果。Panuon.WPF.UI为每一种控件都提供了大量的属性使你能够方便地修改WPF中没有直接提供但在UI设计中非常常用的效果这有助于你快速地完成UI设计尤其是在你有设计图的情况下。
