Applications=Code+Markup 读书笔记之六-七 Dock、Grid、Canvas

1 DockPanel
  DockPanel dock = new DockPanel();
  设置控件在DockPanel的位置：
    DockPanel.SetDock(ctl,Dock.Right);
  等同于：ctl.SetValue(DockPanel.DockProperty,Dock.Right);

 

namespace Petzold.MeetTheDockers
{
    public class MeetTheDockers : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new MeetTheDockers());
        }
        public MeetTheDockers()
        {
            Title = "Meet the Dockers";

            DockPanel dock = new DockPanel();
            Content = dock;

            // 建立菜单
            Menu menu = new Menu();
            MenuItem item = new MenuItem();
            item.Header = "Menu";
            menu.Items.Add(item);

            // 将菜单Dock在面板顶端
            DockPanel.SetDock(menu, Dock.Top);
            dock.Children.Add(menu);

            // 建立工具栏
            ToolBar tool = new ToolBar();
            tool.Header = "Toolbar";

            // 将工具栏Dock在面板顶端
            DockPanel.SetDock(tool, Dock.Top);
            dock.Children.Add(tool);

            // 建立状态栏
            StatusBar status = new StatusBar();
            StatusBarItem statitem = new StatusBarItem();
            statitem.Content = "Status";
            status.Items.Add(statitem);
            
            //将状态栏Dock在面板底端
            DockPanel.SetDock(status, Dock.Bottom);
            dock.Children.Add(status);

            // 建立ListBox
            ListBox lstbox = new ListBox();
            lstbox.Items.Add("List Box Item");

            // 将ListBox放在面板左边
            DockPanel.SetDock(lstbox, Dock.Left);
            dock.Children.Add(lstbox);

            // 建立TextBox
            TextBox txtbox = new TextBox();
            txtbox.AcceptsReturn = true;

            
            dock.Children.Add(txtbox);
            txtbox.Focus();
        }
    }
}

 

2 Grid
  面板布局常用，在XAML里更方便布局。
2.1 设置行列
   Grid grid = new Grid();
   // 设置行
   RowDefinition rowdef = new RowDefinition();
   rowdef.Height = GridLength.Auto;
   grid.RowDefinitions.Add(rowdef);
   // 设置列
   ColumnDefinition coldef = new ColumnDefinition();
   coldef.Width = GridLength.Auto;
   grid.ColumnDefinitions.Add(coldef);
   设置行列的尺寸 GridLength(). 可以是Pixel，Auto，Star。
   如：new GridLength(50,GridunitType.Pixel);
       new GridLength(50,GridunitType.Star);
 
2.2 实现分割线(splitter)
  在代码中实现如： GridSplitter splitter = new GridSplitter();   splitter.Width = 10;    grid.Children.Add(splitter);
  在XAML中实现如：  <GridSplitter Focusable="False" Width="2" Background="LightGray" VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
  splitter可以和其他元素在同一个单元格，但最好单独的放置在一个单元格中，容易控制面板的布局。
  splitter.HorizontalAlignment = HorizontalAlignment.Right;//默认，在单元格右边，移动时改变所在及右边的单元格宽度
  splitter.HorizontalAlignment = HorizontalAlignment.Left;//改变所在列及左边的单元格宽度
  splitter.HorizontalAlignment = HorizontalAlignment.Center;//不改变所在列的单元格宽度，而是改变两边的单元格宽度
  垂直分割线
  split.HorizontalAlignment = HorizontalAlignment.Center;
  split.VerticalAlignment = VerticalAlignment.Stretch;
  水平分割线：
  splitter.VerticalAlignment = VerticalAlignment.Center;
  splitter.HorizontalAlignment = HorizontalAlignment.Stretch;

 

   public SplitTheClient()
    {
        Title = "Split the Client";

        // Grid with vertical splitter.
        Grid grid1 = new Grid();
        grid1.ColumnDefinitions.Add(new ColumnDefinition());
        grid1.ColumnDefinitions.Add(new ColumnDefinition());
        grid1.ColumnDefinitions.Add(new ColumnDefinition());
        grid1.ColumnDefinitions[1].Width = GridLength.Auto;
        Content = grid1;

        // Button at left of vertical splitter.
        Button btn = new Button();
        btn.Content = "Button No. 1";
        grid1.Children.Add(btn);
        Grid.SetRow(btn, 0);
        Grid.SetColumn(btn, 0);

        // Vertical splitter.
        GridSplitter split = new GridSplitter();
        split.ShowsPreview = true;
        split.HorizontalAlignment = HorizontalAlignment.Center;
        split.VerticalAlignment = VerticalAlignment.Stretch;
        split.Width = 6;
        grid1.Children.Add(split);
        Grid.SetRow(split, 0);
        Grid.SetColumn(split, 1);

        // Grid with horizontal splitter.
        Grid grid2 = new Grid();
        grid2.RowDefinitions.Add(new RowDefinition());
        grid2.RowDefinitions.Add(new RowDefinition());
        grid2.RowDefinitions.Add(new RowDefinition());
        grid2.RowDefinitions[1].Height = GridLength.Auto;
        grid1.Children.Add(grid2);
        Grid.SetRow(grid2, 0);
        Grid.SetColumn(grid2, 2);

        // Button at top of horizontal splitter.
        btn = new Button();
        btn.Content = "Button No. 2";
        grid2.Children.Add(btn);
        Grid.SetRow(btn, 0);
        Grid.SetColumn(btn, 0);

        // Horizontal splitter.
        split = new GridSplitter();
        split.ShowsPreview = true;
        split.HorizontalAlignment = HorizontalAlignment.Stretch;
        split.VerticalAlignment = VerticalAlignment.Center;
        split.Height = 6;
        grid2.Children.Add(split);
        Grid.SetRow(split, 1);
        Grid.SetColumn(split, 0);

        // Bottom at bottom of horizontal splitter.
        btn = new Button();
        btn.Content = "Button No. 3";
        grid2.Children.Add(btn);
        Grid.SetRow(btn, 2);
        Grid.SetColumn(btn, 0);
    }

 

3、Canvas
越早加入Children Collection的Element会出现在越下层。适合显示图形，以及进行鼠标驱动的绘图。
在我做的界面设计器中，画布就是继承于Canvas，通过重载OnMouseMove、OnMouseDown等事件 实现元素的选中、拖动、摆放等功能。
 Rectangle rect = new Rectangle();
 rect.Width = canv.Width;
 rect.Height = canv.Height;
 rect.RadiusX = 24;
 rect.RadiusY = 24;
 rect.Fill = Brushes.Blue;
 canv.Children.Add(rect);
 
 注：Dock、Grid、Canvas、UniformGrid等类的Children的类型是UIElementCollection，UIElementCollection提供了几个很有用的函数，
 如Add，Insert，IndexOf，Remove，RemoveAt,RemoveRange等，方便子元素的添加删除等操作。