none
分享大麦UWP版本开发历程-02.内容“高度/宽度”不同的列表展示 RRS feed

  • 常规讨论

  • 一个成型的产品,肯定是经过了产品经理出的UE,美工设计的UI,最终到我们手里Coding,这里面最少3个人,最多就不知道会有多少人参与了。每个人脑子想的都是不一样的,我就不粘贴那个“XX眼中的XX”那个图了。这次讲的是,遇到这么一个情况,项目列表在小屏幕状态下,因为项目的特殊描述在项目描述框里面放不下(一堆字都挤到一起了),产品经理和美工一商量,“嗯,如果屏幕过小就直接放在项目概要块的下面,而且有描述的显示,没描述的不显示”。开始我以为是一件很简单的事情,加几个判断就完了,后来才发现我是多么的 too young too simple……

        如果像我那样简单的加个判断,有描述的时候显示,没描述的时候不显示,最后整个列表,每一个Item都会按照高度的最大值,去统一设置所有的数据项。那个间隔,那个难看,我就不说什么了。最后也是各种网上搜索,看到了一篇文章,现在实在想不起来看的是谁的了,这里就不特别感谢了。大家看过这类的解决方案,已经解决问题的,请忽略。下图所示效果,就是最终大麦的展示效果,列表中,有红色字体的描述,展示在项目卡片的下放,没有特别描述的,正常展示,所有间隔,所有样式正常。

          

    实现效果,需要这么几个步骤:

    Step 1,自定义一个可变宽度或高度的GridView,继承系统的GridView,复写PrepareContainerForItemOverride方法。

    复制代码
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace Damai.Windows10.Tools
    {
        public class VariableWidthWrapGridView : GridView
        {
            protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
            {
                if (item is IvariableWidthWrapData)
                {
                    element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, (item as IvariableWidthWrapData).GridColSpan);
                    element.SetValue(VariableSizedWrapGrid.RowSpanProperty, (item as IvariableWidthWrapData).GridRowSpan);
                }
    
                base.PrepareContainerForItemOverride(element, item);
            }
        }
    }
    复制代码

    Step1.1,突然看到上面还用到了一个IvariableWidthWrapData,这个纯粹是我的一个习惯,考虑后面的数据Model必须要包含这两个属性,干脆定义了一个接口

    复制代码
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace Damai.Windows10.Tools
    {
        public interface IvariableWidthWrapData
        {
            /// <summary>
            /// 跨越行(1开始)
            /// </summary>
            int GridRowSpan { get; set; }
    
            /// <summary>
            /// 列跨越(1开始)
            /// </summary>
            int GridColSpan { get; set; }
        }
    }
    复制代码

    Step2,修改你的数据Model,将需要绑定界面的数据,实现刚才那个接口,初始赋值

    复制代码
    using Damai.Windows10.Tools;
    
    namespace Damai.Windows10.App
    {
        /// <summary>
        /// 搜索结果
        /// </summary>
        public class SearchResultModel : BaseModel, IvariableWidthWrapData
        {  
            public SearchResultModel()
            {
                GridColSpan = 1;
                GridRowSpan = TempDataInfo.IsPhoneMode ? 148 : 202;
            }
    
            // 其他属性我都删除了
    
            /// <summary>
            /// 跨行
            /// </summary>
            public int GridRowSpan
            {
                get
                {
                    return _gridRowSpan;
                }
                set
                {
                    _gridRowSpan = value;
                    RasiePropertyChangedEvent("GridRowSpan");
                }
            }
    
            public int GridColSpan
            {
                get
                {
                    return _gridColSpan;
                }
                set
                {
                    _gridColSpan = value;
                    RasiePropertyChangedEvent("GridColSpan");
                }
            }
        }
    }
    复制代码

    Step3,修改界面的GridView控件,使用自定义的GridView控件,并修改ItemsPanel,使用VariableSizeWrapGrid。这里我需要自定义的是控件的高度,所以我就定义ItemHeight为1,这样后续我只要判断是否有特殊说明,有说明的,GridRowSpan赋值多一些,没有说明的,赋值少一些,就Ok了

    复制代码
    <Tool:VariableWidthWrapGridView x:Name="gridViewHotList" RelativePanel.Below="tblockTip" IsItemClickEnabled="True" ItemClick="gridViewHotList_ItemClick" Margin="20,0,0,0" SelectionMode="None">
                    
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="1"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ProjectCardView DataContext="{Binding}" Margin="{Binding ElementName=rectangleMargin, Path=Margin}" Width="{Binding ElementName=rectangleWidth, Path=Width}"/>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    
                </Tool:VariableWidthWrapGridView>
    复制代码
    2016年2月23日 2:51