频道栏目
首页 > 程序开发 > 移动开发 > Windows Phone > 正文
如何将GridViewEX升级到UWP(Universal Windows Platform)平台
2015-10-28 13:39:40         来源:葡萄城控件技术团队博客  
收藏   我要投稿

引言

 

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

extended

 

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:  
       2:                  
       3:                      
       4:                          
       5:                      
       6:                  
       7:                  
       8:                  
       9:                  
      10:                  

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

       1:  /// 
       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:  /// 
       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文件:

    
        
            
                
            
        
        
        
        
        

    新占位符(NewGroupPlaceholder)控件

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

    GridViewEx

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

       1:

    修改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:  /// 
       2:  /// Set column spans depending on group id.
       3:  /// 
       4:  ///
       5:  ///
       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:  
       2:      
       3:          
       4:                                 ItemWidth={Binding TileSize, ElementName=pageRoot}
       5:                                 Orientation=Horizontal MaximumRowsOrColumns=10/>
       6:      
       7:  

     

    总结

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

    示例图片:

    live

     

     

点击复制链接 与好友分享!回本站首页
相关TAG标签 平台
上一篇:Universal Windows Platform 第二弹 移动版秒变桌面版 实践:罗马数计算器
下一篇:利用openssl管理证书及SSL编程第2部分:在Windows上编译 openssl
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站