WPF（二）举例讲解WPF布局
WPF（二）举例讲解WPF布局
WPF中的控件布局
就讲六个控件是杂个用的,包括: Canvas, DockPanel, Grid, StackPanel, WrapPanel, VirtualizingStackPanel
1. Canvas :简单地设置坐标值来布局
Canvas很单纯地设置其子控件相对于它的Top, Left, Bottom., Right值来进行定位其子控件.
例子：
<Canvas>
<Button Canvas.Top="10" Canvas.Left="10" Content="Canvas 进行 (x,y) 定位(10,10)" />
</Canvas>
效果图：
2, DockPanel:
为其子控件提供相对的停靠位置, 包括向左停靠(Dock.Left),向右停靠(Dock.Right),向下停靠(Dock.Bottom),向上停靠.。DockPanel 使您在停靠项时，无需担心它们的确切 (x,y) 位置
例子：
<DockPanel Grid.Column="1" Grid.Row="0">
<Menu DockPanel.Dock="Top">
<MenuItem Header="Menu" >
<MenuItem Header="open" />
<MenuItem Header="save" />
</MenuItem>
<MenuItem Header="Edit" />
</Menu>
<TreeView>
<TreeViewItem Header="DockPanel"/>
<TreeViewItem Header="香港电影">
<TreeViewItem Header="无间道" />
<TreeViewItem Header="伤城" />
<TreeViewItem Header="和平饭店" />
<TreeViewItem Header="阿郎的故事" />
<TreeViewItem Header="秋天的童话" />
<TreeViewItem Header="赌神" />
</TreeViewItem>
<TreeViewItem Header="欧美电影"/>
</TreeView>
<ListBox>
<ListBoxItem>DockPanel 使您在停靠项时</ListBoxItem>
<ListBoxItem>无需担心它们的确切 (x,y) 位置</ListBoxItem>
<ListBoxItem>listBoxItem</ListBoxItem>
</ListBox>
</DockPanel>
效果图:
3. Grid:表格布局
Grid允许我们通过自定义行列来进行布局,主要作用就是画格格，网格定位.
通过设置Columns和Rows的属性，通过定义Grid的ColumnDifinitions和RowDifinitions来实现对于表格的定义，然后根据Grid.Column和Grid.Row的对象来制定位置的方式实现布局.
例子：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="panel1" Grid.Row="0" Grid.Column="1" Background="Red"></Button>
<Button x:Name="panel2" Grid.Row="1" Grid.Column="0" Background="Red"></Button>
<Button x:Name="panel3" Grid.Row="1" Grid.Column="2" Background="Red"></Button>
<Button x:Name="panel4" Grid.Row="2" Grid.Column="1" Background="Red"></Button>
<Button x:Name="panel5" Grid.Row="1" Grid.Column="1" Content="Grid画格格"></Button>
<Button x:Name="panel6" Grid.Row="0" Grid.Column="0" Content="网格定位"></Button>
</Grid>
效果图:
4. StackPanel :按照水平线方向或垂直线方向排列控件
StackPanel允许你按照指定的方向其中添加子控件
Orientation=" Horizontal"表示纵向
Orientation="Vertical"表示横向
例子:
<StackPanel Orientation="Horizontal" Background="silver" Margin="20">
<!--Orientation="Vertical"表示纵向-->
<Label Margin="5" Content="提供一个" />
<TextBox Margin="5" Text="从左至右" BorderBrush="Blue" Foreground="Black" Width="100"/>
<Button Name="test" Width="100" Height="50" Content="或从上至下"/>
<Button Content="放置内容的堆栈模型"/>
<Label Name="testlabel" Content="!"/>
</StackPanel>
效果图：
5. WrapPanel: 自动换行子控件的布局
WrapPanel 模型是资源管理器窗口的右侧窗格，使您可以处理在当前行已满之后流入新行中的项。
例子:
<WrapPanel Background="Silver" Margin="40">
<Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button />
<Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button />
<Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button />
<Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button />
</WrapPanel>
效果图:
（小块块就是Button）
6. VirtualizingStackPanel
可视化是一种改善数据密集型应用程序性能的很好方式。可通过VirtualizingStackPanel控件获得 WPF 中的 UI 可视化。对于大量的项而言，这要比 StackPanel 快 70 倍。
我们在加载字体列表时可能会遇到了一个让人崩溃的问题：由于系统字体可能较多(可能有好几百项)，导致使用ComboBox显示字体列表异常缓慢，这是由于ComboBox在展开列表时绘制了列表中的每一项，为了避免这个问题，我们可以使用 VirtualizingStackPanel来代替ComboBox默认的项目面板StackPanel：
然后速度就很快了，与仅仅加载少量项目速度一样快，因为其只绘制了当前被显示的项。
例子：
<Grid>
<ComboBox x:Name="comboboxFontList1" VerticalAlignment="Top">
<ComboBox x:Name="comboboxFontList2" VerticalAlignment="Top">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
</ComboBox>
</Grid>
效果图:就是ComboBox里面夹ComboBox