欢迎光临
我的个人博客网站

WPF教程十三:自定义控件进阶可视化状态与自定义Panel

如果你敲了上一篇的代码,经过上一篇各种问题的蹂躏,我相信自定义控件基础部分其实已经了解的七七八八了。那么我们开始进阶,现在这篇讲的才是真正会用到的核心的东西。简化你的代码。给你提供更多的可能,掌握了这篇,才能发挥出来WPF的威力。这一篇学完我们的鸟枪就要换大炮了。

ColorPicker例子分离了行为和可视化外观,其他人员可以动态改变外观的模板。因为不涉及到状态,所以来说相对简单。现在我们来基于现在的内容深入一个难的。

首先创建通过自定义FlipContentPanel控件学习自定义控件下VisualStateManager的使用,一个同类型的数据,我们给2个展示状态,一个是简易的页面、另外一个是详细的页面,我们通过一个状态切换这2种不同UI的呈现效果,状态切换时播放一个过渡动画。这一篇主要是基于上一篇的ColorPicker学习到的自定义控件的知识结合visualStateManager、动画来实现一个基于状态切换的页面。通过状态来管理并控制页面呈现的内容,这样就可以通过状态来实现不同的外观,同时基于自定义控件可以很轻松的实现复杂的效果,并且代码易于维护。

首先,我们创建一个继承自Control的FlipContentPanel自定义无外观控件类。该类包含2个状态:Flipped和Normal。

我们将使用是否是Flipped来控制页面切换2个不同的呈现内容。

重复使用propdp=>2次tab创建我们需要的3个依赖项属性DetailsContent、OverviewContent、IsFlipped,代码如下:

 public object DetailsContent         {             get { return (object)GetValue(DetailsContentProperty); }             set { SetValue(DetailsContentProperty, value); }         }          // Using a DependencyProperty as the backing store for DetailsContent.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty DetailsContentProperty =             DependencyProperty.Register("DetailsContent", typeof(object), typeof(FlipContentPanel));         public object OverviewContent         {             get { return (object)GetValue(OverviewContentProperty); }             set { SetValue(OverviewContentProperty, value); }         }          // Using a DependencyProperty as the backing store for OverviewContent.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty OverviewContentProperty =             DependencyProperty.Register("OverviewContent", typeof(object), typeof(FlipContentPanel));          public bool IsFlipped         {             get { return (bool)GetValue(IsFlippedProperty); }             set             {                 SetValue(IsFlippedProperty, value);             }         }    // Using a DependencyProperty as the backing store for IsFlipped.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty IsFlippedProperty =             DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipContentPanel));  

在静态构造函数中给FlipContentPanel.cs添加默认外观。

 static FlipContentPanel()         {             DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipContentPanel), new FrameworkPropertyMetadata(typeof(FlipContentPanel)));         } 

我们设计了2个页面,一个DetailsContent页面,一个OverviewContent页面,我们在这2个页面的默认样式中各添加一个按钮,用来控制切换VisualState。在上一篇讲的OnApplyTemplate()中我们从模板中获取控件,然后绑定触发事件。这一篇我们结合模板中的按钮在onApplyTemplate()的过程中查找元素并添加事件,用于控制切换状态,这样内置集成在自定义控件中的好处是如果有元素了就附加事件,如果没有就不附加事件,两个按钮起名为FlipButton和FlipButtonAlternate。

 public override void OnApplyTemplate()         {             base.OnApplyTemplate();             ToggleButton flipButton = base.GetTemplateChild("FlipButton") as ToggleButton;             if (flipButton != null)             {                 flipButton.Click += FlipButton_Click;             }              ToggleButton flipAlternateButton = base.GetTemplateChild("FlipButtonAlternate") as ToggleButton;             if (flipAlternateButton != null)             {                 flipAlternateButton.Click += FlipButton_Click;             }             ChangedVisualState(false);         }          private void FlipButton_Click(object sender, RoutedEventArgs e)         {             this.IsFlipped = !this.IsFlipped          }  		private void ChangedVisualState(bool value)         {             if (IsFlipped)             {                 VisualStateManager.GoToState(this, "Flipped", value);             }             else             {                 VisualStateManager.GoToState(this, "Normal", value);             }         }  

同时修改依赖项属性IsFlipped的Set方法,当IsFlipped发生改变时,去修改VisualState。

  public bool IsFlipped         {             get { return (bool)GetValue(IsFlippedProperty); }             set             {                 SetValue(IsFlippedProperty, value);                 ChangedVisualState(true);             }         } 

这样加上2个状态,2个按钮在模板中我们就有4个对象。我们使用特性在类上方标明这4个对象。

 	[TemplateVisualState(Name = "Flipped",GroupName = "VisualState")]     [TemplateVisualState(Name ="Normal",GroupName = "VisualState")]     [TemplatePart(Name = "FlipButton", Type = typeof(ToggleButton))]     [TemplatePart(Name = "FlipButtonAlternate", Type = typeof(ToggleButton))]     public class FlipContentPanel : Control 

这样我们的FlipContentPanel无外观自定义控件就写完了。他包含了2个状态,会从控件模板中获取2个按钮,并添加事件,用于切换页面。在静态构造函数中还会读取默认外观。

接下来我们去写FlipContentPanel的默认外观。

新建一个资源字典名字叫做FlipContentPanel:

在其中添加Style,TargetType为我们的FlipContentPanel并重写template。

Template中的ContrlTemplate我们在一个Grid中写2个同样大小和位置的Border。这2个border中包含我们用来呈现2个不同页面内容的ContentPresenter。然后通过切换2个Border的Visibility属性来控制2个border的(相当于页面的)显示或隐藏的切换。

对应的ContentPresenter 绑定我们的依赖项属性OverviewContent和DetailsContent。每个ContentPresenter上面还有一个固定位置的ToggleButton,用来切换当前的显示内容,这2个ToggleButton的Name保持和无外观控件中我们定义的FlipButton和FlipButtonAlternate一致,用于在OnApplyTemplate()阶段能给这2个ToggleButton绑定事件,用于切换VisualState。同时我们在ControlTemplate中添加VisualState的管理器。用于切换状态,其实VisualStateManager这里想使用的好也需要单独讲一下,我在这里就被坑了2天。想实现的功能特别牛逼,但是发现这里如果应用不好的话,问题会特别多,实现出来的效果跟预期不一样。以后会单独在Blend下讲这个VisualStateManager。因为他有VisualStateGrounps的概念。可以很好的完成很多种状态之前的切换。这里我们就写一个最简单的切换过程中渐显和渐隐,整体代码如下:

 <Style TargetType="{x:Type local:FlipContentPanel}">         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="{x:Type local:FlipContentPanel}">                     <Grid>                         <VisualStateManager.VisualStateGroups>                             <VisualStateGroup x:Name="VisualState">                                 <VisualStateGroup.Transitions>                                     <VisualTransition From="Normal" To="Flipped" GeneratedDuration="0:0:0.5">                                         <Storyboard>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DetailsContentBorder">                                                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>                                             </DoubleAnimationUsingKeyFrames>                                         </Storyboard>                                     </VisualTransition>                                     <VisualTransition From="Flipped" To="Normal" GeneratedDuration="0:0:0.5" >                                         <Storyboard>                                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DetailsContentBorder">                                                 <EasingDoubleKeyFrame KeyTime="0" Value="1"/>                                                 <EasingDoubleKeyFrame KeyTime="0:0:0.5"  Value="0"/>                                             </DoubleAnimationUsingKeyFrames>                                         </Storyboard>                                     </VisualTransition>                                 </VisualStateGroup.Transitions>                                 <VisualState x:Name="Flipped">                                     <Storyboard>                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OverviewContentBorder">                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>                                         </ObjectAnimationUsingKeyFrames>                                     </Storyboard>                                 </VisualState>                                 <VisualState x:Name="Normal">                                     <Storyboard>                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DetailsContentBorder">                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>                                         </ObjectAnimationUsingKeyFrames>                                     </Storyboard>                                 </VisualState>                             </VisualStateGroup>                         </VisualStateManager.VisualStateGroups>                          <Border x:Name="OverviewContentBorder"                                  Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualHeight}"                                  Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualWidth}"                                 BorderBrush="{TemplateBinding BorderBrush}"                                 BorderThickness="{TemplateBinding BorderThickness}"                                 Background="{TemplateBinding Background}">                              <Grid>                                 <ContentPresenter Content="{TemplateBinding OverviewContent}"/>                                 <ToggleButton  x:Name="FlipButton" Width="50" Height="50" VerticalAlignment="Bottom" HorizontalAlignment="Left"  Content="显示详情">                                                                  </ToggleButton>                             </Grid>                         </Border>                         <Border x:Name="DetailsContentBorder" BorderBrush="{TemplateBinding BorderBrush}" VerticalAlignment="Bottom" HorizontalAlignment="Left"                                  Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualHeight}"                                  Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:FlipContentPanel},Mode=FindAncestor},Path=ActualWidth}"                                 BorderThickness="{TemplateBinding BorderThickness}"                                 Background="{TemplateBinding Background}">                             <Grid>                                 <ContentPresenter  Content="{TemplateBinding DetailsContent}"/>                                 <ToggleButton   x:Name="FlipButtonAlternate" Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="30" Content="收起">                                 </ToggleButton>                              </Grid>                         </Border>                      </Grid>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style> 

注意上面的代码中From=”Normal” To=”Flipped” 和From=”Flipped” To=”Normal”2个VisualTransition。它们是状态切换时执行的。是状态切换后执行的。所以我设置了不同的动画。这里一定要多练以下。这里整体就这么多,配个图把,这里卡了我3个晚上。

XAML使用的代码如下,然后配个图:

<Window x:Class="CustomElement.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:CustomElement"           xmlns:usercontrols="clr-namespace:CustomElement.UserControls"         xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls"           mc:Ignorable="d"         Title="MainWindow" Height="450" Width="800">              <Grid Background="Firebrick">         <Grid.RowDefinitions>             <RowDefinition Height="40"/>             <RowDefinition Height="*"/>             <RowDefinition Height="30"/>         </Grid.RowDefinitions>         <lib:FlipContentPanel x:Name="flipPanel" Background="AntiqueWhite" Grid.Row="1" BorderBrush="DarkBlue" BorderThickness="3" IsFlipped="false">             <lib:FlipContentPanel.DetailsContent>                 <Grid>                     <TextBlock Background="Red" Text="我是详情页"/>                 </Grid>             </lib:FlipContentPanel.DetailsContent>             <lib:FlipContentPanel.OverviewContent>                 <Grid>                     <TextBlock  Background="Yellow" Text="我是列表页"/>                 </Grid>             </lib:FlipContentPanel.OverviewContent>         </lib:FlipContentPanel>      </Grid>  </Window>  

WPF教程十三:自定义控件进阶可视化状态与自定义Panel

进来下更进一步积累自定义控件的知识,学习自定义面板及构建自定义绘图控件。

创建自定义面板是一种比较常见的自定义控件开发子集。面板驻留一个或多个子元素,并且实现了特定的布局逻辑以恰当地安排其子元素。如果希望构建自己的可拖动的工具栏或可停靠的窗口系统,自定义面板是很重要的元素。当创建需要非标准特定布局的组合控件时,自定义面板通常是很有用的,例如停靠工具栏。

面板在工作时,主要有2件事情:负责改变子元素尺寸和安排子元素的两步布局过程。第一个阶段是测量阶段(measure pass),在这一阶段面板决定其子元素希望具有多大的尺寸。第二个阶段是排列阶段(layout pass),在这一阶段为每个控件指定边界。这两个步骤是必须的,因为在决定如何分割可用空间时,面板需要考虑所有子元素的期望。

可以通过重写MeasureOverride()和ArrangeOverride()方法,为这两个步骤添加自己的逻辑,这两个方法作为WPF布局系统的一部分在FrameworkElement类种定义的。使用MeasureOverride()和ArrangeOverride()方法代替在UIElement类中定义的MeasureCore()和ArrangeCore()。这2个方法是不能被重写的。

接下来我们分析一下这2个方法都在做什么:

1.MeasureOverride()

首先使用MeasureOverride()方法决定每个子元素希望多大的空间,每个MeasureOverride()方法的实现负责遍历子元素集合,并调用每个子元素的Measure()方法。当调用Measure()方法时,需要提供边界框-决定每个子控件最大可用控件的Size对象。在MeasureOverride()方法的最后,面板返回显示所有子元素所需的空间,并返回它们所期望的尺寸。在测量过程的结尾,布局容器必须返回它所期望的尺寸。在简单的面板中,可以通过组合每个资源需要的期望尺寸计算面板所期望的尺寸。

2.ArrangeOverride()方法

测量完所有元素后,就可以在可用的空间中排列元素了。布局系统调用面板的ArrangeOverride()方法,而面板为每个子元素调用Arrange()方法,以告诉子元素为它分配了多大的空间。

当时有Measure()方法测量条目时,传递能够定义可用空间边界的Size对象。当时有Arrange()方法放置条目时,传递能够定义条目尺寸和位置的System.Windows.Rect对象。

了解了这两步,我们来实现一个Canvas面板。

Canvas面板在它们希望的位置放置子元素,并且为子元素设置它们希望的尺寸。所以,Canvas面板不需要计算如何分割可用空间。MeasureOverride()阶段可以为每个子元素提供无限的空间。

  protected override Size MeasureOverride(Size availableSize)         {             Size size = new Size(double.PositiveInfinity, double.PositiveInfinity);             foreach (UIElement element in base.InternalChildren)             {                 element.Measure(size);             }             return new Size();         } 

在MeasureOverride()方法返回空的Size对象,也就是说Canvas面板不请求任何空间。而是我们明确的为Canvas面板指定尺寸,或者将其放置到布局容器中进行拉伸以填充整个容器的可用空间。

ArrangeOverride()方法包含的内容稍微多一些。为了确定每个元素的正确位置,Canvas面板使用附加属性Left、Right、Top以及Bottom。我们只用Left和Top附加依赖项属性来实现一个简易版。

public class CanvasClone : Panel     {         protected override Size MeasureOverride(Size availableSize)         {             Size size = new Size(double.PositiveInfinity, double.PositiveInfinity);             foreach (UIElement element in base.InternalChildren)             {                 element.Measure(size);             }             return new Size();         }         protected override Size ArrangeOverride(Size finalSize)         {             foreach (UIElement element in base.InternalChildren)             {                 double x = 0;                 double y = 0;                 double left = Canvas.GetLeft(element);                 if (!double.IsNaN(left))                 {                     x = left;                 }                 double top = Canvas.GetTop(element);                 if(!double.IsNaN(top))                 {                     y = top;                 }                 element.Arrange(new Rect(new Point(x, y), element.DesiredSize));              }             return finalSize;         }     } 

Xaml代码:

<Window x:Class="CustomElement.CustomPanel"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:CustomElement"         xmlns:customPanel="clr-namespace:CustomElement.Panels"         mc:Ignorable="d"         Title="CustomPanel" Height="450" Width="800">     <Grid>         <customPanel:CanvasClone>             <TextBlock Text="asg" Canvas.Left="100" Canvas.Top="100"/>         </customPanel:CanvasClone>      </Grid> </Window>  

我们就看到了TextBlock被放置在了靠近左上角100,100的位置。。这里不考虑其他问题,因为只是为了了解自定义面板。

接下来我们创建一个扩展的WrapPanel面板。WrapPanel的工作原理是,该面板逐个布置其子元素,一旦当前行宽度用完,就会切换到下一行。但有时我们需要强制立即换行,以便在新行中启动某个特定控件。尽管WrapPanel面板原本没有提供这一功能,但通过创建自定义控件可以方便地添加该功能。只需要添加一个请求换行的附加依赖项属性即可。此后,面板中的子元素可使用该属性在适当位置换行。

我们添加WrapBreakPanel类,继承自Panel。这里因为要自定义所以不使用代码片段添加附加依赖项属性,而是手写,并设置AffectsMeasure和AffectsArrange为True。我们要在每次LineBreakBefore属性变更时,都触发新的排列阶段。在测量阶段元素按行排列,除非太大或者LineBreakBefore属性设置为true,否则每个元素都被添加到当前行中。

using System; using System.Windows; using System.Windows.Controls;  namespace CustomElement.Panels {     public class WrapBreakPanel : Panel     {          static WrapBreakPanel()         {             FrameworkPropertyMetadata metadata = new FrameworkPropertyMetadata();             metadata.AffectsArrange = true;             metadata.AffectsMeasure = true;             LineBreakBeforeProperty =              DependencyProperty.RegisterAttached("LineBreakBefore", typeof(bool), typeof(WrapBreakPanel), metadata);         }          public static readonly DependencyProperty LineBreakBeforeProperty;          public static void SetLineBreakBefore(UIElement element, Boolean value)         {             element.SetValue(LineBreakBeforeProperty, value);         }          public static Boolean GetLineBreakBefore(UIElement element)         {             return (bool)element.GetValue(LineBreakBeforeProperty);         }          protected override Size MeasureOverride(Size availableSize)         {             Size currentLineSize = new Size();             Size panelSize = new Size();              foreach (UIElement element in base.InternalChildren)             {                 element.Measure(availableSize);                 Size desiredSize = element.DesiredSize;                 if (GetLineBreakBefore(element) || currentLineSize.Width + desiredSize.Width > availableSize.Width)                 {                     //切换到新行,空间用完,或者通过设置附加依赖项属性请求换行                     panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);                     panelSize.Height += currentLineSize.Height;                     currentLineSize = desiredSize;                     //如果元素太宽无法使用最大行宽进行匹配,则只需要为其指定单独的行。                     if (desiredSize.Width > availableSize.Width)                     {                         panelSize.Width = Math.Max(desiredSize.Width, panelSize.Width);                         panelSize.Height += desiredSize.Height;                         currentLineSize = new Size();                     }                 }                 else                 {                     //添加到当前行。                     currentLineSize.Width += desiredSize.Width;                     //确保线条与最高的元素一样高                     currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);                 }             }             //返回适合所有元素所需的大小。             //通常,这是约束的宽度,高度基于元素的大小。             //但是,如果一个元素的宽度大于面板的宽度。             //所需的宽度将是该行的宽度。             panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);             panelSize.Height += currentLineSize.Height;             return panelSize;         }         protected override Size ArrangeOverride(Size finalSize)         {             int firstInLine = 0;             Size currentLineSize = new Size();             //积累高度             double accumulatedHeight = 0;             UIElementCollection elements = base.InternalChildren;             for (int i = 0; i < elements.Count; i++)             {                 Size desiredSize = elements[i].DesiredSize;                 if (GetLineBreakBefore(elements[i]) || currentLineSize.Width + desiredSize.Width > finalSize.Width)                 {                     //换行                     arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, i);                     accumulatedHeight += currentLineSize.Height;                     currentLineSize = desiredSize;                     if (desiredSize.Width > finalSize.Width)                     {                         arrangeLine(accumulatedHeight, desiredSize.Height, i, ++i);                         accumulatedHeight += desiredSize.Height;                         currentLineSize = new Size();                     }                     firstInLine = i;                 }                 else                 {                     //继续当前前行。                     currentLineSize.Width += desiredSize.Width;                     currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);                 }             }             if (firstInLine < elements.Count)             {                 arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, elements.Count);             }             return finalSize;         }         private void arrangeLine(double y, double lineHeight, int start, int end)         {             double x = 0;             UIElementCollection children = InternalChildren;             for (int i = start; i < end; i++)             {                 UIElement child = children[i];                 child.Arrange(new Rect(x, y, child.DesiredSize.Width, lineHeight));                 x += child.DesiredSize.Width;             }         }     } }  

调用的XAML代码:

<Window x:Class="CustomElement.CustomPanel"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:CustomElement"         xmlns:customPanel="clr-namespace:CustomElement.Panels"         mc:Ignorable="d"         Title="CustomPanel" Height="450" Width="800">     <Grid>         <customPanel:CanvasClone>             <TextBlock Text="asg" Canvas.Left="100" Canvas.Top="100"/>         </customPanel:CanvasClone>         <customPanel:WrapBreakPanel>             <Button>No Break Here</Button>             <Button>No Break Here</Button>             <Button>No Break Here</Button>             <Button>No Break Here</Button>             <Button customPanel:WrapBreakPanel.LineBreakBefore="True" FontWeight="Bold" Content="Button with Break"/>             <Button>No Break Here</Button>             <Button>No Break Here</Button>             <Button>No Break Here</Button>             <Button>No Break Here</Button>         </customPanel:WrapBreakPanel>     </Grid> </Window>  

在MeasureOverride阶段,主要是测量元素的位置和是否需要换行。在ArrangeOverride阶段,每计算满显示一行的元素后,就开始绘制这一行。这里只需要了解着这个MeasureOverride和ArrangeOverride在干什么就行。目前这里不需要掌握,因为后面会讲到列表虚拟化和数据虚拟化,会更详细的讲相关的设计内容。这里只要直到,有自定义面板可以自己设计列表的呈现,就可以了。

赞(0) 打赏
未经允许不得转载:张拓的天空 » WPF教程十三:自定义控件进阶可视化状态与自定义Panel
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏