-
Notifications
You must be signed in to change notification settings - Fork 8k
/
SemanticZoomPage.xaml
81 lines (75 loc) · 4.74 KB
/
SemanticZoomPage.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->
<Page
x:Class="AppUIBasics.ControlPages.SemanticZoomPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppUIBasics.ControlPages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wuxdata="using:Windows.UI.Xaml.Data"
mc:Ignorable="d"
xmlns:data="using:AppUIBasics.Data">
<Page.Resources>
<CollectionViewSource x:Name="cvsGroups" Source="{x:Bind Groups}" IsSourceGrouped="True" ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/ControlInfoData.json, Type=data:ControlInfoDataSource}}"/>
<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
<StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
<Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
<StackPanel Margin="20,0,0,0">
<TextBlock Text="{x:Bind Title}" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="{x:Bind Subtitle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
<TextBlock Text="{x:Bind Title}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
<TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}" Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>
</Page.Resources>
<local:ControlExample HeaderText="A simple SemanticZoom">
<SemanticZoom x:Name="Control1" Height="500">
<SemanticZoom.ZoomedInView>
<GridView ItemsSource="{x:Bind cvsGroups.View}" ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionMode="None"
ItemTemplate="{StaticResource ZoomedInTemplate}">
<GridView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}" SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
<local:ControlExample.Xaml>
<RichTextBlock>
<Paragraph><SemanticZoom Height="500"></Paragraph>
<Paragraph TextIndent="12"><SemanticZoom.ZoomedInView></Paragraph>
<Paragraph TextIndent="24"><GridView ItemsSource="{x:Bind cvsGroups.View}" SelectionMode="None"</Paragraph>
<Paragraph TextIndent="60">ItemTemplate="{StaticResource ZoomedInTemplate}"></Paragraph>
<Paragraph TextIndent="36"><GridView.GroupStyle></Paragraph>
<Paragraph TextIndent="48"><GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" /></Paragraph>
<Paragraph TextIndent="36"></GridView.GroupStyle></Paragraph>
<Paragraph TextIndent="24"></GridView></Paragraph>
<Paragraph TextIndent="12"></SemanticZoom.ZoomedInView></Paragraph>
<Paragraph></Paragraph>
<Paragraph TextIndent="12"><SemanticZoom.ZoomedOutView></Paragraph>
<Paragraph TextIndent="24"><ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}" HorizontalAlignment="Stretch"</Paragraph>
<Paragraph TextIndent="60">SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" /></Paragraph>
<Paragraph TextIndent="12"></SemanticZoom.ZoomedOutView></Paragraph>
<Paragraph></SemanticZoom></Paragraph>
</RichTextBlock>
</local:ControlExample.Xaml>
</local:ControlExample>
</Page>