雅博

思慢行远，君子慎独

日志

关于我

雅博

积极的东西推动社会进步,消极的东西维系着社会平衡,不至于让整个社会体系崩溃。负面情绪不能无限制的发展,过犹不及。毁灭人类的决不是人类的野心,而是控制野心的能力失控。

文章分类

6.WPF布局管理之StackPanel、WrapPanel、DockPanel

2009-11-13 14:00:13| 分类： WPF | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

一、StackPanel

StackPanel是以堆叠的方式显示其中的控件

1、可以使用Orientation属性更改堆叠的顺序

Orientation="Vertical"

默认，由上到下显示各控件。控件在未定义的前提下，宽度为StackPanel的宽度，高度自动适应控件中内容的高度

   1: <StackPanel Orientation="Vertical">

   2:     <Button>Button A</Button>

   3:     <Button>Button B</Button>

   4:     <Button>Button C</Button>

   5:     <Button>Button D</Button>

   6:     <Button>Button E</Button>

   7:     <Button>Button F</Button>

   8: </StackPanel>

6.WPF布局管理之StackPanel、WrapPanel、DockPanel - 雅博 - 雅博

Orientation="Horizontal"

由左到右显示各控件。控件在未定义的前提下，高度为StackPanel的高度，宽度自动适应控件中内容的宽度

   1: <StackPanel Orientation="Horizontal">

   2:     <Button>Button A</Button>

   3:     <Button>Button B</Button>

   4:     <Button>Button C</Button>

   5:     <Button>Button D</Button>

   6:     <Button>Button E</Button>

   7:     <Button>Button F</Button>

   8: </StackPanel>

2、设置控件的属性，调整控件的显示

Margin属性
定义控件的外边缘，可以通过以下几种方式来设置
1）Margin=”10”：各边缘均为10
2）Margin=”10,20,30,40”：设定左、上、右、下各边缘分别为10、20、30、40
3）使用拆分式方式设定，如上下为10，左右为20

   1: <Button Content="Button A">

   2:     <Button.Margin>

   3:         <Thickness Top="10" Bottom="10" Left="20" Right="20" />

   4:     </Button.Margin>

   5: </Button>

Width、Height属性
设定控件的宽度和高度，取消自动的宽度和高度
HorizontalAlignment、VerticalAlignment属性
设定控件的水平或竖直对齐方式，如整体Orientation="Vertical"的前提下，设置水平对齐为Left、Right或Center，在没有设定宽度的情况下，控件的宽度自动调整
MinWidth、MinHeight、MaxWidth、MaxHeight属性
在调整窗体大小，同时更改控件大小时，控件宽度、高度可变化的最大值和最小值

二、WrapPanel

以流的形式由左到右，由上到下显示控件，其功能类似于Java AWT布局中的FlowLayout

三、DockPanel

以上、下、左、右、中为基本结构的布局方式，类似于Java AWT布局中的BorderLayout。

但与BorderLayout不同的是，每一个区域可以同时放置多个控件，在同一区域放置的多个控件采用的布局方式为StackPanel方式。

如：

   1: <DockPanel >

   2:     <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />

   3:     <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />

   4:     <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />

   5:     <Button Content="ButtonD" DockPanel.Dock="Left" />

   6:     <Button Content="ButtonE" DockPanel.Dock="Right" />

   7:     <Button Content="ButtonF" DockPanel.Dock="Bottom" />

   8:     <Button Content="ButtonG" />

   9: </DockPanel>

评论这张

转发至微博

阅读(5092)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083066093094087074083081083095085086082064086080086066',
              blogTitle:'6.WPF布局管理之StackPanel、WrapPanel、DockPanel',
              blogAbstract:'<h4\>一、StackPanel</h4\>  <p\>StackPanel是以堆叠的方式显示其中的控件</p\>  <p\>1、可以使用Orientation属性更改堆叠的顺序</p\>  <ul\><li\>Orientation=\"Vertical\" </li\></ul\>  <p\>      默认，由上到下显示各控件。控件在未定义的前提下，宽度为StackPanel的宽度，高度自动适应控件中内容的高度</p\>  <div\>  <div style=\"border-style: none; padding: 0px; overflow: visible; line-height: 12pt; background-color: rgb(244, 244, 244); width: 100%; font-family: consolas,\'Courier New\',courier,monospace; color: black; font-size: 8pt;\"  \></div\></div\>',
              blogTag:'',
              blogUrl:'blog/static/10332601200910132013919',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1316835481191,
              publishTime:1258092013919,
              permalink:'blog/static/10332601200910132013919',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:2,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'积极的东西推动社会进步,消极的东西维系着社会平衡,不至于让整个社会体系崩溃。负面情绪不能无限制的发展,过犹不及。毁灭人类的决不是人类的野心,而是控制野心的能力失控。',
              hmcon:'0',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/10332601200910132013919">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

雅博

导航

日志

6.WPF布局管理之StackPanel、WrapPanel、DockPanel

一、StackPanel

二、WrapPanel

三、DockPanel

历史上的今天

最近读者

热度

评论

页脚