Share barley UWP Version development history-02. Content "Height/width" different list display

A molded product, is definitely through the product manager out of the UE, the design of the UI, eventually to our hands coding, which is at least 3 people, at most do not know how many people involved. Everyone's brain thinking is not the same, I will not paste that "xx eyes xx" that figure. This is to say, in this case, the project list in the small screen state, because the special description of the project in the Project Description box is not fit (a bunch of words are squeezed together), the product manager and the art of the discussion, "Well, if the screen is too small directly under the project outline block, and there is a description of the display, not described At first I thought it was a very simple thing, add a few judgments on the end, and later discovered how I was too young too simplicity ...

If as simple as I add a judgment, there is a description of the time display, not described when not displayed, the last entire list, each item will be the height of the maximum value, to set all the data items. That interval, that ugly, I won't say anything. Finally also a variety of online search, saw an article, now really can't think of who's, here is not special thanks. You have seen this kind of solution, has solved the problem, please ignore. The effect shown is the final barley display, with a description of the red font in the list, a display in the project card, no special description, normal display, all intervals, all the styles are normal.

It takes a few steps to achieve the effect:

Step 1, customize a variable width or height of the GridView, inherit the system of the GridView, the replication Preparecontainerforitemoverride method.

usingWindows.UI.Xaml;usingWindows.UI.Xaml.Controls;namespacedamai.windows10.tools{ Public classVariablewidthwrapgridview:gridview {protected Override voidPreparecontainerforitemoverride (DependencyObject element,ObjectItem) {            if(item isivariablewidthwrapdata) {element. SetValue (Variablesizedwrapgrid.columnspanproperty, (item asivariablewidthwrapdata).                Gridcolspan); Element. SetValue (Variablesizedwrapgrid.rowspanproperty, (item asivariablewidthwrapdata).            Gridrowspan); }            Base.        Preparecontainerforitemoverride (element, item); }    }}

Step1.1, suddenly see the above also used a ivariablewidthwrapdata, this is purely a habit of mine, consider the following data model must contain these two properties, simply define an interface

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;namespacedamai.windows10.tools{ Public InterfaceIvariablewidthwrapdata {/// <summary>        ///spanning rows (1 start)/// </summary>        intGridrowspan {Get;Set; } /// <summary>        ///column spanning (1 start)/// </summary>        intGridcolspan {Get;Set; } }}

STEP2, modify your data model, you will need to bind the interface data, the implementation of just that interface, the initial assignment

usingDamai.Windows10.Tools;namespacedamai.windows10.app{/// <summary>    ///Search Results/// </summary>     Public classSearchresultmodel:basemodel, Ivariablewidthwrapdata { PublicSearchresultmodel () {Gridcolspan=1; Gridrowspan= Tempdatainfo.isphonemode?148:202; }        //other properties I've deleted.        /// <summary>        ///Cross-line/// </summary>         Public intGridrowspan {Get            {                return_gridrowspan; }            Set{_gridrowspan=value; Rasiepropertychangedevent ("Gridrowspan"); }        }         Public intGridcolspan {Get            {                return_gridcolspan; }            Set{_gridcolspan=value; Rasiepropertychangedevent ("Gridcolspan"); }        }    }}

STEP3, modify the interface of the GridView control, use the custom GridView control, and modify Itemspanel, using Variablesizewrapgrid. Here I need to customize the height of the control, so I define itemheight as 1, so follow me as long as I have to determine whether there is a special description, there is a description, Gridrowspan assignment More, no explanation, less assignment, 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:projectcardvi EW datacontext="{Binding}"margin="{Binding elementname=rectanglemargin, path=margin}"Width="{Binding elementname=rectanglewidth, path=width}"/> </DataTemplate> </GridView.ItemTemplate> &L T;/tool:variablewidthwrapgridview>

Share barley UWP Version development history-02. Content "Height/width" different list display