Windows 8 series (9): support for layout changes caused by changes in visibility between variablesizedwrapgrid and wrapgrid

I haven't written a blog for a long time. Today I will share with you about the layout changes caused by changes in visibility at work.

Start with a small example. requirement: the "login" button is required in the Sina Weibo account adding interface. After you click this button, you need to change the button to progressring. If the logon fails, an error message is displayed and the progressring is replaced with the "Log on" button.

For example:

When switching between buttons and progressring, we generally adopt two methods:

1. Hide the buttons with two visibility attributes and then display them;

2. Click Delete or add progressring. Click Delete or add to delete progressring;

The second method is a waste of resources, so everyone regards the first method as a more common method, that is, using the visibility attribute to control the hiding of some UI elements, especially those that need to be switched over repeatedly.

 

Now let's start with the question:

It must be no stranger to those who have played Win8 development. This is an application for creating a gridview template in Vs and the homepage after startup.

The requirement is: Click an item to make it disappear from the interface, but the layout remains unchanged. That is, if I delete any unit, the subsequent unit will be added to the front, there is no blank space in the middle.

At first glance, similar to the requirements in the above example, you can add a visibility type attribute to the unit data of the dataset and hide it by binding it to the outermost layout control in the itemtemplate. But you did, but you found the result was as follows:

 

wow! Why? If you look at the Code of the gridview and try to modify the vertex content, you may find that:

<Gridview X: Name = "itemgridview" automationproperties. automationid = "itemgridview" automationproperties. name = "grouped items" grid. rowspan = "2" padding = "116,137, "itemssource =" {binding source = {staticresource groupeditemsviewsource} "itemtemplate =" {staticresource usage} "selectionmode =" NONE "isswipeenabled =" false "isitemclickenabled =" true "itemclick = ""itemview_itemclick"> <gridview. itemspanel> <itemspaneltemplate> <virtualizingstackpanel orientation = "horizontal"/> </itemspaneltemplate> </gridview. itemspanel> <gridview. groupstyle> <groupstyle. headertemplate> <datatemplate> <grid margin = ","> <button automationproperties. name = "group title" Click = "header_click" style = "{staticresource textprimarybuttonstyle}"> <stackpanel orientation = "horizontal"> <textblock text = "{binding title}" margin = "3, -, 10 "style =" {staticresource groupheadertextstyle} "/> <textblock text =" {staticresource chevronglyph} "fontfamily =" segoe UI symbol "margin =" 0, 10 "style =" {staticresource groupheadertextstyle} "/> </stackpanel> </button> </GRID> </datatemplate> </groupstyle. headertemplate> <groupstyle. panel> <itemspaneltemplate> <variablesizedwrapgrid orientation = "vertical" margin = "0, 0, 80"/> </itemspaneltemplate> </groupstyle. panel> </groupstyle> </gridview. groupstyle> </gridview>

Key Factor 1: variablesizedwrapgrid in <groupstyle. Panel>

If you replace variablesizedwrapgrid in <groupstyle. Panel> with <stackpanel orientation = "horizontal" margin = ", 80, 0"/>, you will find that the effect is like this:

After the item tititile 2 in group Title 1 is deleted, the subsequent elements move forward, proving that the variablesizedwrapgrid control does not support layout changes caused by changes in visibility. (Why is the space in the middle large after itemtitile2 is hidden, unlike other elements? This is for everyone to study and sell a pair of secrets ...)

 

Key Factor 2: wrapgrid

If you do not need to group your applications, a similar situation may occur, which may be:

<Gridview X: Name = "itemgridview" automationproperties. automationid = "itemgridview" automationproperties. name = "grouped items" grid. rowspan = "2" padding = "116,137, "itemssource =" {binding source = {staticresource groupeditemsviewsource} "itemtemplate =" {staticresource usage} "selectionmode =" NONE "isswipeenabled =" false "isitemclickenabled =" true "itemclick = ""itemview_itemclick"> <gridview. itemspanel> <itemspaneltemplate> <wrapgrid orientation = "vertical"/> </itemspaneltemplate> </gridview. itemspanel> </gridview>
 

 

Similarly, after hiding an item, the elements behind it do not fill in the space of the hidden element, but only hide that item, and the rest remains unchanged...

Then try changing wrapgrid to virtualizingstackpanel. The problem is solved.

You may be asking, if this is the case, the blank space is solved, but our overall layout is also disrupted...

 

That's right. In fact, these are only the following strategies. They are more to tell you the extent to which these controls support layout changes caused by changes to the visibility attribute. In comparison, maybeDelete data from Data SourceIt is a better solution, that is, to solve the problem of blank space and disrupt the layout.