New Fashion Windows 8 Development (25): Zoom View

In the previous section, we discussed the Group view. In this section, we will blow the zoom view. How can we scale this view? We refuse to abstract them.

 

 

In the above two figures, the first image is a thumbnail view, and the second image shows a full view. Therefore, the first image is better than a thousand words in theory.

 

To achieve this, we have two major tools to introduce.

Among them, the first one is visible, that is, semanticzoom. At first glance, this thing may be a bit mysterious. In fact, it has nothing. We mainly grasp its two attributes:

1. zoomedoutview is a thumbnail view, that is, Picture 1 above.

2. zoomedinview is an enlarged view, that is, picture 2 above.

They all need a view control that implements isemanticzoominformation by port. I will not talk about it anymore. Open the Object Browser and find the isemanticzoominformation interface to see which classes have implemented this interface.

 

The second tool is invisible and is located in collectionviewsource under the windows. UI. XAML. Data namespace. This is not difficult to use, but it is not easy to understand. It is recommended that you study it in depth, debug more, and break more points to understand it. You must make full use of the powerful functions of, otherwise, it would be a waste.

Collectionviewsource is designed for data binding with UI view interaction, especially when grouping is required, because:

As for how to group data sources after data sources are grouped, I don't need to talk about it much. Please use LINQ to avoid wasting your knowledge.

The issourcegrouped attribute indicates whether to allow grouping. You know how to set it.

Itemspath is the attribute path of the list contained in the group. For more information, see the following example.

 

The view attribute is used to obtain the View data. If {binding} is used to bind the View data in XAML, you can ignore it. If code is used, remember to read the data in the view.

 

Microsoft hides some classes, that is, it does not disclose them to the outside world, but only exposes interfaces and does not disclose specific classes that implement interfaces. This makes it a bit painful to understand, but wherever it is, you can use the same method. If you cannot understand it, I will tell you a way to stick it back and understand it.

 

Theoretical things are mostly in the fog, so I prefer examples to let the facts speak.

Create an empty page project and open mainpage. XAML. cs. We need to prepare some entity classes for testing.

Public class student {public string name {Get; set;} Public String address {Get; Set ;}} public class grouptitleconverter: ivalueconverter {public object convert (object value, type targettype, object parameter, string language) {return string. format ("Last Name: {0}", value);} public object convertback (object value, type targettype, object parameter, string language) {return NULL ;}}

 

The following is the XAML code, mainpage. XAML.

<Page X: class = "app5.mainpage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Local = "using: app5" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D"> <page. resources> <local: grouptitleconverter X: Name = "ttcvt"/> <style X: Key =" Gridvitemstyle "targettype =" gridviewitem "> <setter property =" background "value =" green "/> <setter property =" verticalcontentalignment "value =" bottom "/> <setter property = "horizontalcontentalignment" value = "Left"/> <setter property = "margin" value = "10"/> </style> </page. resources> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <semanticzoom> <! -- External view --> <semanticzoom. zoomedoutview> <gridview X: Name = "GV" horizontalalignment = "center" verticalignment = "center" itemcontainerstyle = "{staticresource gridvitemstyle}"> <gridview. itemtemplate> <datatemplate> <textblock fontsize = "24" text = "{binding Path = group. key, converter = {staticresource ttcvt} "fontfamily =" "/> </datatemplate> </gridview. itemtemplate> <gridview. itemspanel> <itemspaneltemplate> <Wrapgrid orientation = "horizontal" maximumrowsorcolumns = "3" itemheight = "80" itemwidth = "160"/> </itemspaneltemplate> </gridview. itemspanel> </gridview> </semanticzoom. zoomedoutview> <! -- Inner View --> <semanticzoom. zoomedinview> <listview X: Name = "lvinview"> <listview. groupstyle> <groupstyle. headertemplate> <datatemplate> <grid margin = "1, 65, 0, 3 "background =" orange "> <textblock text =" {binding key} "fontsize =" 50 "fontweight =" black "fontfamily =" "margin =" 5 "/> </GRID> </datatemplate> </groupstyle. headertemplate> <groupstyle. panel> <itemspaneltemplate> <variablesizedwrapgrid orientation = "horizontal" itemwidth = "225" maximumrowsorcolumns = "3"/> </itemspaneltemplate> </groupstyle. panel> </groupstyle> </listview. groupstyle> <listview. itemtemplate> <datatemplate> <stackpanel> <textblock fontsize = "20" fontweight = "bold" text = "{binding name}" fontfamily = ""/> <stackpanel orientation =" horizontal "> <textblock text =" Address: "/> <textblock text =" {binding address} "/> </stackpanel> </datatemplate> </listview. itemtemplate> </listview> </semanticzoom. zoomedinview> </semanticzoom> </GRID> </Page>

 

// [C #] public mainpage () {This. initializecomponent (); // get some data sources to test student [] students = {New Student {name = "Sun dare", address = "rrrrrrrrrrrrrrrrrrr "}, new student {name = "", address = "eeeeeeeeeeeeeeeeee"}, new student {name = "Golden Bone", address = "kkkkkkkkkkkkkk "}, new student {name = "Sun Daya", address = "ffffffffff"}, new student {name = "Tang Superman", address = "66666666666666 "}, new student {name = "", address = "55555555555555555"}, new student {name = "", address = "777777777777777777777 "}, new student {name = "high yesterday", address = "eeeeeeeeewwww"}, new student {name = "high tomorrow", address = "ppppppppppppp "}, new student {name = "yuansansi", address = "ssssssssssssssssss"}, new student {name = "San Li", address = "ssssssssssssssss "}, new student {name = "Gao fushuai", address = "ccccccccccccccccc"}, new student {name = "Li xx", address = "eeeeeeeeeeeee "}, new student {name = "", address = "dfeeggggeeeww"}, new student {name = "", address = "zzzzzzzzzzzzzzzz "}, new student {name = "Yuan sanlang", address = "ddddddddddddddddddd"}, new student {name = "Tang xiao'er", address = "hhhhhhhhhhhhhhhhhh "}, new student {name = "", address = "222222222222222"}, new student {name = "diamond", address = "Dead End "}, new student {name = "Zeng ye Ren", address = "Angola" }}; // grouping data sources var res = (from S in Students Group S by S. name [0]. tostring (). toupper () into G select new {key = G. key, studentitems = G. tolist ()}). tolist <dynamic> (); // instantiate the collectionviewsource object collectionviewsource CVS = new collectionviewsource (); CVs. issourcegrouped = true; // supports the path of the Set item after grouping // in this example, studentitems CVs. itemspath = new propertypath ("studentitems"); // set the data source, which is the dynamic list of CVS in the group we just divided. source = res; // bind this to the two views respectively. lvinview. itemssource = CVs. view; this. GV. itemssource = CVs. view. collectiongroups ;}

I will not explain this. It is not a problem that WPF has learned well.

The key now is how to figure out the internal structure of collectionviewsource.

 

Add the following code after the above Code.

            foreach (var item in cvs.View.CollectionGroups)            {                ICollectionViewGroup vg = (ICollectionViewGroup)item;                dynamic ent = vg.Group as dynamic;            }

Next breakpoint.

 

Then run the debugging and follow up in a single step.

Do you understand it now? Try it more. I wish you success.

 

Therefore, we can draw such a structure chart.