WPF很多应用的主界面都与Windows的资源管理器类似,界面顶部是菜单和工具栏,界面底部是状态栏,主界面的左侧是树形导航或者是列表,右面是显示内容的部分。左侧和右侧之间用切分条分割,可以用鼠标拖动改变两个区域的大小。这种页面实现起来并不困难,可是每个项目都来一遍也挺麻烦的。下面的代码创建了这种布局,可以拷贝到新项目使用。
<Window x:Class="SubmitFormDesigner.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:SubmitFormDesigner"
mc:Ignorable="d"
Title="MainWindow" Height="485.179" Width="770.684">
<Grid>
<Grid.RowDefinitions>
<!--定义Grid的行,定义2行-->
<!--第一行放Toolbar-->
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--定义Grid的列,定义1列-->
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToolBarTray Height="35" VerticalAlignment="Top" Grid.Row="0">
<ToolBar>
<Button Click="NewFile_Click" Name="NewFile">
<Image Source="Images/ToolbarImg/File.png" Width="32" Height="32"></Image>
</Button>
<Button Click="OpenFile_Click" Name="OpenFile">
<Image Source="Images/ToolbarImg/Open.png" Width="32" Height="32"></Image>
</Button>
<Button Click="SaveFile_Click" Name="SaveFile">
<Image Source="Images/ToolbarImg/Save.png" Width="32" Height="32"></Image>
</Button>
</ToolBar>
<ToolBar>
<Button Click="DeleteRow_Click" Name="DeleteRow" ToolTip="删除行">
<Image Source="Images/ToolbarImg/deleterow.png" Width="32" Height="32"></Image>
</Button>
<Button Click="DeleteRow_Click" Name="DeleteCol" ToolTip="删除列">
<Image Source="Images/ToolbarImg/deletecol.png" Width="32" Height="32"></Image>
</Button>
</ToolBar>
</ToolBarTray>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<!--定义Grid的行,定义1行-->
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--定义Grid的列,定义2列-->
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderThickness="0" >
<TreeView >
</TreeView>
</Border>
<GridSplitter Width="5"></GridSplitter>
<Border Grid.Row="0" Grid.Column="1" Width="auto" >
<Grid>
</Grid>
</Border>
</Grid>
<Grid Grid.Row="2">
<StatusBar >
<TextBlock Name="lbMessage" Text="就绪"/>
</StatusBar>
</Grid>
</Grid>
</Window>