手把手玩转win8开发系列课程(26)

简介:

这节我们两个议题①在源代码中改变平铺②在xaml中改变平铺样式

(1)在源代码中改变平铺

这个平铺系统中最核心的是windows中的ViewStateChanged事件。为了处理事件,你可以重新配置的你的程序,来生成这个事件。下列是源代码所示:


using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace MetroGrocer.Pages {
//DetailPage类
 public sealed partial class DetailPage : Page {
   public DetailPage() {
     this.InitializeComponent();
// ViewStateChanged 事件 ApplicationView.GetForCurrentView().ViewStateChanged
    += (sender, args) => {
       HandleViewStateChange(args.ViewState);
  };
  }
//处理HandleViewStateChange事件
  private void HandleViewStateChange(ApplicationViewState viewState) {
   if (viewState == ApplicationViewState.Snapped) {
       GridLayout.ColumnDefinitions[0].Width
           = GridLengthHelper.FromPixels(0);
   } else {
       GridLayout.ColumnDefinitions[0].Width
           = GridLengthHelper.FromValueAndType(1, GridUnitType.Star);
   }
  }
 }
}

处理这个事件是传递这个ApplicationViewStateChangedEventArgs对象,他的Viewstate属性是来自于ApplicationViewState这个迭代器。描述这个当前平铺的对象。这个迭代器是抢购,填充,全屏水平模式和全屏风景模式。这两个模式允许看全屏模式的差异。

这个HandleViewStateChange事件是用来适应布局方式,如果这个app是在断裂模式下显示,我把第一行的宽度设置是0. 恢复全屏状态下,他的状态不能自动更新。你也需要用源代码处理状态。 这些状态是除了断裂状态。因此,我重置列的宽度。下图,你也可以看到断裂实现他们之间的状态的变化。

 

(2)在xaml中改变平铺样式

你可以在xaml中改变平铺样式,你也发现xaml语法是冗长。因此,他是很难阅读,他也很难处理,因此在真正的开发中,我也推荐你用插入code approach的方法、 但这里我用的是xaml,下图是xaml的源代码。

特别提醒,想什么VisualStateManager类别,是wpf中和silverlight中的标准的类,我这里没有提及,你要用心的学习较完全的xaml语言请看具体的wpf文档。

这里,源代码如下所示:


1 <Page
 2  x:Class="MetroGrocer.Pages.DetailPage"
 3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5  xmlns:local="using:MetroGrocer.Pages"
 6  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8  mc:Ignorable="d">
 9 <Grid x:Name="GridLayout" Background="#71C524">
10  <VisualStateManager.VisualStateGroups>
11   <VisualStateGroup x:Name="OrientationStates">
12    <VisualState x:Name="Snapped">
13     <Storyboard>
14      <ObjectAnimationUsingKeyFrames
15        Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
16        Storyboard.TargetName="GridLayout">
17      <DiscreteObjectKeyFrame KeyTime="0">
18       <DiscreteObjectKeyFrame.Value>
19        <GridLength>0</GridLength>
20       </DiscreteObjectKeyFrame.Value>
21      </DiscreteObjectKeyFrame>
22    </ObjectAnimationUsingKeyFrames>
23     </Storyboard>
24   </VisualState>
25   <VisualState x:Name="Others">
26     <Storyboard>
27      <ObjectAnimationUsingKeyFrames
28        Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
29        Storyboard.TargetName="GridLayout">
30       <DiscreteObjectKeyFrame KeyTime="0">
31        <DiscreteObjectKeyFrame.Value>
32          <GridLength>*</GridLength>
33        </DiscreteObjectKeyFrame.Value>
34       </DiscreteObjectKeyFrame>
35      </ObjectAnimationUsingKeyFrames>
36     </Storyboard>
37   </VisualState>
38   </VisualStateGroup>
39  </VisualStateManager.VisualStateGroups>
40    <Grid.RowDefinitions>
41      <RowDefinition/>
42      <RowDefinition/>
43    </Grid.RowDefinitions>
44    <Grid.ColumnDefinitions>
45      <ColumnDefinition/>
46      <ColumnDefinition/>
47    </Grid.ColumnDefinitions>
48  // …StackPanel elements removed for brevity…
49 </Grid>
50 </Page>

在上述的源代码中,我定义了两个VisualState状态,首先,我得把第一行的宽度置为0,这个状态是断裂视图状态。第二个状态,这是一个其他的视图的状态,这部分无论是xaml的源代码还是C#源代码都很冗长。

另外,我得处理ViewStateChanged事件,以至于他能进入xaml的状态,下列是处理的C#源代码


 1 using Windows.UI.ViewManagement;
 2 using Windows.UI.Xaml;
 3 using Windows.UI.Xaml.Controls;
 4 namespace MetroGrocer.Pages {
 5   public sealed partial class DetailPage : Page {
 6     public DetailPage() {
 7       this.InitializeComponent();
 8       ApplicationView.GetForCurrentView().ViewStateChanged
 9         += (sender, args) => {
10    string stateName = args.ViewState ==
11       ApplicationViewState.Snapped ? "Snapped" : "Others";
12      VisualStateManager.GoToState(this, stateName, false);
13        };
14      }
15    }
16 }

我调用了静态的VisualStateManager.GoStates使其在xaml定义的状态能够互相切换。这个方法传递的参数是当前页面对象,这一位着你进入了这个状态以后,其中间状态不会显示,直接完成状态之间的切换。最后一个参数为真的时候,代表平铺状态自由切换的时候,能够提供其动画效果。

哝——这就是这节的议程。



目录
相关文章
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1210 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1172 87
|
9天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1767 12
|
19天前
|
人工智能 运维 安全
|
2天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
230 127
|
10天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
362 0

热门文章

最新文章