4.布局介绍

WPF的布局控件都在System.Windows.Controls.panel这个基类下，使用WPF提供的各种控件在WPF应用程序中界面进行布局，同时对各种子控件进行排列组合

名称	说明
Cursor	获取或设置在鼠标指针位于此元素上时显示的光标
DataContext	获取或设置元素参与数据绑定时的数据上下文
Dispatcher	获取与此DispatcherObject关联的Dispatcher.
FontFamily	获取或设置控件的字体系列
FontSize	获取或设置字号
Foreground	获取或设置描述前景色的画笔
HandlesScrolling	获取一个值控件是否支持滚动
Height	获取或设置元素的建议高度
HorizontalContentAlignment	获取或设置控件内容的水平对齐
IsLoaded	获取一个值，该值指示是否已加载此元素以供呈现
IsMouseOver	获取一个值，该值指示鼠标指针是否位于此元素
IsTabStop	获取或设置一个值控制是否在选项卡上导航包含。
IsVisible	获取一个值，该值指示此元素在用户界面中 是否可见，这是一个依赖项属性。
LayoutTransform	获取或设置在执行布局时应该应用于此元素的图形转换方式
Margin	获取或设置元素的外边距
Name	获取或设置元素的标识名称。该名称提供一个引用， 以便当XAML处理器在处理过程中构造标记元素之后， 代码隐藏可以对该元素进行引用。
Opacity	获取或设置当UIElement在用户界面中呈现时为其整体应用的不透明度银子
Padding	获取或设置控件中的空白
RenderTransform	获取或设置影响此元素的呈现位置的转换信息。这是一个依赖项属性
TabIndex	获取或设置使用Tab键时，确定顺序接收焦点的元素的值，当用户将控件定位
Tag	获取或设置任意对象值，该值可用于存储关于此元素的自定义信息
ToolTip	获取或设置在用户界面中为此元素显示的工具提示对象
TouchesCaptured	获取在此元素上捕获的所有触摸设别
TouchesCapturedWithin	获取在此元素或其可视化树中的任何子元素上捕获的所有触摸设备
VerticalContentAlignment	获取或设置控件内容的垂直对齐方式
Visibility	获取或设置此元素的用户界面可见性，这是一个依赖项属性。
VisualOpacityMask	获取或设置brush值，该值表示Visual的不透明蒙版
Width	获取或设置元素的宽度

    <p>
        Canvas是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小，它仅支持用
        显式坐标定位控件，它也允许指定相对任何角的坐标，而不仅仅是左上角。可以使用Left、Top、Right、Bottom附加属性在
        Canvas中定位控件。通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。实质上，你在选择每个控件停靠的角时，
        附件属性的值时作为外边距使用的。如果一个控件没有使用任何附加属性，它会被放在Canvas的左上方。
    </p>
    <p>
        Canvas的主要用途是用来画图。Canvas默认不会自动裁剪超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认ClipToBounds="False";
        我们可以通过设置ClipToBounds="True"来裁剪多出的内容
    </p>
    <p>布局代码如下：</p>
    <xmp>
            <Window x:Class="WpfApp5.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:WpfApp5"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid ClipToBounds="True" Width="500" Height="200" Margin="180,142,112,77">
            <Canvas Margin="51,75,-51,-75" Background="White">
                <Rectangle Fill="Blue"
                           Stroke="Azure"
                           Width="250"
                           Height="200"
                            Canvas.Left="280" Canvas.Top="37"/>
                <Ellipse Fill="Red"
                         Stroke="Green"
                         Width="250" Height="100"
                         Panel.ZIndex="1"
                         Canvas.Left="75" Canvas.Top="26"/>
            </Canvas>
            <Canvas Margin="-126,-130,126,130">
                <Button Name="btnByCode" Click="BtnByCode_Click" Canvas.Left="90" Canvas.Top="13">后台代码实现</Button>
            </Canvas>
        </Grid>
    </Window>
    
    </xmp>
    <p>本文参考<a href="https://www.cnblogs.com/chillsrc/p/4539947.html">DotNet菜园</a></p>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>