WPF分割条应用要点解析

在WPF窗口布局中,我们经常要用到窗口的分割,这篇文章主要是介绍怎样用GridSpliter分割窗口。GridSpliter主要是用在布局控件GRID中,指定要分割的位置,第几行,第几列就可以实现格子的分割了。#t#

既然要做到划分总个窗体,我们需要把格子的高和宽同窗口的实际高和宽绑定在一起,以此来实现总个窗体的分割。
以下是用XAML写的一段WPF分割条代码:

  1. < Page   
  2. xmlns="http://schemas.microsoft
    .com/winfx/2006/xaml/presentation"
       
  3. xmlns:sys="clr-namespace:System;
    assembly=mscorlib"
       
  4. xmlns:x="http://schemas.microsoft.
    com/winfx/2006/xaml"
     Name ="myWnd">   
  5. < Page.Resources> 
  6. < Style TargetType ="{x:Type Border}">   
  7. < Setter Property ="BorderThickness" 
    Value ="1"/> 
  8. < Setter Property ="BorderBrush" 
    Value ="Black"/>   
  9. < /Style> 
  10. < /Page.Resources> 
  11. < !--首先,我们绑定格子的高和宽同窗口一样大--> 
  12. < Grid Background="White"   
  13. Width ="{Binding Path=ActualWidth ,
    ElementName=myWnd}"
       
  14. Height="{Binding Path=ActualHeight ,
    ElementName=myWnd}"
     
  15. HorizontalAlignment="Left" 
  16. VerticalAlignment="Top" 
  17. ShowGridLines="False"> 
  18.  
  19. < Grid.RowDefinitions> 
  20. < RowDefinition Height="*" /> 
  21. < !--因为WPF分割条也是对象,要占用一行--> 
  22. < RowDefinition Height="Auto" /> 
  23. < RowDefinition Height="*" /> 
  24. < /Grid.RowDefinitions> 
  25. < Grid.ColumnDefinitions> 
  26. < ColumnDefinition Width="*" /> 
  27. < !--因为分割条也是对象,要占用一列--> 
  28. < ColumnDefinition Width="Auto" /> 
  29. < ColumnDefinition Width="*" /> 
  30. < /Grid.ColumnDefinitions> 
  31. < Border Grid.Column="0" Grid.Row="0" /> 
  32. < Border Grid.Column="0" Grid.Row="2" /> 
  33. < Border Grid.Column="2" Grid.Row="0" /> 
  34. < Border Grid.Column="2" Grid.Row="2" /> 
  35. < !--此处GridSplitter 要占用三列--> 
  36. < GridSplitter Grid.Row="1" 
    Grid.Column="0" Grid.ColumnSpan="3" 
  37. HorizontalAlignment="Stretch" 
  38. VerticalAlignment="Center" 
  39. Height="1" 
  40. /> 
  41. < !--此处GridSplitter 要占用三行--> 
  42. < GridSplitter Grid.Row="0"
     Grid.Column="1" Grid.RowSpan="3" 
  43. HorizontalAlignment="Center" 
  44. VerticalAlignment="Stretch" 
  45. Width="1" 
  46. /> 
  47. < /Grid> 
  48. < /Page> 

WPF分割条使用注意:竖直分割与水平分割时一定要区分HorizontalAlignment,VerticalAlignment的设置。

THE END