WPF学习——布局

时间 2020-06-03 标签 wpf 学习布局

WPF布局

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

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

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

1、使用StackPanel布局.net

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

<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面板一起使用code

<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>

2、使用WarpPanel布局orm

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

<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>

3、使用DockPanel布局blog

<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>

4、StackPanel、WrapPanel、DockPanel嵌套布局it

<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>

5、使用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>

6、使用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>

7、使用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

8、布局示例：

<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