WPF布局学习总结

来源：互联网发布：阿里云服务器攻击编辑：程序博客网时间：2024/05/16 18:57

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>

0 0