各位好,终于讲到自定义Panel了。当系统自带的几个Panel比如Gird,StackPanel,RelativePanel不能满足我们的特定要求时(其实不常见啦),自定义Panel就显得非常必要,而且因为是针对性的处理,效果也会非常好。更何况自定义Panel其实并不复杂,今天俺们就来学习一下。

  记得上一篇自定义CommandBar在增加占位控件AppBarEmpty时,采用的是通过Page的SizeChanged事件中计算页面Width,减去CommandBar中其他控件Width后再赋值Width给AppBarEmpty的方法。就可行性而言是绝对没问题的,代码复杂度也很低,不失为一个好方法。但是复用性不太好,需要在每个Page都写上一小段代码。而我们的初衷是希望AppBarEmpty能够自动撑开,计算自身所需的Width。

  遇到的困难来自StackPanel这个控件,StackPanel在计算自身所需空间时,会非常吝啬按children元素所需的最小尺寸来申请。就好比申请经费时按最下限申请,这种精神ZF部门应该学习,而公司组织TeamBuilding就应该排斥……)。说到这里,本篇的主题有了,就是通过自定义一个StackPanelEx来实现让AppBarEmpty自动撑开的效果。

  前面说了,自定义Panel其实并不复杂。只有两个方法需要override:

        //
// Summary:(根据子元素测量控件本身需要的空间)
// Provides the behavior for the Measure pass of the layout cycle. Classes can override
// this method to define their own Measure pass behavior.
//
// Parameters:
// availableSize:(控件本身的可用空间。如指定无穷大值,表示控件的大小将调整为内容的可用大小)
// The available size that this object can give to child objects. Infinity can be
// specified as a value to indicate that the object will size to whatever content
// is available.
//
// Returns:(控件根据子元素大小计算得出的所需大小)
// The size that this object determines it needs during layout, based on its calculations
// of the allocated sizes for child objects or based on other considerations such
// as a fixed container size.
protected virtual Size MeasureOverride(Size availableSize);
//
// Summary:(根据上面测量的结果,来对子元素进行布局)
// Provides the behavior for the Arrange pass of layout. Classes can override this
// method to define their own Arrange pass behavior.
//
// Parameters:
// finalSize:(控件用来排列自身及其子元素的最终确定的空间)
// The final area within the parent that this object should use to arrange itself
// and its children.
//
// Returns:(使用的实际大小)
// The actual size that is used after the element is arranged in layout.
protected virtual Size ArrangeOverride(Size finalSize);

  听上去是不是挺绕的?我们来看StackPanelEx的实际代码:

    public class StackPanelEx : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
    double height = ;
foreach (var child in Children)
{
// Tell the child control to determine the size needed
child.Measure(availableSize);
height = child.DesiredSize.Height > height ? child.DesiredSize.Height : height;
} return new Size(availableSize.Width,height);
} protected override Size ArrangeOverride(Size finalSize)
{
int count = Children.Count(_ => _ is AppBarEmpty2);
double totalLength = Children.Where(_ => _ is AppBarEmpty2 == false).Sum(_ => (_ as FrameworkElement).Width);
var emptyWidth = (finalSize.Width - totalLength) / count; double x = ;
foreach (var child in Children)
{
if (child is AppBarEmpty2)
{
child.Arrange(new Rect(x, , emptyWidth, ));
x += emptyWidth;
}
else
{
child.Arrange(new Rect(x, , child.DesiredSize.Width, child.DesiredSize.Height));
x += child.DesiredSize.Width;
}
}
return finalSize;
}
}

  简单解释一下,首先在MeasureOverride方法里,告诉每个子元素(这里是AppBarButton和AppBarEmpty2)去算自己需要多少空间,一会要分地了。然后直接告诉上头,Width我全要了,Height按我们村里最高的人给就行了。

  紧接着到了ArrangeOverride方法,上级领导比较大方,告诉该控件Width全给你,还有你Height要的太少,拖了上级Panel的后腿,多给一些Height免得挤到同级的其他控件……

  然后村长及开始分地了。AppBarButton就按他自己申请的给,AppBarEmpty2感觉是村长亲戚,剩下的Width全给他们家承包了……

  最后向上头汇报一下分地的情况,这事就算完了。

  AppBarEmpty2还是没变,和上次一样。

    public class AppBarEmpty2 : FrameworkElement, ICommandBarElement
{
public bool IsCompact { get; set; }
}

  既然新的StackPanelEx写好了,就该替换CommandBar原有的StackPanel了,找到CommandBar模板中关于PrimaryItemsControl的部分

                                <Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="ContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ItemsControl x:Name="PrimaryItemsControl" Grid.Column="0"
HorizontalAlignment="Stretch" IsTabStop="False" MinHeight="{ThemeResource AppBarThemeMinHeight}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel Orientation="Horizontal"/>-->
<local:StackPanelEx ></local:StackPanelEx>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>

  将ItemsPanelTemplate中的StackPanel替换成StackPanelEx,同时将ItemsControl的HorizontalAlignment="Right"改成HorizontalAlignment="Stretch",大功告成,再来看一下Page中的XAML部分:

       <CommandBar x:Name="commandBar" Grid.Row="3" Style="{StaticResource CommandBarStyle2}" >
<AppBarButton x:Name="appbarButton" Icon="Accept" Label="fdsfdsf" ></AppBarButton>
<local:AppBarEmpty2 ></local:AppBarEmpty2>
<AppBarButton Icon="Accept" Label="fdsfdsf"></AppBarButton>
<local:AppBarEmpty2 ></local:AppBarEmpty2>
<AppBarButton Icon="Accept" Label="fdsfdsf" ></AppBarButton>
</CommandBar>

  是不是非常的清爽,再也不用去写什么SizeChanged事件了。实际效果如下图:

UWP开发入门(五)——自定义Panel的更多相关文章

  1. UWP开发入门(四)——自定义CommandBar

    各位好,再次回到UWP开发入门系列,刚回归可能有些不适应,所以今天我们讲个简单的,自定义CommandBar,说通俗点就是自定义类似AppBarButton的东西,然后扔到CommandBar中使用. ...

  2. openresty 前端开发入门五之Mysql篇

    openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...

  3. UWP开发入门(十六)——常见的内存泄漏的原因

    本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏>中提到过,即使有 ...

  4. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

  5. UWP开发入门(十)——通过继承来扩展ListView

    本篇之所以起这样一个名字,是因为重点并非如何自定义控件,不涉及创建CustomControl和UserControl使用的Template和XAML概念.而是通过继承的方法来扩展一个现有的类,在继承的 ...

  6. UWP开发入门(25)——通过Radio控制Bluetooth, WiFi

    回顾写了许久的UWP开发入门,竟然没有讲过通过Windows.Devices.Radios.Radio来控制Bluetooth和WiFi等功能的开关.也许是因为相关的API设计的简单好用,以至于被我给 ...

  7. UWP开发入门(十一)——Attached Property的简单应用

    UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row: <Grid Background="{ThemeResource Applica ...

  8. UWP开发入门(七)——下拉刷新

    本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难.UWP开发更大的困难在于懒惰,缺乏学习的意愿.而不是“某软连下拉刷新控件都没有”这样的想法. 之 ...

  9. UWP开发入门(一)——SplitView

    接下来会写一个UWP(Universal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里.本篇对适用于顶层导航的SplitView控件展开讨论. 首先S ...

随机推荐

  1. AngularJS学习笔记(1)——MVC模式的清单列表效果

    MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css.bootstrap-theme.css.angular.js.要链入的相关css和js文件预先准备 ...

  2. 集合工具类CollectionUtils、ListUtils、SetUtils、MapUtils的使用

    主要用它的isEmpty(final Collection<?> coll)静态方法来判断一个给定的集合是否为null或者是否长度为0.最近才发现此工具类还可以取集合的交集.并集.甚至差集 ...

  3. leetcode112

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  4. delphi XE8 NetHTTPRequest NetHTTPClient

    delphi xe8 推出2个新http控件,NetHTTPRequest.NetHTTPClient 可以调用ASP.Net 一般应用程序获取网页数据,用旧的控件idhttp控件也可以,推荐用新的这 ...

  5. Maven 快速构建一个项目

    参考:http://www.spring4all.com/article/266 mvn archetype:generate -DgroupId=springboot -DartifactId=sp ...

  6. Git----远程仓库之添加远程库02

    现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub上创建一个Git库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...

  7. 为何在JDK安装路径下存在两个JRE?

    "两个jre"和"三个lib"的功能简单扼要的解释 安装JDK后,Java目录下有jdk和jre两个文件夹,但jdk下还有一个jre文件夹,而且这个jre比前面 ...

  8. segment_object_model_3d

    * *********************************************************************** * This example program sho ...

  9. LUA table.sort的问题,数组与表的区别

    t = { [] = , [] = , [] = , [] = , } t1 = { , , , , } t2 = { 'a', 'b','d','c', } function cmp(v1, v2) ...

  10. 迷你MVVM框架 avalonjs 0.92发布

    本版本最大的改进是引入ms-class的新风格支持,以前的不支持大写类名及多个类名同时操作,新风格支持了.还有对2维监控数组的支持.并着手修复UI框架. 重构 class, hover, active ...