最近項目需要权她,使用WPF編制一些簡單的工具∶朊罚現(xiàn)在將學習和使用過程中的一些體會記錄下來,作為備忘纳击。
WPF的布局與Bootstrap 的網(wǎng)格布局有些類似,通過使用Grid將區(qū)域劃分為若干網(wǎng)格攻臀,然后在網(wǎng)格中放置控件焕数。WPF的控件屬性與WinForm的有相似的地方,都可以在后臺代碼中修改屬性的內(nèi)容刨啸,也可以在頁面描述中定義模板和需要與后臺模型的綁定屬性堡赔。所不同的是WPF中控件模板的定義更靈活,但同時也更復雜设联,綁定功能更強大善已,但同時語法也更復雜。這里簡單總結(jié)一下离例,便于以后查詢應用雕拼。
Grid布局
使用Grid嵌套進行布局,可以定義基本的頁面粘招,下面的布局是基本的布局樣式:
<Window x:Class="WpfLayout.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:WpfLayout"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<!--定義Grid的行啥寇,定義2行-->
<!--第一行放Toolbar-->
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--定義Grid的列,定義1列-->
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToolBar Grid.Column="0" Grid.Row="0">
<Button>
<Image Source="Images/ToolbarImg/File.png" Width="32" Height="32"></Image>
</Button>
</ToolBar>
<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>
</Window>
DockPanel布局
需要注意的是:DockPanel布局中最后一個控件填充剩余區(qū)域,而不是按從上到下的順序:
<Grid>
<DockPanel>
<!--团劾洌靠布局磷醋,讓菜單欄和工具欄位于窗口頂部-->
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<!--菜單項為MenuItem,文字使用屬性 Header-->
<MenuItem Name="menuOpen" Header="Open" Click="menuOpen_Click"></MenuItem>
<MenuItem Header="Save"></MenuItem>
<MenuItem Header="Delete"></MenuItem>
</MenuItem>
<MenuItem Header="Edit"></MenuItem>
<MenuItem Header="View"></MenuItem>
<MenuItem Header="About"></MenuItem>
</Menu>
<ToolBar DockPanel.Dock="Top">
<!--ToolBar和StatusBar就是一個容器-->
<Button Content="Save"></Button>
<Button Content="SaveAll"></Button>
<Button Content="FileExplorer"></Button>
<Button Content="Start"></Button>
<Button Content="Test"></Button>
</ToolBar>
<StatusBar DockPanel.Dock="Bottom" >
<TextBlock Text="statusBar"></TextBlock>
</StatusBar>
<!--Grid最后加入胡诗,填充剩余區(qū)域-->
<Grid>
</Grid>
</DockPanel>
</Grid>
Canvas
支持坐標定位邓线,在控件中使用Canvas.Left,Canvas.Top,Canvas.Right和Canvas.Bottom進行定位煌恢。
StackPanel
順序排列控件骇陈,橫向或者縱向,設置Orientation屬性為Horizontal或Vertical瑰抵。
WrapPanel
可以規(guī)定控件具有統(tǒng)一的寬度和高度你雌,并且超出范圍可以換行,也支持橫向或縱向排列二汛。
- Orientation:這就像StackPanel中的Orientation屬性婿崭,唯一不同的是默認值為Horizontal拨拓。當Horizontal Orientation看上去類似于Windows資源管理器的縮略圖視圖:元素是從左向右排列的,然后自上至下自動換行氓栈。Vertical Orientation看上去類似于Windows資源管理器的列表視圖:元素是從上向下排列的渣磷,然后從左至右自動換行。
- ItemHeight:所有子元素都一致的高度授瘦。每個子元素填充高度的方式取決于它的VerticalAlignment屬性醋界、Height屬性等。任何比ItemHeight高的元素都將被截斷奥务。
- ItemWidth:所有子元素都一致的寬度物独。每個子元素填充高度的方式取決于它的VerticalAlignment屬性、Width屬性等氯葬。任何比ItemWidth高的元素都將被截斷挡篓。