WPF学习——布局

来源：互联网发布：sql数据库安装步骤编辑：程序博客网时间：2024/05/31 19:52

WPF布局

所有WPF布局容器都是派生子System.Windows.Controls.Panel抽象类的面板

Panel类的共有属性： Background,Children,IsItemsHost

核心布局面板：StackPanel、WrapPanel、DockPanel、Grid、UniformGrid、Canvas

一、使用StackPanel布局

StackPanel是最简单的布局容器之一。该面板简单地在单行或单列中以堆栈形式放置子元素

<span style="font-size:18px;"><Window x:Class="LayOut.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="280" Width="305">            <StackPanel>            <Label Content="StackPanel" HorizontalAlignment="Center" FontSize="20"></Label>        <Button Content="button1" Height="30" Margin="5"></Button>        <Button Content="button2" Height="30" Margin="5"></Button>        <Button Content="button3" Height="30" Margin="5"></Button>        <Button Content="button4" Height="30" Margin="5"></Button>        <Button Content="button5" Height="30" Margin="5"></Button>    </StackPanel>    </Window></span>

Border控件常和Panel面板一块儿使用

<Window x:Class="LayOut.border"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="border" Height="300" Width="300">    <Border Height="180" Width="260" Margin="5" Padding="5" Background="LightBlue" BorderBrush="SteelBlue" BorderThickness="3" CornerRadius="4">        <StackPanel>            <Label Content="StackPanel Border " HorizontalAlignment="Center" FontSize="20"></Label>            <Button Content="button1" Height="30" Margin="5" MinWidth="100" MaxWidth="200"></Button>            <Button Content="button2" Height="30" Margin="5"></Button>            <Button Content="button3" Height="30" Margin="5"></Button>                    </StackPanel>    </Border></Window>

二、使用WarpPanel布局

WrapPanel面板在空间中以一次一行或一列的方式布置控件，默认从左往右排列，再在下一行排列。可通过设置WrapPanel.Oritentation属性设置排列方向(Horizontal和Vertical)

<Window x:Class="WarpPanel.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="210" Width="433">    <WrapPanel>        <Button VerticalAlignment="Top">Top Button</Button>        <Button MinHeight="60">Tall Button</Button>        <Button VerticalAlignment="Bottom">Bottom Button</Button>        <Button>Stretch Button</Button>        <Button VerticalAlignment="Center">Center Button</Button>    </WrapPanel></Window>

三、使用DockPanel布局

<Window x:Class="DockPanel.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="235" Width="328">    <DockPanel LastChildFill="True">        <Button DockPanel.Dock="Top" >Top Button</Button>        <Button DockPanel.Dock="Bottom">Bottom Button</Button>        <Button DockPanel.Dock="Left">Left Button</Button>        <Button DockPanel.Dock="Right">Right Button</Button>        <Button>Remaining Space</Button>    </DockPanel></Window>

四、StackPanel、WrapPanel、DockPanel嵌套布局

<Window x:Class="Nesting.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="266" Width="407">    <DockPanel LastChildFill="True">        <StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right" Orientation="Horizontal">            <Button Margin="10,10,2,10" Padding="3" Height="25">OK</Button>            <Button Margin="10,10,2,10" Padding="3" Height="25">Cancel</Button>        </StackPanel>        <TextBox DockPanel.Dock="Top" Margin="10">This is a Text--嵌套布局示例</TextBox>    </DockPanel></Window>

五、使用Grid布局

<Window x:Class="Grid.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="173" Width="353">    <Grid ShowGridLines="False">        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>        </Grid.ColumnDefinitions>        <Button>(0,0)</Button>        <Button Grid.Column="2" Grid.ColumnSpan="2">(2,0)</Button>        <Button Grid.Row="1" Grid.Column="1">(1,1)</Button>        <Button Grid.Row="1" Grid.Column="3">(1,3)</Button>        <!-- 窗体分割 -->        <GridSplitter Grid.Row="0" Grid.Column="2"  Width="3"                       VerticalAlignment="Stretch" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,0,83,0">        </GridSplitter>    </Grid></Window>

六、使用UniformGrid布局

<Window x:Class="Grid.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="173" Width="353">    <Grid ShowGridLines="False">        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>        </Grid.ColumnDefinitions>        <Button>(0,0)</Button>        <Button Grid.Column="2" Grid.ColumnSpan="2">(2,0)</Button>        <Button Grid.Row="1" Grid.Column="1">(1,1)</Button>        <Button Grid.Row="1" Grid.Column="3">(1,3)</Button>        <!-- 窗体分割 -->        <GridSplitter Grid.Row="0" Grid.Column="2"  Width="3"                       VerticalAlignment="Stretch" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,0,83,0">        </GridSplitter>    </Grid></Window>

七、使用Canvas面板进行基于坐标的布局

<Window x:Class="Canvas.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="234" Width="327">    <Canvas>        <Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>        <Button Canvas.Left="100" Canvas.Top="90" Width="100" Height="80">(100,90)</Button>        <Button Canvas.Left="200" Canvas.Top="10">(200,10)</Button>    </Canvas></Window>

Z顺序

如果Canvas面板中有多个相互重叠的元素，可通过设置Canvas.ZIndex附加属性来控制他们的层叠的方式，添加的所有元素通常都有相同的ZIndex值，都为0

<span style="font-size:18px;"><Window x:Class="Canvas.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="234" Width="327">    <Canvas>        <Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>        <!--Z顺序   -->        <Button Canvas.Left="80" Canvas.Top="60" Width="80" Height="60" Canvas.ZIndex="1" >(80,60)</Button>        <Button Canvas.Left="141" Canvas.Top="80" Width="100" Height="80" >(100,90)</Button>        <Button Canvas.Left="200" Canvas.Top="10">(200,10)</Button>                    </Canvas>    </Window></span>

InkCanvas元素

InkCanvas元素主要目的是用于接收手写笔输入

InkCanvas元素包含两个子内容集合，一个是Children集合，一个是Strokes集合（表示用户在InkCanvas元素上绘制的图形输入）

<span style="font-size:18px;"><Window x:Class="InkCanvas.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="339" Width="422">    <InkCanvas Name="inkcanvas" Background="LightBlue" EditingMode="Ink">        <Image Source="111.jpg" Width="250" Height="250" InkCanvas.Left="20" InkCanvas.Top="20"></Image>    </InkCanvas>    </Window></span>

EditingMode的枚举值： Ink, GestureOnly, InkAndGesture, EraseByStroke, EraseByPoint, Select, None

八、布局示例：

<span style="font-size:18px;"><Window x:Class="Example.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="336" Width="334">    <Grid >        <Grid.RowDefinitions>            <RowDefinition Height="auto"></RowDefinition>            <RowDefinition Height="auto"></RowDefinition>            <RowDefinition Height="auto"></RowDefinition>            <RowDefinition Height="auto"></RowDefinition>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="auto"></ColumnDefinition>            <ColumnDefinition Width="*"></ColumnDefinition>            <ColumnDefinition Width="auto"></ColumnDefinition>        </Grid.ColumnDefinitions>        <Label Margin="3" Content="Home:"></Label>        <Label Margin="3" Content="NetWork:" Grid.Row="1"></Label>        <Label Margin="3" Content="Web:" Grid.Row="2"></Label>        <Label Margin="3" Content="Secondary:" Grid.Row="3"></Label>                <TextBox Margin="3" Grid.Column="1">c:\</TextBox>        <TextBox Margin="3" Grid.Column="1" Grid.Row="1"></TextBox>        <TextBox Margin="3" Grid.Column="1" Grid.Row="2"></TextBox>        <TextBox Margin="3" Grid.Column="1" Grid.Row="3"></TextBox>        <Button Margin="3" Grid.Column="2" Padding="3" Width="60" Content="Browse"></Button>        <Button Margin="3" Grid.Column="2" Grid.Row="1" Padding="3" Width="60" Content="Browse"></Button>        <Button Margin="3" Grid.Column="2" Grid.Row="2" Padding="3" Width="60" Content="Browse"></Button>        <Button Margin="3" Grid.Column="2" Grid.Row="3" Padding="3" Width="60" Content="Browse"></Button>    </Grid></Window></span>

源代码位置：http://download.csdn.net/detail/tingzhiyi/9470830

0 0