[Aaronyang] 写给自己的WPF4.5 笔记[1布局]

2022-07-30 15:11:12

挫折时，要像大树一样，被砍了，还能再长；也要像杂草一样，虽让人践踏，但还能勇敢地活下去 --Aaronyang的博客（www.ayjs.net）-www.8mi.me

=============时隔两年后再看WPF==========

因为以前的经验，所以继承FrameworkElement，我就简写继承FWE ，继承UIElement就写继承UIE

复习曲线记录-布局

1. 了解Panel，继承Panel的WPF提供的一些核心布局控件

StackPanel、WrapPanel、DockPanel、Grid、UniformGrid、Canvas，当然还有其他的，例如TabPanel，ToolbarPanel、ToolbarOverflowPanel、VirutalizingStackPanel、InkCanvas

2. 复习核心布局的使用，简单描述

StackPanel：堆在一起，横着堆，竖着堆，调整方向 Orientation

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">
    <Border BorderBrush="#FFD81C1C" BorderThickness="1" CornerRadius="4"  Margin="30">
    <StackPanel Orientation="Vertical">
        <TextBlock TextWrapping="Wrap" Text="一些按钮在StackPanel里面"/>
        <Button Content="Button" Height="88.24" Margin="0,0,0,0" HorizontalAlignment="Left" Width="153.887"/>
        <Button Content="Button" Height="88.24" Margin="0,0,0,0" HorizontalAlignment="Right"/>
        <Button Content="Button" Height="88.24"/>
        <Button Content="Button" Height="88.24"/>
        
    </StackPanel>
    </Border>
</Window>

aaronyang stack简单例子

WrapPanel：可换行的横着堆，竖着堆

DockPanel：边缘放置元素. 使用DockPanel.Dock="Top/Bottom/Left/Right" LastChildFill="true/false"，最后一个元素占满剩余空间，注意理解顺序

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.Window2"
    x:Name="Window"
    Title="Window2"
    Width="640" Height="480">

    <DockPanel x:Name="LayoutRoot" LastChildFill="True">
        <Button Content="顶部" Height="40" DockPanel.Dock="Top" />
    <StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
        <Button Content="确认" Width="120" Margin="10"/>
        <Button Content="取消" Width="120" Margin="10" />
    </StackPanel>
        <Button Content="左边" Width="40" DockPanel.Dock="left" />
        <Button Content="右边" Width="40" DockPanel.Dock="right" />
        <!--<Button Content="顶部" Height="40" DockPanel.Dock="Top" />
        <Button Content="右边" Width="40" DockPanel.Dock="right" />
        <Button Content="底部" Height="40" DockPanel.Dock="bottom" />
        <Button Content="左边" Width="40" DockPanel.Dock="left" />-->
        <Button Content="中间"/>
    </DockPanel>
</Window>

aaronyang dockpanel例子

Grid：网页的table

UniformGrid：特殊的Grid，所有单元格相同尺寸。

Canvas：跟html5的canvas很像，也可以像winform那样基于坐标布局

继承FWE，所有有FWE的公用基本属性

3. 附加属性-第一印象

比如容器的元素 Grid.Row或者 Grid.Column， Grid.Row="" Grid.Column=""

4.对比html的float，对比border,其他的属性

容器中元素，使用HorizontalAlignment="Center/Left/Right"

在后台设置x.Margin = new Thickness(值)，MinWidth,MaxWidth

前台border控件：装饰元素，来自 System.Windows.Controls.Decorator

5.分隔GridSplitter

还有ShowsPreview="True" 拖拽不会立即调整，鼠标释放调整 DragIncrement="10"每次拖拽幅度

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.Window3"
    x:Name="Window"
    Title="Window3"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" ShowGridLines="false">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" MinHeight="100"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" MinHeight="60"/>
        </Grid.RowDefinitions>
        <TextBlock Margin="3" Text="测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈测试一段文字哈哈哈哈哈哈哈哈哈啊哈哈哈哈" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"></TextBlock>
        <GridSplitter Grid.Row="1" ShowsPreview="True" DragIncrement="10" VerticalAlignment="Center" HorizontalAlignment="Stretch" Height="5" Background="Blue" Grid.ColumnSpan="3"/>
        <Button Margin="10,10,2,10" Grid.Row="2" Grid.Column="1" Padding="3">测试地点</Button>
        <Button Margin="10,10,2,10" Grid.Row="2" Grid.Column="2" Padding="3">测试地点</Button>
    </Grid>
</Window>

6.Grid中的共享尺寸，设置列的 SharedSizeGroup，顶部容器加上Grid.IsSharedSizeScope="True"

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.Window4"
    x:Name="Window"
    Title="Window4"
    Width="1000" Height="480">
    <StackPanel Grid.IsSharedSizeScope="True">
        <Grid x:Name="LayoutRoot_grid1" ShowGridLines="True" Background="Cornsilk">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="abc"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Margin="5">ceshishisshw一段文本很长的文章决定了房价爱你撒地方阿萨帝发交水电费撒旦济南房价阿斯顿浪费</Label>
            <Label Grid.Column="1" >moretext</Label>
            <Label Grid.Column="2" Margin="2">而是大家拉萨的房间里的刷卡费</Label>
        </Grid>
    
        <Grid x:Name="LayoutRoot_grid2" ShowGridLines="True" Background="Azure">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="abc"/>
                <ColumnDefinition/>
        
            </Grid.ColumnDefinitions>
            <Label Margin="5">房价阿斯顿浪费</Label>
            <Label Grid.Column="1" >moretext</Label>
        </Grid>
    
    </StackPanel>
    
</Window>

效果：

7.UniformGrid 规则的Grid

            <UniformGrid Rows="2" Height="100" Grid.Column="2" Margin="2" >
                <Button Width="100" Height="40">我是第1个</Button>
                <Button Width="100" Height="40">我是第2个</Button>
                <Button Width="100" Height="40">我是第3个</Button>
                <Button Width="100" Height="40">我是第4个</Button>
           </UniformGrid>

UniformGrid

类似于这种，用于快速创建grid，几乎不怎么用

8.Canvas的坐标定位，容器内元素使用Canvas.Top/Bottom/Left/Right ，ClipToBounds=true

Canvas.ZIndex类似于html的z-index。后台调整Canvas.SetZIndex

9. InkCanvas 个人觉得做高级开发，离不开他。它直接派生FWE类，为什么我这么提继承什么类，因为后面用的着。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.InkCanvas"
    x:Name="Window"
    Title="InkCanvas"
    Width="1040" Height="480">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <Button Content="调整控件" HorizontalAlignment="Left" Height="40" Width="180" />
        </StackPanel>
        <InkCanvas Name="ink1" Background="LightYellow" EditingMode="Ink">
            <Image Source="res/1.jpg" InkCanvas.Top="40" InkCanvas.Left="20" Width="600" Height="400"></Image>
        </InkCanvas>
    </StackPanel>
   
</Window>

此时运行项目，就可以在屏幕上画了，包括在inkcanvas上的图片上画，接下来熟悉一下其他属性。我的项目跟这个控件很有关系，所以肯定跟他的文章很多，其中有个功能跟vs2013很像的功能，拖控件，然后可以调整大小，位置，调整属性，然后保存项目。有时间写个demo，再分享，不然都是虚的。

我们看看EditingMode的属性，每一种都有对应的事件。

1、Ink（EditingMode的默认值） —— 通过鼠标或者指示笔来绘制笔画。
2、InkAndGesture —— 和Ink一样，但同样可以识别用户的手势。手势的列表（Up、Down、Circle、ScratchOut和Tap）保存在System.Windows.Ink.ApplicationGesture枚举类型中。
3、GestureOnly —— 只识别手势，不会绘制用户输入的笔画。
4、EraseByStroke （EditingModeInverted的默认值）—— 当笔画被触及时将笔画擦掉。
5、EraseByPoint —— 只擦掉直接碰及到的笔画部分（就像传统的铅笔橡皮）。
6、Select —— 当被触及时，选择笔画或者任何UIElement，使它们能被删除、移动或者在InkCanvas范围内被调整尺寸。
7、None —— 对于鼠标或者指示笔不做任何响应。

我个人对Select很感兴趣，下面增加一个下拉框吧，调整EditingMode

①我们在后台代码，添加下拉框的值

    public InkCanvas()
        {
            this.InitializeComponent();
            
            // 在此点之下插入创建对象所需的代码。
            foreach (InkCanvasEditingMode mode in Enum.GetValues(typeof(InkCanvasEditingMode)))
            {
                cboSelect.Items.Add(mode);
                cboSelect.SelectedItem = ink1.EditingMode;
            }
        }

②为了演示select的效果，我们放一个 UIElement的元素，例如Button，inkcanvas已经包括了一个Image，同样也可以调整大小。接下来顺便设置inkcanvas的EditingMode的数据绑定，因为简单的数据切换，直接在前台就能完成了。竟然第一次演示手动数据绑定，就图形化吧，当然你熟悉了，手写会更快

第一步，选中InkCanvas

第二步，单击后，选择创建数据绑定，然后绑定类型，选择 ElementName

第三步，选择EditingMode的值要绑定的元素的值，我们选择 StackPanel中的cboSelect,然后选择路径下的 SelectedItem,接下点击确定

这只是一个简单最常用的绑定，如果你想根据其他的变化，而让元素变化，最后做到手动记忆，因为在自定义样式和模板时候，你绑定元素，可是没有可视化工具给你的，记住

<InkCanvas x:Name="ink1" Background="LightYellow" EditingMode="{Binding SelectedItem, ElementName=cboSelect}">

OK，这是我们接触的第一个数据绑定的地方，这种写法，一定要做到记忆级别的。

好了，接下来，我把inkcanvas的前台的代码，全部放在了下面。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="blend1.InkCanvas"
    x:Name="Window"
    Title="InkCanvas"
    Width="1040" Height="480">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
           
            <TextBlock Text="EditingMode" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
            <ComboBox Name="cboSelect" Height="22" Width="141">
            </ComboBox>
        </StackPanel>
        <InkCanvas x:Name="ink1" Background="LightYellow" EditingMode="{Binding SelectedItem, ElementName=cboSelect}">
            <Image Source="res/1.jpg" InkCanvas.Top="0" InkCanvas.Left="50" Width="600" Height="400"/>
            <Button Content="调整控件" InkCanvas.Top="10" InkCanvas.Right="50"  Height="40" Width="180"/>
        </InkCanvas>
    </StackPanel>
   
</Window>

Inkcanvas

10. 其他布局解释

例1：

        <Grid.ColumnDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.ColumnDefinitions>

疑难解答： 3行，第一行和第三行根据内容定义了高度，然后*号代表，占满剩余空间

如果内容出现 1*,4* 就代表后面一列的宽或者高是前面一列或者行的 4倍高或宽

例2：

Visibility是UIE(UIElement我自己定义的简写)基类的一部分，所以所有继承UIE的控件都有这个属性，所以我强调控件继承什么父类。Inkcanvas已经潜在的强调了，因为他的select只可以选择继承UIE的控件，然后进一步的操作。

3个值：Visible可见，Collapsed元素隐藏，不占用空间，Hidden元素隐藏，但占用空间，显示空白。

11 布局还有一些很常用的，例如 ScrollViewer、TabItem以及Expander控件。ViewBox，还有文本控件，office里面经常看到。

个人对ScrollViewer很有感觉，因为滚动条的美观很影响感觉，很想DIY一把

======安徽六安=========www.ayjs.net==========aaronyang========杨洋========www.8mi.me==========

[Aaronyang] 写给自己的WPF4.5 笔记[1布局]

码农公寓

挫折时，要像大树一样，被砍了，还能再长；也要像杂草一样，虽让人践踏，但还能勇敢地活下去 --Aaronyang的博客（www.ayjs.net）-www.8mi.me

相关文章