Windows 8 Metro Study Notes (20)-Use of semanticzoom

Semanticzoom is a semantic scaling control that can be switched between two related views. For example, zoomoutview displays title information, while zoominview displays details.

Let's take a look at its simple use. The following example is a simple switch between the word view corresponding to the start Letter and the letter.

XAML code:

<Semanticzoom X: Name = "sezo" viewchangestarted = "sezo_viewchangestarted_1" viewchangecompleted = "sezo_viewchangecompleted_1">
<Semanticzoom. zoomedinview>
<Listview X: Name = "zoomedin"
Style = "{staticresource zoomablelistviewtemplate }"
Itemtemplate = "{staticresource zoomedinitemtemplate }"
Itemcontainerstyle = "{staticresource zoomedinitemstyle}"/>
</Semanticzoom. zoomedinview>
<Semanticzoom. zoomedoutview>
<Gridview X: Name = 'zoomedout' scrollviewer. zoommode = "disabled"
Itemtemplate = "{staticresource zoomedoutitemtemplate }"
Itemcontainerstyle = "{staticresource zoomedoutitemstyle }"
Itemspanel = "{staticresource zoomedoutitemspaneltemplate}"/>
</Semanticzoom. zoomedoutview>
</Semanticzoom>

The code structure above is very clear. The two views are displayed in listview and gridview respectively.

Background. CS code:

 

Private void loaddata ()
{
Zoomedin. itemssource = datahelper. collectionoffruits ();
Zoomedout. itemssource = datahelper. collectionoffruitheaders ();
}
Private void sezo_viewchangestarted_1 (Object sender, semanticzoomviewchangedeventargs E)
{
If (E. issourcezoomedinview)
{
If (E. sourceitem. item! = NULL)
{
E. destinationitem. Item = E. sourceitem. item. tostring () [0];
}
}
Else
{
If (E. sourceitem. item! = NULL)
{
E. destinationitem. Item = datahelper. getfirstfruitbyfirstletter (E. sourceitem. item. tostring () [0]);
}
}
Async private void sezo_viewchangecompleted_1 (Object sender, semanticzoomviewchangedeventargs E)
{
If (E. issourcezoomedinview)
{
Messagedialog MEs = new messagedialog ("zoomoutview! ");
Await mes. showasync ();
}
Else {
Messagedialog MEs = new messagedialog ("zoominview! ");
Await mes. showasync ();
}
}
}

The above two events are the two most commonly used events in semanticzoom. viewchangestarted events are used to handle the responses made when the view changes. The above operations provide information about the view area to the new view; the viewchangecompleted event is used to process the response after the view switch is complete. The preceding e-table represents the object before the view switch.

The above is some of the most basic use, of course, listview and gridview can basically implement our functions, but during the project, you need to use the flipview control in the View of semanticzoom, when used directly, the system is notified that "the specified value cannot be assigned, which should be isemanticzoominformation of the following type". The reason is that the visual control in semanticzoom must inherit the isemanticzoominformation class, flipview is not inherited. Is it swollen?

Only one control is implemented by yourself. This control inherits flipview and isemanticzoominformation, and finds an inherited control on msdn. You can share it with us:

 

Public class sezoflipview: flipview, isemanticzoominformation
{
Public sezoflipview (){}

# Region isemanticzoominformation

Public void completeviewchange ()
{
// Do nothing
}

Public void completeviewchangefrom (semanticzoomlocation source, semanticzoomlocation destination)
{
// Do nothing
}

Public void completeviewchangeto (semanticzoomlocation source, semanticzoomlocation destination)
{
// Do nothing
}

Public void initializeviewchange ()
{
// Do nothing
}

Public bool isactiveview
{
Get;
Set;
}

Public bool iszoomedinview
{
Get;
Set;
}

Public void makevisible (semanticzoomlocation item)
{
If (item! = NULL & item. item! = NULL)
{
This. selecteditem = item. item;
}
}

Public semanticzoom semanticzoomowner
{
Get;
Set;
}

Public void startviewchangefrom (semanticzoomlocation source, semanticzoomlocation destination)
{
If (this. iszoomedinview)
{
Source. Item = This. selecteditem;
Destination. Item = This. selecteditem. tostring () [0]. tostring ();

}
}

Public void startviewchangeto (semanticzoomlocation source, semanticzoomlocation destination)
{
// Do nothing
}

# Endregion isemanticzoominformation
}

Now, you can reference it again:

<Semanticzoom X: Name = "sezo" Height = "650" width = "850"
Viewchangestarted = "viewchangestarted" viewchangecompleted = "viewchangecompleted">
<Semanticzoom. zoomedinview>
<Local: sezoflipview X: Name = 'zoomedin' borderbrush = "white" borderthickness = "2"
Scrollviewer. zoommode = "enabled"
Itemtemplate = "{staticresource flipviewitemtemplate}"/>
</Semanticzoom. zoomedinview>
<Semanticzoom. zoomedoutview>
<Gridview X: Name = 'zoomedout' scrollviewer. zoommode = "disabled"
Itemtemplate = "{staticresource zoomedoutitemtemplate }"
Itemcontainerstyle = "{staticresource zoomedoutitemstyle }"
Itemspanel = "{staticresource zoomedoutitemspaneltemplate}"/>
</Semanticzoom. zoomedoutview>
</Semanticzoom>

This control seems easy. In fact, it is easy to use it by yourself ~