（二）WPF桌面程序开发——利用Gird、StackPanel、DockPanel实现基础布局

效果

代码效果

<Window x:Class="EpicInformation.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:EpicInformation"
        mc:Ignorable="d"
        Title="EpicInformation" Height="1080" Width="1920">

    <Grid>
        <Grid.RowDefinitions >
            <RowDefinition/>
        </Grid.RowDefinitions >
        <Grid.ColumnDefinitions>
            <!-- 左侧控制栏定义 -->
            <ColumnDefinition Width="400*"/>
            <!-- 右侧内容区定义 -->
            <ColumnDefinition Width="1520*"/>
        </Grid.ColumnDefinitions>
        <!-- 左侧控制栏实现 -->
        <StackPanel Background="green" Grid.Column="0" Grid.Row="0" Orientation="Vertical">
            <Button Height="900" Margin="20" FontSize="40">控制栏</Button>
        </StackPanel>

        <!-- 右侧内容区实现 -->
        <Grid Grid.Column="1" Grid.Row="0">
            <Grid.RowDefinitions >
                <!-- 内容区流程栏定义 固定高度60 -->
                <RowDefinition Height="60"/>
                <!-- 内容区内容栏定义 -->
                <RowDefinition/>
            </Grid.RowDefinitions >
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <!-- 内容区流程栏实现 -->
            <DockPanel Background="green">
                <Button DockPanel.Dock="Right" Width="100" Margin="10">退出</Button>
                <StackPanel Orientation="Horizontal">
                    <Button Width="100" Margin="10">流程1</Button>
                    <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White">>></Label>
                    <Button Width="100" Margin="10">流程2</Button>
                    <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White">>></Label>
                    <Button Width="100" Margin="10">流程3</Button>
                    <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White">>></Label>
                    <Button Width="100" Margin="10">流程4</Button>
                    <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White">>></Label>
                    <Button Width="100" Margin="10">流程5</Button>
                    <Label HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White">>></Label>
                    <Button Width="100" Margin="10">流程6</Button>
                </StackPanel>
            </DockPanel>

            <!-- 内容区流程栏实现 -->
            <StackPanel Background="red" Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
                <Button Width="1000" Margin="10" FontSize="100">图像显示区</Button>
                <Button Width="400" Margin="10"  FontSize="100">编辑区</Button>
            </StackPanel>
        </Grid>
    </Grid>


</Window>