开始使用Panuon开源界面库情况设置并手写VS2019高仿界面 ...

• 1. Panuon情况设置
  
  
  
  • 1.1. 通过Nuget 安装 Panuon.WPF.UI
    
  • 1.2. xaml引用定名空间
    
  • 1.3. using Panuon.WPF.UI;
    
  
  
• 2. VS2019 view
  
  
  
  • 2.1. 设置窗体尺寸和title
    
  • 2.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:pu="clr-namespaceanuon.WPF.UI;assembly=Panuon.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继续添加属性

1. Title="Visual Studio (SIM)"
2. Height="630"
3. Width="1058"
4. MinHeight="630"
5. MinWidth="1058"
6. Background="#252526"
7. BorderBrush="#3E3E45"
8. BorderThickness="1"
9. Foreground="#F1F1F1"

复制代码

2.2. 添加静态资源

2.2.1. 什么是静态资源

资源可以分为静态资源或动态资源举行引用。
分别是通过使用 StaticResource 标记扩展或 DynamicResource 标记扩展完成的。
StaticResource的用法：
通过更换已界说资源的值（x:Key）来为 XAML 属性提供值。
这里添加静态资源就是可以对单个控件的样式单独控制，定制化。为后面的控件样式所用。

2. <pu:WindowX.Resources>
4.     <Style x:Key="SearchComboBoxStyle"
5.        TargetType="ComboBox"
6.        BasedOn="{StaticResource {x:Type ComboBox}}">
7.         <Setter Property="pu:ComboBoxHelper.HoverBorderBrush"
8.             Value="#007ACC" />
9.         <Setter Property="pu:ComboBoxHelper.FocusedBorderBrush"
10.             Value="#007ACC" />
11.         <Setter Property="Height"
12.             Value="35" />
13.         <Setter Property="Width"
14.             Value="320" />
15.         <Setter Property="Background"
16.             Value="#333337" />
17.         <Setter Property="BorderBrush"
18.             Value="#3F3F46" />
19.         <Setter Property="Foreground"
20.             Value="#F1F1F1" />
21.     </Style>
24.     <Style x:Key="CardButtonStyle"
25.        TargetType="Button"
26.        BasedOn="{StaticResource {x:Type Button}}">
27.         <Setter Property="pu:IconHelper.FontFamily"
28.             Value="{StaticResource PanuonIconFont}" />
29.         <Setter Property="pu:IconHelper.FontSize"
30.             Value="30" />
31.         <Setter Property="pu:IconHelper.VerticalAlignment"
32.             Value="Top" />
33.         <Setter Property="pu:IconHelper.Margin"
34.             Value="7,2,17,0" />
35.         <Setter Property="pu:ButtonHelper.HoverBackground"
36.             Value="#3F3F40" />
37.         <Setter Property="pu:ButtonHelper.ClickBackground"
38.             Value="{x:Null}" />
39.         <Setter Property="Foreground"
40.             Value="#F1F1F1" />
41.         <Setter Property="Background"
42.             Value="#333337" />
43.         <Setter Property="Padding"
44.             Value="10,7,10,10" />
45.         <Setter Property="Height"
46.             Value="75" />
47.         <Setter Property="VerticalContentAlignment"
48.             Value="Stretch" />
49.         <Setter Property="HorizontalContentAlignment"
50.             Value="Stretch" />
51.     </Style>
54.     <Style x:Key="LinkButtonStyle"
55.        TargetType="Button"
56.        BasedOn="{StaticResource {x:Type Button}}">
57.         <Setter Property="pu:IconHelper.FontFamily"
58.             Value="{StaticResource PanuonIconFont}" />
59.         <Setter Property="pu:ButtonHelper.HoverBackground"
60.             Value="{x:Null}" />
61.         <Setter Property="pu:ButtonHelper.ClickBackground"
62.             Value="{x:Null}" />
63.         <Setter Property="Foreground"
64.             Value="#0097FB" />
65.         <Setter Property="Background"
66.             Value="{x:Null}" />
67.         <Setter Property="Cursor"
68.             Value="Hand" />
69.         <Setter Property="VerticalContentAlignment"
70.             Value="Stretch" />
71.         <Setter Property="HorizontalContentAlignment"
72.             Value="Stretch" />
73.         <Style.Triggers>
74.             <Trigger Property="IsMouseOver"
75.                  Value="True">
76.                 <Setter Property="ContentTemplate">
77.                     <Setter.Value>
78.                         <DataTemplate>
79.                             <TextBlock Text="{Binding}"
80.                                    TextDecorations="Underline"/>
81.                         </DataTemplate>
82.                     </Setter.Value>
83.                 </Setter>
84.             </Trigger>
85.         </Style.Triggers>
86.     </Style>
89.     <Style x:Key="ProjectListBoxStyle"
90.        TargetType="ListBox"
91.        BasedOn="{StaticResource {x:Type ListBox}}">
92.         <Setter Property="pu:IconHelper.FontFamily"
93.             Value="{StaticResource PanuonIconFont}" />
94.         <Setter Property="pu:IconHelper.Width"
95.             Value="25" />
96.         <Setter Property="pu:IconHelper.Height"
97.             Value="25" />
98.         <Setter Property="pu:IconHelper.VerticalAlignment"
99.             Value="Top" />
100.         <Setter Property="pu:IconHelper.Margin"
101.             Value="0,-15,7,0" />
102.         <Setter Property="pu:ListBoxHelper.ItemsHeight"
103.             Value="65" />
104.         <Setter Property="pu:ListBoxHelper.ItemsPadding"
105.             Value="10,0,10,0" />
106.         <Setter Property="pu:ListBoxHelper.ItemsHoverBackground"
107.             Value="#3F3F40" />
108.         <Setter Property="pu:ListBoxHelper.ItemsSelectedBackground"
109.             Value="{x:Null}" />
110.         <Setter Property="Foreground"
111.             Value="#F1F1F1" />
112.         <Setter Property="Background"
113.             Value="Transparent" />
114.         <Setter Property="BorderThickness"
115.             Value="0" />
116.         <Setter Property="VerticalContentAlignment"
117.             Value="Center" />
118.         <Setter Property="HorizontalContentAlignment"
119.             Value="Stretch" />
120.     </Style>
123. </pu:WindowX.Resources>

复制代码

2.3. 主Grid

2.3.1. 盒子模型

主Grid里面的布局必要手写，手写必要有一定布局的基础。如果不是很清楚必要先相识下盒子模型。
盒子模型最开始是应用于网页布局，将页面中全部元素都看作是一个盒子，盒子都包含以下几个属性：
width 宽度
height 高度
border 边框——围绕在内边距和内容外的边框
padding 内边距——清除内容四周的区域，内边距是透明的
margin 外边距——清除边框外的区域，外边距是透明的
content 内容——盒子的内容，显示文本和图像

2.3.2. 嵌套布局

用xaml写布局，当层级嵌套比力深，比力复杂的时间本身都会很晕，这里有个小本领我经常用，就是给背景/边框标红，这样能直观看到当前的嵌套到哪里了。等找到本身的定位后，在把红色标记去掉。
<Grid Margin="55,0,65,35" Background="Red">
完整的Grid布局代码：

2. <Grid Margin="55,0,65,35">
4.     <Grid.RowDefinitions>
5.         <RowDefinition Height="Auto"/>
6.         <RowDefinition />
7.     </Grid.RowDefinitions>
8.     <TextBlock Text="Visual Studio 2019 (SIM)"
9.            FontSize="33"/>
10.     <Grid Grid.Row="1">
11.         <Grid.ColumnDefinitions>
12.             <ColumnDefinition />
13.             <ColumnDefinition Width="30"/>
14.             <ColumnDefinition Width="0.6*" />
15.         </Grid.ColumnDefinitions>
16.         <Grid.RowDefinitions>
17.             <RowDefinition Height="Auto"/>
18.             <RowDefinition />
19.         </Grid.RowDefinitions>
20.         <TextBlock Margin="0,30,0,0"
21.                Text="Open recent"
22.                FontSize="20" />
23.         <Grid Grid.Row="1">
24.             <Grid.RowDefinitions>
25.                 <RowDefinition Height="Auto" />
26.                 <RowDefinition />
27.             </Grid.RowDefinitions>
28.             <ComboBox Margin="0,15,0,0"
29.                   HorizontalAlignment="Left"
30.                   IsEditable="True"
31.                   Style="{StaticResource SearchComboBoxStyle}"
32.                   pu:ComboBoxHelper.Watermark="Search recent" />
33.             <ListBox Grid.Row="1"
34.                  Margin="0,15,0,0"
35.                  Style="{StaticResource ProjectListBoxStyle}">
36.                 <ListBoxItem pu:ListBoxItemHelper.Icon="/Samples;component/Resources/WebForms.png">
37.                     <Grid>
38.                         <Grid.RowDefinitions>
39.                             <RowDefinition Height="Auto"/>
40.                             <RowDefinition Height="Auto"/>
41.                         </Grid.RowDefinitions>
42.                         <TextBlock FontSize="14"
43.                                FontWeight="Bold"
44.                                Text="ProjectA.sln" />
45.                         <TextBlock VerticalAlignment="Center"
46.                                HorizontalAlignment="Right"
47.                                Foreground="#C6C8D2"
48.                                Text="2021/4/12 12:00" />
49.                         <TextBlock Grid.Row="1"
50.                                Margin="0,8,0,0"
51.                                Text="D:\ProjectA"
52.                                TextTrimming="CharacterEllipsis"
53.                                Foreground="#C6C8D2" />
54.                     </Grid>
55.                 </ListBoxItem>
56.                 <ListBoxItem pu:ListBoxItemHelper.Icon="/Samples;component/Resources/WebForms.png">
57.                     <Grid>
58.                         <Grid.RowDefinitions>
59.                             <RowDefinition Height="Auto" />
60.                             <RowDefinition Height="Auto" />
61.                         </Grid.RowDefinitions>
62.                         <TextBlock FontSize="14"
63.                                FontWeight="Bold"
64.                                Text="ProjectB.sln" />
65.                         <TextBlock VerticalAlignment="Center"
66.                                HorizontalAlignment="Right"
67.                                Foreground="#C6C8D2"
68.                                Text="2021/4/12 12:00" />
69.                         <TextBlock Grid.Row="1"
70.                                Margin="0,8,0,0"
71.                                Text="D:\ProjectB"
72.                                TextTrimming="CharacterEllipsis"
73.                                Foreground="#C6C8D2" />
74.                     </Grid>
75.                 </ListBoxItem>
76.             </ListBox>
77.         </Grid>
78.         <TextBlock Grid.Column="2"
79.                Margin="0,30,0,0"
80.                Text="Get started"
81.                FontSize="20" />
82.         <StackPanel Grid.Column="2"
83.                 Grid.Row="1"
84.                 Margin="0,15,0,0">
85.             <Button  Style="{StaticResource CardButtonStyle}"
86.                  pu:ButtonHelper.Icon="&#xe941;">
87.                 <StackPanel>
88.                     <TextBlock FontSize="18"
89.                            Text="Connect to a codespace"/>
90.                     <TextBlock Margin="0,5,0,0"
91.                            Text="Create and manage cloud-powered development environments"
92.                            TextWrapping="Wrap"
93.                            Foreground="#C6C8D2"/>
94.                 </StackPanel>
95.             </Button>
96.             <Button Margin="0,5,0,0"
97.                 Style="{StaticResource CardButtonStyle}"
98.                  pu:ButtonHelper.Icon="&#xe94d;">
99.                 <StackPanel>
100.                     <TextBlock FontSize="18"
101.                            Text="Clone a repository" />
102.                     <TextBlock Margin="0,5,0,0"
103.                            Text="Get code from an online repository like GitHub or Azure DevOps"
104.                            TextWrapping="Wrap"
105.                            Foreground="#C6C8D2" />
106.                 </StackPanel>
107.             </Button>
108.             <Button Margin="0,5,0,0"
109.                 Style="{StaticResource CardButtonStyle}"
110.                 pu:ButtonHelper.Icon="&#xe951;">
111.                 <StackPanel>
112.                     <TextBlock FontSize="18"
113.                            Text="Open a project or solution" />
114.                     <TextBlock Margin="0,5,0,0"
115.                            Text="Open a local Visual Studio project or .sln file"
116.                            TextWrapping="Wrap"
117.                            Foreground="#C6C8D2" />
118.                 </StackPanel>
119.             </Button>
120.             <Button Margin="0,5,0,0"
121.                 Style="{StaticResource CardButtonStyle}"
122.                 pu:ButtonHelper.Icon="&#xe956;">
123.                 <StackPanel>
124.                     <TextBlock FontSize="18"
125.                            Text="Open a local folder" />
126.                     <TextBlock Margin="0,5,0,0"
127.                            Text="Navigate and edit code within any folder"
128.                            TextWrapping="Wrap"
129.                            Foreground="#C6C8D2" />
130.                 </StackPanel>
131.             </Button>
132.             <Button Margin="0,5,0,0"
133.                 Style="{StaticResource CardButtonStyle}"
134.                 pu:ButtonHelper.Icon="&#xe960;">
135.                 <StackPanel>
136.                     <TextBlock FontSize="18"
137.                            Text="Create a new project" />
138.                     <TextBlock Margin="0,5,0,0"
139.                            Text="Choose a project template with code scaffolding to get started"
140.                            TextWrapping="Wrap"
141.                            Foreground="#C6C8D2" />
142.                 </StackPanel>
143.             </Button>
144.             <StackPanel Margin="0,10,0,0"
145.                     HorizontalAlignment="Center"
146.                     Orientation="Horizontal">
147.                 <Button Style="{StaticResource LinkButtonStyle}"
148.                     Content="Continue without code" />
149.                 <TextBlock Text="&#xe90e;"
150.                        VerticalAlignment="Center"
151.                        Foreground="#0097FB"
152.                        FontFamily="{StaticResource PanuonIconFont}"/>
153.             </StackPanel>
154.         </StackPanel>
155.     </Grid>
156. </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设计（尤其是在你有设计图的情况下）。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。