• WPF学习笔记-布局


    一,Grid

    网格三种设置行列宽高

     1 <Window x:Class="WPFdemo3.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     6         xmlns:local="clr-namespace:WPFdemo3"
     7         mc:Ignorable="d"
     8         Title="MainWindow" Height="350" Width="525">
     9     <Grid ShowGridLines="True">
    10         <!--定义网格,此处显示了网格线-->
    11         <Grid.RowDefinitions>
    12             <!--自动行高-->
    13             <RowDefinition Height="Auto"></RowDefinition>
    14             <!--按比例行高-->
    15             <RowDefinition Height="*"></RowDefinition>
    16             <!--固定行高-->
    17             <RowDefinition Height="50"></RowDefinition>
    18         </Grid.RowDefinitions>
    19 
    20         <Grid.ColumnDefinitions>
    21             <!--按比例列宽-->
    22             <ColumnDefinition Width="*"></ColumnDefinition>
    23             <!--固定列宽-->
    24             <ColumnDefinition Width="200"></ColumnDefinition>
    25         </Grid.ColumnDefinitions>
    26 
    27         <!--定义元素,并指定单元格-->
    28         <TextBlock Grid.Row="0" Grid.Column="0" >第一行第一列</TextBlock>
    29         <TextBlock Grid.Row="1" Grid.Column="0" >第二行第一列</TextBlock>
    30         <TextBlock Grid.Row="2" Grid.Column="0" >第三行第一列</TextBlock>
    31         <Button Grid.Row="0" Grid.Column="1">第一行第二列</Button>
    32         <Button Grid.Row="1" Grid.Column="1">第二行第二列</Button>
    33         <Button Grid.Row="2" Grid.Column="1">第三行第二列</Button>
    34     </Grid>
    35 </Window>
    View Code

    效果图

     单元格合并行或列

     1 <Window x:Class="WPFdemo3.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     6         xmlns:local="clr-namespace:WPFdemo3"
     7         mc:Ignorable="d"
     8         Title="MainWindow" Height="350" Width="525">
     9     <Grid ShowGridLines="True">
    10         <!--定义网格,此处显示了网格线-->
    11         <Grid.RowDefinitions>
    12             <RowDefinition Height="*"></RowDefinition>
    13             <RowDefinition Height="*"></RowDefinition>
    14             <RowDefinition Height="*"></RowDefinition>
    15         </Grid.RowDefinitions>
    16 
    17         <Grid.ColumnDefinitions>
    18             <ColumnDefinition Width="*"></ColumnDefinition>
    19             <ColumnDefinition Width="*"></ColumnDefinition>
    20             <ColumnDefinition Width="*"></ColumnDefinition>
    21         </Grid.ColumnDefinitions>
    22 
    23 
    24         <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">单元格列合并</Button>
    25         
    26         <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">单元格行合并</Button>
    27 
    28     </Grid>
    29 </Window>
    View Code

    效果图:

    二,StackPanel

    默认垂直布局,若想水平,则 设置Orientation="Horizontal"

    1    <StackPanel>
    2             <Button Content="第一个"></Button>
    3             <Button Content="第二个"></Button>
    4             <Button Content="第三个"></Button>
    5             <Button Content="第四个"></Button>
    6     </StackPanel>
    View Code

    效果图:

    ,WrapPanel

    环绕布局,默认从左到右,行距不够,则换行

    1   <WrapPanel Orientation="Horizontal">
    2             <Button Width="100">按钮1</Button>
    3             <Button Width="100">按钮2</Button>
    4             <Button Width="100">按钮3</Button>
    5             <Button Width="100">按钮4</Button>
    6             <Button Width="100">按钮5</Button>
    7             <Button Width="100">按钮6</Button>
    8    </WrapPanel>
    View Code

    效果图:

     手动设置垂直环绕

    1 <WrapPanel Orientation="Vertical" Margin="0,0,0,10">
    2             <Button Width="100">按钮1</Button>
    3             <Button Width="100">按钮2</Button>
    4             <Button Width="100">按钮3</Button>
    5             <Button Width="100">按钮4</Button>
    6             <Button Width="100">按钮5</Button>
    7             <Button Width="100">按钮6</Button>
    8         </WrapPanel>
    View Code

    效果图:

     四,DockPanel

     停靠布局,先布先得,

    1  <DockPanel>
    2             <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
    3             <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
    4             <Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
    5             <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
    6             <Button  Content="ButtonTop"></Button>
    7     </DockPanel>
    View Code

     五,Canvas

    上下左右定位布局

    1  <Canvas>
    2             <TextBox Width="100" BorderBrush="Blue"></TextBox>
    3             <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
    4             <Button Height="20" Canvas.Right="10" Canvas.Bottom="10" Content="按钮"></Button>
    5  </Canvas>
    View Code

  • 相关阅读:
    hadoop本地测试命令
    hadoop中文官网
    solr 5.2.1 tomcat 7 配置过程笔记
    很好的hadoop学习博客实际操作训练(旧版本)
    Tomcat7安装配置 for Ubuntu
    Solr with Apache Tomcat
    Linux 权限修改
    Ubuntu Server 下配置静态网络的方法
    Ubuntu Server 下的网络配置
    HBase 1.3(NOSQL) 发布,性能大幅提升
  • 原文地址:https://www.cnblogs.com/anyihen/p/12913287.html
Copyright © 2020-2023  润新知