一起搭WPF界面之View界面介绍一
1 界面代码介绍
MVVM中View设计在.xaml
文件中设计。很多人可能在一开始使用时,就是直接找到工具箱
,然后拖一堆控件,把控件按自己喜欢的方式进行排列,但是常常对不齐,不好看,不整洁。
界面代码也就是在一个层级,可以看出Margin
的数值都是随意根据不同位置直接定义的,很杂乱!
<Window x:Class="InterfacialDesign.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InterfacialDesign.Views"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="220,100,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="145,230,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Left" Margin="385,185,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1_Copy" Content="Button" HorizontalAlignment="Left" Margin="310,315,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Left" Margin="605,140,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1_Copy1" Content="Button" HorizontalAlignment="Left" Margin="530,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
</Window>
我们为了使得界面设计得更规范、更美观,那就最好使用界面代码进行功能区域设计与控件设计,使得界面保持一致的设计风格!
那么就开始下面的详细介绍啦!
2 具体使用介绍
2.1 window
- 通常前端代码常用
<
和/>
作为开始与结束。 - 在自动生成的界面中,以window界面输出为主,可设置是否需要沿用window样式。如下区别:
主要设置WindowStyle="None"
,可以将左图改程右图。更好的进行主界面设计。
<Window x:Class="InterfacialDesign.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InterfacialDesign.Views"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" >
<Grid>
</Grid>
</Window>
上面代码中主要描述了一下内容,了解即可:
- x:Class 属性指定了与这个XAML文件关联的代码后台类。
- xmlns 和 xmlns:x 属性定义了XAML的命名空间。
- Title属性设置了窗口的标题。
- Height 和 Width 属性定义了窗口的初始大小。
2.2 网格
- 通常
<Grid> </Grid>
开始和结尾标志。 <Grid>
是一个非常灵活的布局控件,你可以把它想象成是一个excel
表格,可自行设置表格大小。<Grid>
——行定义(<Grid.RowDefinitions>
)<Grid>
——列定义(<Grid.ColumnDefinitions>
)
可以从图片上看到我们设置宽度为100的列,就画了一个线条。
对应代码如下:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
</Grid>
如果需要将控件放置在其中,可以采用后台代码实现,即将按钮放置在第0行、第0列。
1、需要注意!网格从第0行、第0列开始算!
2、划分后,控件放置会充满整个网格!
<Button x:Name="开关" Content="开关" Grid.Column="0" Grid.Row="0"/>
具体实现如下:
通过网格的划分,可以将控件排列很整洁!
- 当无法划分具体宽度和高度时,可以考虑使用
*
,自动划分宽度!
2.3 Border
<Border>
是一个控件,用于创建一个带有边框的区域,可以包含其他控件作为其内容。<Border>
控件通常用于装饰或突出显示UI中的特定部分,可以自定义边框的颜色、宽度和样式。
例如,我需要绘制一个框,突出显示:
<Border BorderBrush="Aqua" CornerRadius="5" BorderThickness="5" Margin="5">
对应的显示如下:
<Border>
最常用的设置介绍:
- BorderBrush 设置边框的颜色。
- BorderThickness 设置边框的宽度。
- CornerRadius设置边框角的圆角半径。
- Background 设置边框内部的背景颜色。
- Padding设置内容与边框之间的间距。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了MVVM中View的Window
、Grid
、Border
的一些使用方法。