一起搭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的一些使用方法。