如何将GridViewEX升级到UWP（Universal Windows Platform）平台

引言

上一篇文章中，我们主要讲解了如何在保证GridView控件的用户体验基础上，扩展GridView生成GridViewEx控件，增加动态添加新分组功能等，本文在上文的基础上，介绍如何在Windows10中使用GridViewEx，开发UWP应用。

Demo 下载：

GridViewLiveTiles.zip

GridViewEx.zip

GridViewDemo.zip

开发UWP应用程序

开发UWP应用程序最好是从创建empty项目开始，重用已开发的一些模块，这样可以提高开发效率。

本文为了创建UWP 应用程序，首先创建一些通用类如下，详细代码见附件：

  • Common/VisibilityConverter.cs
  • Common/LayoutAwarePage.cs
  • Common/SuspensionManager.cs

DataModel 和Sample 文件夹下的所有文件都可以重用。

修改布局和导航

VisibilityConverter 和 SuspensionsManager暂时不需要修改，可直接在UWP中使用。主要修改布局和导航逻辑文件。

由于微软支持的设备种类越来越多，导致ApplicationViewState不再适用。UWP平台提供了其他的解决方法如AdaptiveTriggers，内置了自适应布局。因此创建UWP应用程序，首先需要删除所有ApplicationViewStates的代码。可能会导致使用LayoutAwarePage的部分会报错。因此我们需要做一些兼容性的改变。

无论是WinRT还是UWP应用，都会使用返回键导航。桌面WinRTx应用会在Xaml文件添加返回按钮。但是在UWP应用中，非常灵活，桌面应用可以在标题栏中添加返回按钮，在移动设备中不仅能使用标题栏中的返回键，也可以使用物理返回键实现导航功能。UWP的方法比较通用，且不需要编写自定义的Xaml文件。因此只需要开发一个基类，应用到不同的Xaml 页面中就可以实现轻松实现导航功能，不需要重复编写代码。修改后的LayoutAwarePage 类：

   1:  protected override void OnNavigatedTo(NavigationEventArgs e)
   2:  {
   3:      // subscribe on Back button event
   4:      if (IsWindowsPhoneDevice())
   5:      {
   6:          // use hardware button
   7:          Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
   8:      }
   9:      else
  10:      {
  11:          // enable/disable window back button depending on navigation state
  12:          var currentView = SystemNavigationManager.GetForCurrentView();
  13:          currentView.AppViewBackButtonVisibility = this.Frame != null && this.Frame.CanGoBack ?
  14:              AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
  15:          currentView.BackRequested += backButton_Tapped;
  16:      }
  17:      ...
  18:  protected override void OnNavigatedFrom(NavigationEventArgs e)
  19:  {
  20:      // unsubscribe from Back button event
  21:      if (IsWindowsPhoneDevice())
  22:      {
  23:          Windows.Phone.UI.Input.HardwareButtons.BackPressed -= HardwareButtons_BackPressed;
  24:      }
  25:      else
  26:      {
  27:          // unsubscribe from window back button
  28:          var currentView = SystemNavigationManager.GetForCurrentView();
  29:          currentView.BackRequested -= backButton_Tapped;
  30:      }
  31:      ...
  32:  // handle Back button events
  33:  private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
  34:  {
  35:      if (this.Frame != null && this.Frame.CanGoBack)
  36:      {
  37:          e.Handled = true;
  38:          this.Frame.GoBack();
  39:      }
  40:  }
  41:  private void backButton_Tapped(object sender, BackRequestedEventArgs e)
  42:  {
  43:      this.GoBack(this, new RoutedEventArgs());
  44:  }

因为需要使用物理返回键，我们需要在程序中添加引用文件“Windows Mobile Extensions for the UWP”。

现在由LayoutAwarePage派生而来的所有页面都可直接使用，无需在多个文件中添加引用。

LayoutAwarePage 类最后添加设备查询的静态方法，来检测运行时设备。

   1:  public static bool IsWindowsPhoneDevice()
   2:  {
   3:      if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
   4:      {
   5:          return true;
   6:      }    
   7:      return false;
   8:  }

其他平台

1. 如果想保证应用程序在Windows10中具有与系统一致的界面风格和用户体验，可使用Windows 10 ThemeResources (主题资源)。

2. 微软也在Windows10 发布中升级了GridView控件，相对于Windows 8 版本来说，最重要的改变是添加了用户重定向检测。

3. VariableSizedWrapGrid 面板也添加了重定向检测功能。并且去掉了行和列自动展开的功能。下面是Windows8 版本的Xaml文件，在Windows10 中已经无法使用。

   1:  <GridView  Grid.Row="1" Grid.Column="1" Margin="10" AllowDrop="True" CanReorderItems="True" CanDragItems="True" IsSwipeEnabled="True">
   2:                  <GridView.ItemsPanel>
   3:                      <ItemsPanelTemplate>
   4:                          <VariableSizedWrapGrid/>
   5:                      </ItemsPanelTemplate>
   6:                  </GridView.ItemsPanel>
   7:                  <Rectangle Height="100" Width="200" Fill="Blue" />
   8:                  <Rectangle Height="100" Width="100" Fill="Red" />
   9:                  <Rectangle Height="100" Width="100" Fill="Yellow" />
  10:                  <Rectangle Height="100" Width="100" Fill="Green" />

最好的解决方法就是将VariableSizedWrapGrid 与item的属性绑定，并将值传给自定义的GridView控件的ListViewItemPresenter 元素：

   1:  /// <summary>
   2:  /// This class sets VariableSizedWrapGrid.ColumnSpanProperty for GridViewItem controls,
   3:  /// so that every item can have different size in the VariableSizedWrapGrid.
   4:  /// Also it sets VerticalContentAlignment and HorizontalContentAlignment to Stretch.
   5:  /// </summary>
   6:  public class GridViewTiled : GridView
   7:  {
   8:      // set ColumnSpan according to the business logic (maybe some GridViewSamples.Samples.Item or group properties)
   9:      protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
  10:      {
  11:          element.SetValue(ContentControl.HorizontalContentAlignmentProperty, HorizontalAlignment.Stretch);
  12:          element.SetValue(ContentControl.VerticalContentAlignmentProperty, VerticalAlignment.Stretch);
  13:          UIElement el = item as UIElement;
  14:          if (el != null)
  15:          {
  16:              int colSpan = Windows.UI.Xaml.Controls.VariableSizedWrapGrid.GetColumnSpan(el);
  17:              int rowSpan = Windows.UI.Xaml.Controls.VariableSizedWrapGrid.GetRowSpan(el);
  18:              if (rowSpan > 1)
  19:              {
  20:                  // only set it if it has non-defaul value
  21:                  element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, rowSpan);
  22:              }
  23:              if (colSpan > 1)
  24:              {
  25:                  // only set it if it has non-defaul value
  26:                  element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, colSpan);
  27:              }
  28:          }
  29:          base.PrepareContainerForItemOverride(element, item);
  30:      }
  31:  }

UWP中的XAML文件：

<controls:GridViewTiled Grid.Row="1" Grid.Column="1" Margin="10" AllowDrop="True" CanReorderItems="True" CanDragItems="True" >
    <controls:GridViewTiled.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid ItemHeight="100" ItemWidth="100" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </controls:GridViewTiled.ItemsPanel>
    <Rectangle VariableSizedWrapGrid.ColumnSpan="2" VariableSizedWrapGrid.RowSpan="2" Fill="Blue" />
    <Rectangle Fill="Red" />
    <Rectangle Fill="Yellow" />
    <Rectangle Fill="Green" />

新占位符（NewGroupPlaceholder）控件

WinRT版的GridViewEx控件使用了简单border作为新分组的占位符，在拖拽项过程中外观是静态的，无法改变。为了使界面对用户更加友好，并且将拖放的位置高亮， 因此我们新建了新的“NewGroupPlaceholder”控件，在拖拽过程中有简单的状态切换逻辑。

代码很简单，见附件，系统提供的控件模板代码如下：

   1:  <Style TargetType="local:NewGroupPlaceholder">
   2:      <Setter Property="Background" Value="Transparent" />
   3:      <Setter Property="Margin" Value="8" />
   4:      <Setter Property="Height" Value="32" />
   5:      <Setter Property="Template">
   6:          <Setter.Value>
   7:              <ControlTemplate TargetType="local:NewGroupPlaceholder">
   8:                  <Border x:Name="root" Background="{TemplateBinding Background}">
   9:                      <VisualStateManager.VisualStateGroups>
  10:                          <VisualStateGroup x:Name="DragStates">
  11:                              <VisualState x:Name="Normal"/>
  12:                              <VisualState x:Name="DragOver">
  13:                                  <Storyboard>
  14:                                      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="dragOverElement"/>
  15:                                  </Storyboard>
  16:                              </VisualState>
  17:                          </VisualStateGroup>
  18:                      </VisualStateManager.VisualStateGroups>
  19:                      <Border x:Name="dragOverElement" Background="{ThemeResource SystemControlHighlightListAccentLowBrush}" Opacity="0"/>
  20:                  </Border>
  21:              </ControlTemplate>
  22:          </Setter.Value>
  23:      </Setter>
  24:  </Style>

修改GridViewEx 控件

接下来，我们将介绍如何修改GridViewEx控件，使得其可以适应UWP。

UWP平台下运行GridViewEx大部分的功能与WinRT保持一致。只有OnDragOver中的DragEventArgs.AcceptedOperation 属性需要重写。显然UWP 中的GridView 将所有非空项的该属性都设置为None。因此，如果不重写OnDragOver 方法，Drop 事件就不会被触发。

代码如下：

   1:  protected override void OnDragOver(DragEventArgs e)
   2:  {
   3:      int newIndex = GetDragOverIndex(e);
   4:      if (newIndex >= 0)
   5:      {
   6:          e.AcceptedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Move;

运行代码时编译器会发出很多关于ItemContainerGenerator 方法的警告，调用ItemsControl 响应方法就可以处理Warning

VariableSizedWrapGrid存在很多限制，为了解决这些限制，在上述代码中添加 PrepareContainerForItemOverride 方法。最后需要升级GridViewEx 控件自带的样式，使其支持设备重定向。

更加适应手持设备

在GridViewEx控件中添加新的PreparingContainerForItem 事件，该事件的参数即包含数据对象，也包含UI 容器，因此可根据需求设置UI属性，代码如下：

   1:  /// <summary>
   2:  /// Set column spans depending on group id.
   3:  /// </summary>
   4:  /// <param name="sender"></param>
   5:  /// <param name="e"></param>
   6:  private void gve_PreparingContainerForItem(object sender, GridViewEx.PreparingContainerForItemEventArgs e)
   7:  {
   8:      try
   9:      {
  10:          Item it = e.Item as Item;
  11:          if (it != null)
  12:          {
  13:              e.Element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, it.GroupId % 2 + 1);
  14:          }
  15:      }
  16:      catch
  17:      {
  18:          e.Element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
  19:      }
  20:  }

在多设备中具有良好用户体验

为了适应多种设备，需要生成自适应布局。本文中主要通过修改内容项的尺寸来实现该功能。创建了Bound ,Unbound以及Grouped 示例文件，Grouped 显示单个GridView控件，因此在移动端能够修改Tile的尺寸及边框。

Bound 和Unbound 示例是由2个GridView控件组成，小屏幕中显的内容较多，无法显示更多的细节性的内容，因此使用Pivot控件保证同一时间只显示一个GridView控件，并支持GridView之间切换。

代码如下：

   1:  public double TileSize
   2:  {
   3:      get { return (double)GetValue(TileSizeProperty); }
   4:      set { SetValue(TileSizeProperty, value); }
   5:  }
   6:  public static readonly DependencyProperty TileSizeProperty =
   7:      DependencyProperty.Register(nameof(TileSize), typeof(double), typeof(Customized), new PropertyMetadata(100));
   8:  public Customized()
   9:  {
  10:      if (IsWindowsPhoneDevice())
  11:      {
  12:          TileSize = 72;
  13:      }
  14:      this.InitializeComponent();
  15:  }

GridViewEx 和GridView 中绑定代码如下：

   1:  <GroupStyle.Panel>
   2:      <ItemsPanelTemplate>
   3:          <VariableSizedWrapGrid ItemHeight="{Binding TileSize, ElementName=pageRoot}"
   4:                                 ItemWidth="{Binding TileSize, ElementName=pageRoot}"
   5:                                 Orientation="Horizontal" MaximumRowsOrColumns="10"/>
   6:      </ItemsPanelTemplate>
   7:  </GroupStyle.Panel>

总结

自定义GridViewEx控件扩展了GridView控件，丰富了功能，并新增适应UWP平台App的开发。

示例图片：

原文链接：http://www.codeproject.com/Articles/1037059/How-to-Upgrade-Extended-GridView-from-WinRT-to-Uni

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-08-29 07:41:24

如何将GridViewEX升级到UWP（Universal Windows Platform）平台的相关文章

将Win8.1/WP8.1应用迁移到Universal Windows Platform

在上一篇在VS2015 RC打开CTP中创建的工程,我们介绍了怎么在RC中打开CTP中创建的Universal 工程,这一篇我们来讲下怎么将Windows 8.1/WP8.1的应用迁移到Universal Windows Platform上. 2015RC中,我们可以将8.1的应用迁移到统一平台上,进而使用新的API进行开发,下面我们使用wp8.1的应用作为例子讲解下步骤. 1. 首先我们使用2015打开之前的工程. 2. 右键点击工程,选择“卸载项目”. 3. 右键点击工程,选择“编辑XXX.

微软的Universal Windows Platform(UWP)

所谓Universal Windows App(简称UWP),就是开发一次,可以运行于所有以Windows 10为内核的系统和设备上,包括:桌面设备.移动设备.XBox.HoloLens甚至物联网设备. 随着Windows 10在7月29日正式发布. 参考:如何入门UWP开发 http://www.zhihu.com/question/34356819 用.NET开发通用Windows App

如何使用 App Studio 快速定制你自己的 Universal Windows App

今天之所以在写一篇关于 App Studio 的文章是因为,App Studio 经过了几次升级功能得到了明显提升还可以调用系统功能了,并且可以更方便的和应用商店关联发布 Universal Windows 应用(注:这是指 Windows 8.1 和 Windows Phone 8.1应用)以及 Windows Phone 8.0应用,接下来我为大家在介绍一下这升级后的 Universal Windows App Studio 使用 App Studio 的意义在于你有一个好的创意,但是由于时

Universal Windows App

Universal Windows App 是一种构建于 Universal Windows Platform (UWP) 之上的 Windows 体验,它首次作为 Windows 运行时在 Windows 8 中引入.Universal Windows App 通常通过 Windows 应用商店进行分发(但也可能会以旁加载形式进行分发),并且通常采用 .APPX 打包格式进行打包和分发. Windows 运行时应用是使用 Windows 运行时且在 Windows 8 或 8.1 设备(如 P

2015 MVP 社区大课堂开课了, 给App及Web开发者学习最新的Universal Windows 平台知识

Windows 10 Developer Readiness - Powered by MVPs - 由微软最有价值专家(MVP)主讲在免费线直播课程 ---------- One windows platform, the Universal Windows Platform ---------- 欢迎参加在6月11日周四晚上7点,由微软MVP专家为您带来de Windows 10应用开发课程,微软最有价值专家MVP讲师将为您呈现微软最新技术,帮助开发者在Universal Windows 平

使用 Portable Class Library（可移植类库）开发 Universal Windows App

今天在这里跟大家聊聊关于 Windows Universal 应用夸平台的问题,首先Universal Windows App的定义相信大家已经有所了解了(如果你是一个刚刚接触 Universal APP 的开发这个请先阅读一下我之前的文章 Windows Phone 8.1 开发技术概览 [Universal APP]), 相信大家在这里最苦恼的事情莫过于在不同开发架构下分享代码了,今天我在这里给大家推荐一个解决方案使用可移植类库(Portable Class Library)在不同的Wind

分享一下我的部分毕设内容：基于Windows Phone平台的污染源管理应用

原文:分享一下我的部分毕设内容:基于Windows Phone平台的污染源管理应用 毕业半年,又总结了一下之前的工作,发现很多知识不复习都忘记了.最近新闻总是报道北京的空气污染,各种雾霾,各种PM X超标,然后想到以后我们有饭吃了(俺也算是搞环境的科班出身,本科环境科学专业),然后联系到本科的毕业论文,刚好做的是大气污染相关的,于是闲来和大家分享一下,也算是对自己的之前工作的一个总结. 论文主要做的一个基于Web和Windows Phone平台的污染预测和污染源管理的应用,大体的功能就是根据污染

BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第5章节--Windows Azure概览 Windows Azure平台

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第5章节--Windows Azure概览 Windows Azure平台 Windows Azure平台由许多不同服务组成.你可以在你的应用程序设计.部署和管理中使用它们.下图展示了Windows Azure中不同层:数据.服务和集成(客户端层可以是Windows Azure中任何消费服务的应用程序).

C++ 11开发环境搭建（Windows Platform）

C++ 11开发环境搭建(Windows Platform) IDE:Code::Blocks  12.11版本 Compiler:TDM-GCC        http://tdm-gcc.tdragon.net/           TDM64 Bundle GCC 4.8.1 问:什么是TDM-GCC? 答:A compiler suite for 32- and 64-bit Windows based on the GNU toolchain. tdm-gcc 官网: TDM-GCC