在上一节讲到过将自定义界面进行左右分割,左边作为登录的用户信息和菜单；右边作为详情展示界面。
这节准备在上一节的基础上对左侧部分进行细分，完善功能，左侧的内容准备做两部分填充：一是登录用户的信息，一是菜单。因此需要将左侧的<Grid>表格控件分割成两行，地一行方式用户信息；第二行放置菜单。
<Window x:Class="DataGrid.Window1"
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:Icon ="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:DataGrid"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</Window.Resources>
<Border CornerRadius="30" Background="#EFF2F7" MouseDown="Border_MouseDown" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left Menu-->
<Border Background="#623ED0" CornerRadius="0 50 0 30">
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--用户信息-->
<Grid Grid.Row="0">
</Grid>
<!--菜单-->
<Grid Grid.Row="1" >
</Grid>
</Grid>
</Border>
<!--Main Section-->
<Border Grid.Column="1" Background="Aquamarine" CornerRadius="5">
<Grid Grid.Column="1" Margin="30 20 20 20">
</Grid>
</Border>
</Grid>
</Border>
</Window>
为了尽一步完善信息，我决定在用户信息中加载用户照片，显示用户名称和地址；在第二个<Grid>中添加菜单（暂且全用TextBlock代替）。由于左侧的大小是固定长度200，因此所有内容选择竖直排列。代码如下：
<Window x:Class="DataGrid.Window1"
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:Icon ="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:DataGrid"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</Window.Resources>
<Border CornerRadius="30" Background="#EFF2F7" MouseDown="Border_MouseDown" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left Menu-->
<Border Background="#623ED0" CornerRadius="0 50 0 30">
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border Background="#623ED0" Margin="0 0 0 60" Height="160" Width="80">
<StackPanel Orientation="Vertical">
<Ellipse Height="80" Width="80">
<Ellipse.Fill>
<ImageBrush ImageSource="/Images/p1.jpg"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Foreground="White" Text="James" Height="40" ></TextBlock>
<TextBlock Foreground="White" Text="西部大道"></TextBlock>
</StackPanel>
</Border>
</Grid>
<!--菜单-->
<Grid Grid.Row="1" >
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White"> 菜单1</TextBlock>
<TextBlock Foreground="White"> 菜单2</TextBlock>
<TextBlock Foreground="White"> 菜单3</TextBlock>
<TextBlock Foreground="White"> 菜单4</TextBlock>
<TextBlock Foreground="White"> 菜单5</TextBlock>
</StackPanel>
</Grid>
</Grid>
</Border>
<!--Main Section-->
<Border Grid.Column="1" Background="Aquamarine" CornerRadius="5">
<Grid Grid.Column="1" Margin="30 20 20 20">
</Grid>
</Border>
</Grid>
</Border>
</Window>
效果图：
