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