Eine Snap View lässt sich in einer Windows Store app mit dem VisualStateManager sehr einfach realisieren. Damit der VisualStateManager genutzt werden kann, muss die Seite vom Typ LayoutAwarePage sein.
Wer ein neues Element zu seinem Projekt (seiner Solution) hinzufügt, der kann bereits die Basic Page auswählen und erhält dann bereits eine Vorlage für eine LayoutAwarePage. Alles was man dann noch tun muss, ist den VisualState definieren (z.B. Snapped für die Snap View) und das Verhalten der Layout-Elemente, wenn dieser Zustand erreicht wird.
Mit XAML sieht das dann in etwa so aus:
1 2 3 4 5 6 7 8 9 10 | <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButtonDummy" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> |
Dieses Markup führt dazu, dass beim Einschalten der Snap View das Element mit dem Namen backButton ausgeblendet wird und das Element mit dem Namen pageTitle den Stil von PageHeaderTextStyle auf SnappedPageHeaderTextStyle wechselt.
Ist der VisualState nicht mehr Snapped (weil der Anwender die App beispielsweise wieder im Vollbild-Modus betrachtet), dann werden automatisch die Werte verwendet, mit denen die Elemente definiert worden sind.
Hier ein komplettes Beispiel:
Pages/StartupPage.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 | <common:LayoutAwarePage x:Name="pageRoot" x:Class="InformatikTutorials.Pages.StartupPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:InformatikTutorials.Pages" xmlns:common="using:InformatikTutorials.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <!-- Root --> <Grid x:Name="root" Style="{StaticResource LayoutRootStyle}"> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- Header --> <Grid Grid.Row="0" x:Name="header"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Grid.Column="0" x:Name="backButtonDummy" Height="48" Width="48" Margin="36,0,36,36" VerticalAlignment="Bottom" /> <TextBlock Grid.Column="1" x:Name="pageTitle" Text="Hello World" Style="{StaticResource PageHeaderTextStyle}"/> </Grid> <!-- Content --> <Grid Grid.Row="1" x:Name="contentWrapper"> <ProgressRing x:Name="loadingBar" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="120" Foreground="White" IsActive="True" /> </Grid> <!-- Visual states: Fullscreen, Snapped, etc. --> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <VisualState x:Name="FullScreenPortrait" /> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButtonDummy" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </common:LayoutAwarePage> |