WPF中如何设置自定义控件（四）

在上一节讲到过将自定义界面进行左右分割,左边作为登录的用户信息和菜单；右边作为详情展示界面。

这节准备在上一节的基础上对左侧部分进行细分，完善功能，左侧的内容准备做两部分填充：一是登录用户的信息，一是菜单。因此需要将左侧的<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>

效果图：