WPF布局学习总结

WPF布局学习总结

模仿效果

今天系统学习了一下WPF的布局，模仿做了一个粗糙的CSDN主页，效果如图：

布局Control总结

用简短的话来概括精髓

布局原则

控件的Weight、Height除非需要，不要显示设置，灵活为上，更是为了自适应。

StackPanel

堆栈面板，占据一行或一列的时候使用

属性Orientation（方向），使内嵌所有子元素水平或竖直排列

WrapPanel

环绕面板，功能完全可替代StackPanel

不同的是，如果案例中右上角“搜索”后面还有元素，则会排列到第二行（IOS开发图片那行）

DockPanel

停靠面板，专门用于自适应（WinForm的人知道Dock）

内嵌所有子元素可以使用DockPlane.Dock.……来点出来上下左右四个方向来布局

最后一个元素填充剩余空间，需要在DockPlane上设置LastChildFill = false;

Grid

1.最复杂，设置Row和Colum来布局

<!--定义列 2列--> 
 <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="80"/>
     <ColumnDefinition/>
 </Grid.ColumnDefinitions> 
 <!--定义行 3行--> 
 <Grid.RowDefinitions> 
     <RowDefinition Height="100"/>
     <RowDefinition />
     <RowDefinition />
 </Grid.RowDefinitions>

1-1设置Row和Colum的尺寸有三种方式

<ColumnDefinition Width="80"/>  显示设置
<ColumnDefinition Width="Auto"/>设置自动
<ColumnDefinition Width="*"/>   等比例缩放（2*、3*）

1-2跨越行和列

假如我有一个5行3列的Grid，里面有个Button想填充前两3行2列，点出来Grid的属性来设置

<Button Grid.Row = 0 //从0行开始是第一行
        Grid.RowSpan = 3  //跨越3行
        Grid.Row = 0 //从0列开始是第一列
        Grid.ColumSpan = 2 //跨越2列

1-3尺寸共享（技巧）

我有两个Burton，在5行3列的Grid中，要求第一个Button在第一行第一列，第二个Button在第二行第一列，除了位置不同，尺寸是相同的

<Button Grid.Row = 0 Grid.Row = 0 />
<Button Grid.Row = 1 Grid.Row = 0 />
在设置Grid的行列尺寸处设置
 <!--定义行的地方--> 
 <Grid.RowDefinitions> 
     <RowDefinition Height="*" SharedSizeGruop= "设置一个名字"/>
     <RowDefinition Height="*" SharedSizeGruop ="和设置的名字一样便共享"/>

1-4设置行列不用写代码，直接拖（技巧）

新建项目的时候自带的是Grid，鼠标移到界面的上边框或者左边框的时候，鼠标变成三角，你在上部点一下，就是设置一列，在点一下就是设置一列，xaml的代码都省的你写了，行业一样

2.布局舍入

假如你的窗体尺寸是600,800，Grid自适应也是600,800，如果你设置了三行，等比例缩放是：,4：2*，就是1:4:2，但是行总长是600，无法整除7，所以在相邻行的地方是模糊的，因为WPF采用的是反锯齿的功能，在Grid处设置UseLayoutRounding = True关闭反锯齿

Canvas

1.更精确的布局，内嵌子元素可以设置Canvas.Left或者是上右下，就是距离Canvas的距离

2.内嵌子元素可以设置层次, ZIndex，默认是0，在Canvas中两个重叠的控件，Zindex大的显示，小的被遮住（这个属性是点不出来的）

InkCanvas

这个特别有意思，应该都玩过电脑自带附件中的画图工具吧，小时候玩的很嗨，这个控件就是简单的画图，也算是一个布局

1.这个控件在工具箱里找不出来，只能自己写

2.布局功能：放在这个控件中的子元素，也有Canvas的.Left……

还有在InkCanvas 的EditingMode设置为Select，可以在运行的时候修改子元素的尺寸以及删除，还是贴代码吧

<InkCanvas EditingMode="Select" >
   <Button Content="按钮" InkCanvas.Left="100" InkCanvas.Top="100"/>
</InkCanvas>

效果图：


子元素一个按钮初始尺寸


选中时的样子


拖拉后的样子

3.画笔功能：

属性EditingMode =

Ink 正常画画

None 不支持画笔功能

EraseByPoint 像画画中的橡皮一样（左键变成橡皮咯）

EraseByStroke 删除笔画（你画了两下，用一下，就剩下第一笔了）

GestureOnly 画画后左键释放就不保留画的内容

附效果图一张：

结尾

每个控件有三个属性，布局时合理使用，

Marin设置四个方向的间隔 Margin=“0,0,0,0”

VerticalAlignment 垂直方向对齐

HorizontalAlignment水平方向对齐

像布局这些东西，还是自己去试试去玩玩，就心里有数了，别人玩呢，还是别人玩。

推荐一篇博文：http://www.cnblogs.com/hegezhou_hot/archive/2012/10/23/2735874.html

模仿代码

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--登录-->
        <StackPanel Grid.Column="1"  Grid.Row="0" HorizontalAlignment="Right" Orientation="Horizontal" Grid.ColumnSpan="2">
            <Label  Content="您还未登录！"/>
            <Button Content="登录"/>
            <Button Content="注册"/>
            <Button Content="帮助"/>
            <Button Content="搜索"/>
        </StackPanel>
        <!--图片1-->
        <Grid Grid.Row="1" Grid.ColumnSpan="3" Grid.Column="0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="172*"/>
                <ColumnDefinition Width="225*"/>
            </Grid.ColumnDefinitions>
            <Image  Source="01.PNG" Grid.ColumnSpan="2" Margin="0,0,-0.4,0.2" />
        </Grid>
        <!--图片2-->
        <Grid Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="0" >
            <Image  Source="02.PNG" />
        </Grid>
        <!--业界一排按钮-->
        <DockPanel Grid.Row="3" Grid.Column="0"  >
            <Button Content="业界" Background="Red" Foreground="White"/>
            <Button Content="云计算" Background="Red" Foreground="White"/>
            <Button Content="移动" Background="Red" Foreground="White"/>
            <Button Content="研发" Background="Red" Foreground="White"/>
        </DockPanel>
        <DockPanel Grid.Row="3" Grid.Column="1">
            <Button Content="学院" Background="Red" Foreground="White"/>
            <Button Content="论坛" Background="Red" Foreground="White"/>
            <Button Content="博客" Background="Red" Foreground="White"/>
            <Button Content="下载" Background="Red" Foreground="White"/>
            <Button Content="问答" Background="Red" Foreground="White"/>
            <Button Content="ITeye" Background="Red" Foreground="White"/>
            <Button Content="商城" Background="Red" Foreground="White"/>
        </DockPanel>
        <DockPanel Grid.Row="3" Grid.Column="2">
            <Button Content="CODE" Background="Red" Foreground="White"/>
            <Button Content="活动" Background="Red" Foreground="White"/>
            <Button Content="JOB" Background="Red" Foreground="White"/>
            <Button Content="CTO" Background="Red" Foreground="White"/>
            <Button Content="年费会员" Background="Red" Foreground="White"/>
            <Button Content="外包" Background="Red" Foreground="White"/>
            <Image  Source="03.PNG"/>
        </DockPanel>
        <!--学院一排按钮-->
        <DockPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" >
            <Button Content="学院" />
            <Button Content="线下培训" />
            <Button Content="Java" />
            <Button Content="IOS" />
            <Button Content="C/C++" />
            <Button Content="游戏开发" />
            <Button Content="PHP" />
            <Button Content="Azure" />
            <Button Content="H3C" />
            <Button Content="华为云计算" />
            <Button Content="英特尔软件" />
            <Button Content="IBM大学" />
            <Button Content="异构开发" />
            <Button Content="AWS" />
            <Button Content="Qualcomm" />
            <Button Content="腾讯云" />
            <Button Content="容联" />
            <Button Content="高校" />    
        </DockPanel>
        <!--内容-->
        <DockPanel Grid.Row="6" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2" >
            <StackPanel DockPanel.Dock="Left" Width="299">
                <StackPanel>
                    <Image Source="04.PNG" />
                    <Label Content="递归神经网络不可思议的有效性" FontSize="20" FontWeight="Bold"/>
                    <Label Content="许多人认为递归神经网络（RNN）非常难训练，但作者经过一年多的训练，多次
                           见证了RNN的强大功能和撸棒性，输出结果同样有趣。本文将展现RNN不可思议的地方" FontSize="8"/>
                </StackPanel>
                <StackPanel>
                    <Label Content="硬件创业必算的一本账"/>
                    <Label Content="HTC股票的暴跌与Android生态的危机重重"/>
                </StackPanel>
            </StackPanel>
            <StackPanel >
                <Label Content="开发移动应用的7大设计要点" Margin="0,0,0,5" FontSize="14"/>
                <Label Content="---------------------------------" Margin="0,0,0,5"/>
                <Label Content="声明：Google Drive将停止支持网" FontSize="14"/>
                <Label Content="站托管" Margin="0,0,0,5" FontSize="14"/>
                <Label Content="---------------------------------" Margin="0,0,0,5"/>
                <Label Content="开发者经验谈：如何一天时间搞定" FontSize="14"/>
                <Label Content="IOS游戏开发？" Margin="0,0,0,5" FontSize="14"/>
                <Label Content="---------------------------------" Margin="0,0,0,5"/>
                <Label Content="[技术公开课]送给迷茫的你：与迷茫"  FontSize="14"/>
                <Label Content="相伴的IT成长路" Margin="0,0,0,5"  FontSize="14"/>
            </StackPanel>

        </DockPanel>
        <StackPanel Grid.Row="6" Grid.Column="2" Grid.RowSpan="2">
            <Image Source="05.PNG"/>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
                 <Label Content="快速入口"/>
                 <Label Content="定制你的个性CSDN内容" Margin="70,0,0,0"/>
            </StackPanel>

        </StackPanel>
        <!--结尾-->
        <StackPanel Orientation="Vertical" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" >
            <StackPanel Orientation="Horizontal">
                <Label Content="公司简介"/>
                <Label Content="招贤纳士"/>
                <Label Content="广告服务"/>
                <Label Content="银行汇款账号"/>
                <Label Content="联系方式"/>
                <Label Content="版权声明"/>
                <Label Content="法律顾问"/>
                <Label Content="问题报告"/>
                <Label Content="合作伙伴"/>
                <Label Content="论坛反馈"/>
                <Label Content="网游监管"/>
            </StackPanel>
            <StackPanel>
                <Label Content="京ICP证070598号　京公网安备号：110105000969　京网文[2014]0452-102号" HorizontalAlignment="Center"/>
                <Label Content="电信业务审批[2007]字第380号　电信与信息服务业务经营许可证070598号" HorizontalAlignment="Center"/>
                <Label Content="Copyright © 1999-2014, CSDN.NET, All Rights Reserved" HorizontalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
    </Grid>