码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-02-22 11:42:30      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

    一个成型的产品,肯定是经过了产品经理出的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>

 

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

标签:

原文地址:http://www.cnblogs.com/Damai-Pang/p/5206412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!