"Miles Journey--windows App development" Semanticzoom View switch

I'm sure my friends who used Windows Phone or Windows 8/8.1/10 are not unfamiliar with this one. This is achieved through semanticzoom, which is especially true when there is too much data. It has a zoomed-in view of Zoomedinview and a narrowing attempt to zoomedoutview, which is used primarily to display the details of the current page, while the latter is dedicated to fast navigation.

So I'm going to do it myself. First, we add the approximate interface in XAML, just like drawing a contour first.

<Grid Name="Grid1" Background="{ThemeResource Applicationpagebackgroundthemebrush} ">        <SemanticZoom x:name="SemanticZoom" verticalalignment="Center"  HorizontalAlignment="Center">               <semanticzoom.zoomedoutview>            </semanticzoom.zoomedoutview>            <semanticzoom.zoomedinview>            </semanticzoom.zoomedinview>        </SemanticZoom>    </Grid>

Then add the items you want to join in the two views separately. The core of this is that both Zoomedoutview and Zoomedinview are using the same CollectionViewSource object as their own dataset. And this attribute we talked about in the previous section: "Miles Journey--windows App development" Listview&gridview group.

Let's write the backstage code first. I'm like a piece of the act of pretending to write a class bar ^_^

    publicclass Alarm    {        publicstringgetset; }        publicgetset; }        publicstringgetset; }             }

Then use a function to add a lot of data ... A whole bunch of data.

PrivateAlarm[]Addalarmdata(){return NewAlarm[] {NewAlarm {title="Alarm 1", Alarmclocktime=globaltime.addhours ( -), description="First Alarm for Study"},NewAlarm {title="Alarm 2", Alarmclocktime=globaltime.addhours (2), description="Second Alarm for Study"},NewAlarm {title="Alarm 3", Alarmclocktime=globaltime.addhours (7), description="Third Alarm for Study"},NewAlarm {title="Alarm 4", Alarmclocktime=globaltime.addhours (4), description="4th Alarm for Study"},NewAlarm {title="Alarm 5", Alarmclocktime=globaltime.addhours (5), description="First Alarm for fun"},NewAlarm {title="Alarm 6", Alarmclocktime=globaltime.addhours (1), description="First Alarm for fun"},NewAlarm {title="Alarm 7", Alarmclocktime=globaltime.addhours ( the), description="Second Alarm for Fun"},NewAlarm {title="Alarm 8", Alarmclocktime=globaltime.addhours (9), description="Third Alarm for fun"},NewAlarm {title="Alarm 9", Alarmclocktime=globaltime.addhours ( -), description="4th Alarm for Fun"},NewAlarm {title="Alarm", Alarmclocktime=globaltime.addhours ( -), description="Second Alarm for Sleep"},NewAlarm {title="Alarm", Alarmclocktime=globaltime.addhours (9), description="First Alarm for Sleep"}     };}

Because we're finally going to turn the zoomed-in view into a zoomed-out view, remember that there are some ABCD-like letters in the zoomed-out view, and here we use the time, which is divided into mid-afternoon and fine. This is done by a function like the one below. It uses a key-value pair, using time as a parameter. The data is then filtered out and bound to the newly added CollectionViewSource. As for GridView1 and GridView2 is about to be added to the XAML, here can be filled in first, and then back up.

Func<int,string> Switchtime = ( Time) =>{if( Time<=Ten&& Time>=6)return "Morning";Else if( Time>Ten&& Time< -)return "Noon";Else if( Time>= -&& Time<= -)return "Afternoon";Elsereturn "Good Night"; };var Vartime = fromTinchAddalarmdata () t.alarmclocktime.hour Group T bySwitchtime (T.alarmclocktime.hour); CollectionViewSource Collectionvs = new CollectionViewSource (); collectionvs.issourcegrouped =true; collectionvs.source = Vartime;this.gridview1.itemssource = collectionVS.View.CollectionGroups; This.gridView2.ItemsSource = Collectionvs.view;

Let's start by writing the main view (that is, zooming in).

<GridView x:name="GridView2" isswipeenabled="True"  HorizontalAlignment="center" verticalalignment="Center " scrollviewer.ishorizontalscrollchainingenabled="False" Width="1800"  Height="$">     <gridview.itemtemplate>         <DataTemplate>             <StackPanel Orientation= "horizontal" Margin="  HorizontalAlignment="Left" Background="White">                  <textblock  Text  =< Span class= "Hljs-value" > "{Binding Title}"  textwrapping  =" Wrap " foreground  =" Red " Span class= "Hljs-attribute" >fontfamily  = "Harrington"  width  = "all"   Height  = fontsize  =" " fontweight  =" light "/                   <textblock  Text  =< Span class= "Hljs-value" > "{Binding alarmclocktime}"  foreground  = "Red"  textwrapping  = "Wrap  " width  =" Max " height  = "+"   FontFamily  = "Harrington"  fontsize  =< Span class= "Hljs-value" "~"  fontweight  = " Light "/>                   <TextBlock Text="{Binding Description}"Foreground="Red"  TextWrapping="Wrap" Width="max"Height="  FontFamily="Harrington" FontSize= " fontweight" ="Light" />                         </StackPanel>          </DataTemplate>      </gridview.itemtemplate>      <gridview.itemspanel>           <itemspaneltemplate>                <itemswrapgrid maximumrowsorcolumns="8"/>           </itemspaneltemplate>      </gridview.itemspanel>      <gridview.groupstyle>           <GroupStyle>                 <groupstyle.headertemplate>                      <DataTemplate>                           <TextBlock Text=' {Binding Key} ' Foreground= '{StaticResource Applicationforegroundthemebrush} " Margin=" " FontSize=" FontFamily="Chinese Choi Wan" fontweight="Extrabold" />                      </DataTemplate>                 </groupstyle.headertemplate>            </GroupStyle>      </gridview.groupstyle></GridView>

I believe everyone can understand, and later I will add some comments in the OH. Then the zoom out view.

<gridview name="GridView1" Background="Wheat"Scrollviewer.ishorizontalscrollchainingenabled="False"Horizontalalignment="Center"Verticalalignment="Center"Width=" the"height=" the"> <GridView.ItemTemplate> <DataTemplate> <textblock width=" the"height=" the" Text="{Binding Group.key}" FontFamily="XXFarEastFont-Xingkai" FontWeight="Normal" FontSize=" the"/> </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <itemspane Ltemplate> <itemswrapgrid itemwidth=" the"itemheight=" the"maximumrowsorcolumns="2"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.ItemContainerStyle> <StyleTargettype="Gridviewitem"> <Setter  Property="Margin" Value=" A"/> <Setter  Property="Padding" Value="3"/> <Setter  Property="BorderThickness" Value="1"/> <Setter  Property="Background" Value="Green"/> </Style> </GridView.ItemContainerStyle></GridView>

Then the code is here, and then it's natural.

(This picture can be saved to the computer if you can't see it clearly.) ）

Then this blog is over, thank you again for your support! About these fonts, you can read this: "Miles Journey--windows App development" using gorgeous font.

"Miles Journey--windows App development" Semanticzoom View switch