WPF页面布局

作者：李坤凤
本次任务完成时间：2019年5月15日
开发工具与关键技术：开发工具：VS 关键技术:页面布局

一、 视图效果

二、 代码

泊靠式布局特点：
1、 指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。
2、 填充整个剩余空间
3、 DockPanel停靠容器，专门负责适应窗口的布局

    <DockPanel Margin="-2,0,-0.4,4.4">
        <Button DockPanel.Dock="Top" Content="首页内容" Height="45" Margin="0,0,-0.4,0" FontSize="25">
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFF7F6F6" Offset="0"/>
                    <GradientStop Color="#FFF9C2C2" Offset="1"/>
                    <GradientStop Color="#FFF9E2E1" Offset="0.247"/>
                    <GradientStop Color="#FF48EBE8" Offset="0.59"/>
                    <GradientStop Color="#FFF6DCDC" Offset="0.859"/>
                    <GradientStop Color="#FF98DBFC" Offset="0.42"/>
                    <GradientStop Color="#FFFFE7DF" Offset="0.327"/>
                    <GradientStop Color="#FFBBF3F3" Offset="0.115"/>
                </LinearGradientBrush>
            </Button.Background>
        </Button>

网格布局特点：
1、可以定义任意数量的行和列，非常灵活。
2、行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。
3、内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列。
4、可以设置Children元素的对齐方向。

<Grid Grid.Column="0" PreviewDragOver="Grid_PreviewDragOver" Grid.Row="1" Height="30" Margin="0,0.2,0,0" VerticalAlignment="Top" Width="120">
            <Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" Margin="0,0,0,-10" RenderTransformOrigin="0.5,1.138"></Button>
            <Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" RenderTransformOrigin="0.5,1.587" Margin="0,40,0,-50"></Button>
            <Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" RenderTransformOrigin="0.5,1.587" Margin="0,80,0,-90"></Button>
        </Grid>
    <!--主内容-->
        <Button Background="SkyBlue" Click="Button_Click" Margin="0,0.2,0,-9.4">
            <Image Source="/imgea/mmexport1540988078318.jpg"  Width="505" Height="615">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1"/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Button>
   </DockPanel>