您的位置：知识库 » .NET技术

WPF 基础到企业应用系列6——布局全接触

作者: 圣殿骑士  发布时间: 2010-08-02 12:02  阅读: 4110 次  推荐: 0   原文链接   [收藏]  
[1] WPF 基础到企业应用系列6——布局全接触
[2] WPF 基础到企业应用系列6——布局全接触
[3] WPF 基础到企业应用系列6——布局全接触
　　六. WrapPanel

　　WrapPanel是一个非常简单的面板，从左至右按顺序位置定位子元素，如果排满断开至下一行。后续排序按照从上至下或从右至左的顺序进行。WrapPanel面板也提供了 Orientation属性设置排列方式，这跟上面的StackPanel基本相似。不同的是WrapPanel会根据内容自动换行。

WrapPanel1

　　要实现的效果如下图（用XAML和C#实现同一效果）： wrappanel

　　XAML代码实现：

<Window
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class="WPFLayoutDemo.WrapPanelDEMO"
   x:Name="Window"
   Title="WrapPanelDEMO"
   WindowStartupLocation="CenterScreen" 
   Width="640" Height="480">
    <WrapPanel Margin="0,0,0,0" Background="White">
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
      <Rectangle Margin="10,10,10,10" Fill ="Azure" Width="60" Height="60"/>
  </WrapPanel>
</Window>

　　C#代码实现：

namespace WPFLayoutDemo
{
   public partial class WrapPanelDEMOCodeBehind
   {
     public WrapPanelDEMOCodeBehind()
    {
       this.InitializeComponent();
       WrapPanel wp = new WrapPanel();
       //把wp添加为窗体的子控件
       this.Content = wp;
      wp.Margin = new Thickness(0, 0, 0, 0);
      wp.Background = new SolidColorBrush(Colors.White);
       //遍历增加Rectangles
       Rectangle r;
       for (int i = 0; i <= 10; i++)
      {
         r = new Rectangle();
         r.Fill = new SolidColorBrush(Colors.Azure);
         r.Margin = new Thickness(10, 10, 10, 10);
         r.Width = 60;
         r.Height = 60;
        wp.Children.Add(r);
      }    
    }
  }
}

　　七. DockPanel

　　DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列。停靠面板其实就是在WinForm类似于Dock属性的元素。DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同侧的元素则按顺序排序，最后一个元素填充这个Panel（这个需要设置LastChildFill属性为 True）。对于在DockPanel中的元素的停靠属性可以通过Panel.Dock的附加属性来设置.

DockPanel1

　　要实现的效果如下图（用XAML和C#实现同一效果）： dockpanel

　　XAML代码实现：

<Window
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class="WPFLayoutDemo.DockPanelDEMO"
   x:Name="Window"
   Title="DockPanelDEMO"
   WindowStartupLocation="CenterScreen"
   Width="640" Height="480">
  <DockPanel Width="Auto" Height="Auto" LastChildFill="True">
    <Rectangle Fill="Beige" Stroke="BlanchedAlmond" Height="180" DockPanel.Dock="Top"/>
    <Rectangle Fill="Azure" Stroke="Orange" />
  </DockPanel>
</Window>

　　C#代码实现：

namespace WPFLayoutDemo
{
   public partial class DockPanelDEMOCodeBehind
   {
     public DockPanelDEMOCodeBehind()
    {
       this.InitializeComponent();
       DockPanel dp = new DockPanel();
       dp.LastChildFill = true;
       dp.Width = Double.NaN;   //这个就相当于在XAML中设置Width="Auto"
       dp.Height = Double.NaN;  //这个就相当于在XAML中设置Height="Auto"
      //把dp添加为窗体的子控件
       this.Content = dp;
       //添加Rectangles
       Rectangle rTop = new Rectangle();
       rTop.Fill = new SolidColorBrush(Colors.BlanchedAlmond);
       rTop.Stroke = new SolidColorBrush(Colors.BlanchedAlmond);
       rTop.Height = 180;
       dp.Children.Add(rTop);
       rTop.SetValue(DockPanel.DockProperty,Dock.Top);
       Rectangle rFill = new Rectangle();
       rFill.Fill = new SolidColorBrush(Colors.Azure);
       rFill.Stroke = new SolidColorBrush(Colors.Azure);
       dp.Children.Add(rFill);
    }
  }
}

　　八. Grid

　　Grid和其他各个Panel比较起来，功能最多也最为复杂，它由<Grid.ColumnDefinitions>列元素集和<Grid.RowDefinitions>行元素集合两种元素组成。而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行和列，否则元素均默认放置在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起来就很精细了。

　　Grid的列宽与行高可采用固定、自动、按比列三种方式定义 

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="40"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="300"/>
  </Grid.ColumnDefinitions>
</Grid>

　　第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。
　　第二种，自动长度——自动匹配列中最长元素的宽度。
　　第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

　　跨越多行和多列

　　<Rectangle Fill="Silver" Grid.Column="1" Grid.ColumnSpan="3"/>

　　使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并，所以元素也可以跨越多个单元格。

　　使用GridSplit分割

<GridSplitter Height="6" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
        Grid.Row="2" Grid.Column="2"></GridSplitter>

　　使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能，这个大家在WinForm当中经常用到，我们也不多做介绍。

Grid1

　　要实现的效果如下图（用XAML和C#实现同一效果）： grid

　　XAML代码实现：

<Window
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class="WPFLayoutDemo.GridDEMO"
   x:Name="Window"
   Title="GridDEMO"
   WindowStartupLocation="CenterScreen"
   Width="640" Height="480">
  <Grid Width="Auto" Height="Auto"> 
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="139"/>
      <ColumnDefinition Width="184*"/>
      <ColumnDefinition Width="45*"/>
      <ColumnDefinition Width="250*"/>
    </Grid.ColumnDefinitions>
     
    <Rectangle Fill="Azure" Grid.ColumnSpan="2" Margin="0,0,21,0"/>
    <Rectangle Fill="Silver" Grid.Column="1" Grid.ColumnSpan="3"/>
  </
Grid>
</Window>

　　C#代码实现：

namespace WPFLayoutDemo
{
   public partial class GridDEMOCodeBehind
   {
     public GridDEMOCodeBehind()
    {
       this.InitializeComponent();
       Grid grid = new Grid();
       grid.Width = Double.NaN;   //这个就相当于在XAML中设置Width="Auto"
       grid.Height = Double.NaN;  //这个就相当于在XAML中设置Height="Auto"
      //把grid添加为窗体的子控件
       this.Content = grid;
       //列一
       ColumnDefinition cd1 = new ColumnDefinition();
       cd1.Width = new GridLength(139);
       grid.ColumnDefinitions.Add(cd1);
       //列二
       ColumnDefinition cd2 = new ColumnDefinition();
       cd2.Width = new GridLength(1, GridUnitType.Star);
       grid.ColumnDefinitions.Add(cd2);
       //列三
       ColumnDefinition cd3 = new ColumnDefinition();
       cd3.Width = new GridLength(2, GridUnitType.Star);
       grid.ColumnDefinitions.Add(cd3);
       //把单元格添加到grid中
       Rectangle r1c1 = new Rectangle();
       r1c1.Fill = new SolidColorBrush(Colors.Azure);
       r1c1.SetValue(Grid.ColumnProperty, 0);
       r1c1.SetValue(Grid.RowProperty, 0);
       grid.Children.Add(r1c1);
       Rectangle r1c23 = new Rectangle();
       r1c23.Fill = new SolidColorBrush(Colors.Silver);
       r1c23.SetValue(Grid.ColumnProperty, 1);
       r1c23.SetValue(Grid.ColumnSpanProperty, 2);
       grid.Children.Add(r1c23);
    }
  }
}

　　九 UniformGrid

　　介绍了前面的Grid,接下来的这个UniformGrid 就太简单了，均布网格的是Grid的简化版本，每个单元格的大小相同，不用在定义行列集合。均布网格每个单元格只能容纳一个元素，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。

UniformGrid1

　　要实现的效果如下图（用XAML和C#实现同一效果）： uniformgrid

　　XAML代码实现：

<Window x:Class="WPFLayoutDemo.UniformGridDEMO"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="UniformGridDEMO" Height="300" Width="300">
  <UniformGrid Columns="2" Rows="2" Name="uniformGrid1">
    <Rectangle Margin="10,10,10,10" Fill ="Gray"/>
    <Rectangle Margin="10,10,10,10" Fill ="Gray"/>
    <Rectangle Margin="10,10,10,10" Fill ="Gray"/>
    <Rectangle Margin="10,10,10,10" Fill ="Gray"/>
  </UniformGrid>
</Window>

　　C#代码实现：

namespace WPFLayoutDemo
{
   public partial class UniformGridDEMOCodeBehind : Window
   {
     public UniformGridDEMOCodeBehind()
    {
       InitializeComponent();
       UniformGrid wp = new UniformGrid();
       //把wp添加为窗体的子控件
        this.Content = wp;
      wp.Margin = new Thickness(0, 0, 0, 0);
      wp.Background = new SolidColorBrush(Colors.White);
       //遍历增加Rectangles
       Rectangle r;
       for (int i = 0; i <= 10; i++)
      {
         r = new Rectangle();
         r.Fill = new SolidColorBrush(Colors.Gray);
         r.Margin = new Thickness(10, 10, 10, 10);
        wp.Children.Add(r);
      }
    }
  }
}

　　十. ViewBox

　　ViewBox这个控件通常和其他控件结合起来使用，是WPF中非常有用的控制。定义一个内容容器，该容器可拉伸和缩放单个子元素以填满可用空间。一个 Viewbox只能具有一个 Child。如果添加一个附加 Child，会导致一个运行时 ArgumentException错误。我们用得最多的首先是Stretch属性，然后是StrctchDirection属性，关于这两个元素，大家可以运行我们的代码，然后改变设置就可以看到效果。

ViewBox1

　　要实现的效果如下图（用XAML和C#实现同一效果）： viewbox

　　XAML代码实现：

<Window x:Class="WPFLayoutDemo.ViewBoxDemo"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="ViewBoxDemo" Height="342" Width="535">
  <Viewbox Stretch="Uniform">
    <Button Content="Hello,Knights Warrior"/>
  </Viewbox>
</Window>

　　C#代码实现：

namespace WPFLayoutDemo
{
   public partial class ViewBoxDEMOBehind : Window
   {
     public ViewBoxDEMOBehind()
    {
       this.InitializeComponent();
       Viewbox vb = new Viewbox();
      vb.Stretch = Stretch.Uniform ;
       //把vb添加为窗体的子控件
       this.Content = vb;
       //Button1
       Button b1 = new Button();
       b1.Content = "Hello,Knights Warrior";
      vb.Child=b1;
    }
  }
}

后退<<上一页 　继续>>下一页
[第1页][第2页][第3页]
0
0
标签：WPF 布局

推荐链接

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻