WIN10 series: C # App Control Basics 20

Semanticzoom controls

The semanticzoom controls are made up of interconnected, zoomed-in and zoomed-out views that reduce the index that the view uses to display content, and the zoomed-in view can be used to display the details of the content, and users can switch freely between the two views according to their reading needs.

In a XAML file, the use of the Semanticzoom control is as follows:

<semanticzoom ...>

<SemanticZoom.ZoomedOutView>

<!-- add zoomed-out view content -

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

<!-- add zoomed-in view content -

</SemanticZoom.ZoomedInView>

</SemanticZoom>

Here are some common properties of the Semanticzoom control:

• Iszoomedinviewactive property, Gets or sets whether the zoomed-in view of the Semanticzoom control is the active view. When the property value is true, the zoomed-in view is the active view, and the running program first displays the magnified view content. When the property value is False, the running program first displays the contents of the zoomed-out view.
• Zoomedinview property, Gets or sets the magnified view content of the Semanticzoom control.
• Zoomedoutview property, Gets or sets the zoomed-out view content of the Semanticzoom control.

After describing the common properties, take a look at the common events of the Semanticzoom control:

• The viewchangecompleted event, which is triggered when the view change is complete.
• The viewchangestarted event, which is triggered when the view starts to change.

Next, use the Semanticzoom control to design an app that can display zoomed-in and zoomed-out views, place an indexed picture in the zoomed-out view, and place a detailed display picture of the indexed picture in the zoomed-out view.

Create a new Windows store blank application project and name Semanticzoomdemo, add a folder named "Images" to the project and add 6 vegetable pictures in this folder, 1 of which are used to represent the vegetable category, The other 5 shows 5 different kinds of vegetables associated with this category. Double-click the open MainPage.xaml file to add the following code to the grid element.

<semanticzoom iszoomedinviewactive= "False" >

<SemanticZoom.ZoomedOutView>

<!-- in the zoomed-out view, add ListView control and add it inside this control 1 Photo -

<listview verticalalignment= "Center" width= "$" scrollviewer.isverticalscrollchainingenabled= "False" Horizontalalignment= "Center" >

<image source= "images/vegetables.jpg" width= "height="

</ListView>

</SemanticZoom.ZoomedOutView>

<SemanticZoom.ZoomedInView>

<!-- add in zoomed-in view ListView control and add it in this control 5 Photo -

<listview verticalalignment= "Center" scrollviewer.isverticalscrollchainingenabled= "False" HorizontalAlignment= "Center" >

<stackpanel orientation= "Horizontal" >

<image source= "images/baicai.jpg" width= "" "Height="/> "

<image source= "images/bocai.jpg" width= "" "Height="/> "

<image source= "images/qincai.jpg" width= "" "Height="/> "

<image source= "images/suanmiao.jpg" width= "" "Height="/> "

<image source= "images/youcai.jpg" width= "" "Height="/> "

</StackPanel>

</ListView>

</SemanticZoom.ZoomedInView>

</SemanticZoom>

In the preceding code, add a Semanticzoom control and set its Iszoomedinviewactive property value to False, so that the Semanticzoom control first shows the zoomed-out view content. Add a ListView control within the Semanticzoom control's narrowing view element Semanticzoom.zoomedoutview, and place an image control that displays a picture of the vegetable category in the ListView control.

Add a ListView control inside the Loupe view element Semanticzoom.zoomedinview, add five image controls that represent the specific vegetable picture in the ListView control, and use the StackPanel element to lay out the five image controls, defining Stackpa The Nel Orientation property value is horizontal arranges five pictures horizontally.

Run the program on the screen to first display a picture of the vegetable type in a zoomed-out view, as shown in effect 4-32. Click this picture to display a picture of five different vegetables in a magnified view, as shown in effect 4-33, click the Zoom Out button in the lower-right corner of the zoomed-in view to switch back to zoomed-out view.

Figure 4-32 Zoomed-in view of the Semanticzoom control's zoom 4-33 semanticzoom control

WIN10 series: C # App Control Basics 20