Schnellstart: Entwerfen von Apps für unterschiedliche Fenstergrößen
Language: HTML | XAML

Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Wenn Sie eine App so entwerfen möchten, dass sie bei allen Fenstergrößen gut aussieht und funktioniert, müssen Sie die Entscheidung treffen, ob Sie zusätzliche Layouts als Erweiterung des standardmäßigen horizontalen Vollbildlayouts erstellen möchten. Sie können die App so anlegen, dass sie anstelle der Standardmindestbreite von 500 Pixel eine Mindestbreite von 320 Pixel unterstützt und dass zu einem vertikalen Layout gewechselt wird, wenn die Höhe der App ihre Breite übersteigt. Dies sind optionale Entwurfsentscheidungen.

Sehen Sie diese Features in unserer Reihe App-Features von A bis Z in Aktion.:  Windows Store-App-UI – Gesamtübersicht

Ziel: In diesem Artikel wird erläutert, wie Sie die Mindestbreite einer App von 500 Pixel in 320 Pixel ändern und das Design so anpassen, dass die App auch bei geringer Breite gut aussieht und funktioniert. Außerdem erfahren Sie, wie Sie eine horizontal schwenkbare App entwerfen, um immer dann zu einem vertikalen Layout zu wechseln, wenn die Höhe der App ihre Breite übersteigt.

Voraussetzungen

Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic

UX-Richtlinien für Layout und Skalierung

Beispiel: Layout für Fenster, deren Höhe ihre Breite übersteigt

In diesem Artikel werden die zusätzlichen Entwurfsoptionen für hohe und schmale Layouts erläutert. Die Implementierung wird unter Beispiel: Layout für Fenster, deren Höhe ihre Breite übersteigt beschrieben. Dieses Beispiel basiert auf der Vorlage „Grid App“ in Microsoft Visual Studio. Weitere Informationen zu Projektvorlagen für Windows Store-Apps finden Sie unter C#-, VB- und C++-Projektvorlagen für Windows Store-Apps.

Die Vorlage "Grid App" hat drei Seiten:

  • GroupedItemsPage
  • GroupDetailPage
  • ItemDetailPage
Sie nehmen auf jeder Seite die gleichen Änderungen am Layout vor. In diesem Artikel werden nur die Änderungen auf der Seite GroupedItemsPage beschrieben.

Definieren der Mindestbreite

Die standardmäßige Mindestbreite einer App beträgt 500 Pixel. Mit der Höhe der App wird immer der gesamte Bildschirm ausgefüllt. Die Mindestbildschirmhöhe einer App beträgt 768 Pixel.

Wenn Ihre App bei schmalen Breiten gut funktioniert oder wenn das Multitasking für die App ein wichtiges Szenario darstellt und Sie Benutzer dazu bewegen möchten, sie zusammen mit anderen Apps auf dem Bildschirm angezeigt zu lassen, können Sie die Mindestbreite von 500 Pixel in 320 Pixel ändern. Benutzer können die App dann nahtlos verkleinern, von der Vollbildanzeige bis hinunter auf eine Breite von 320 Pixel.

Sie ändern die Mindestbreite der App in der Manifestdatei "package.appxmanifest". Führen Sie dazu in Visual Studio die folgenden Schritte aus:

  1. Öffnen Sie die Manifestdatei "package.appxmanifest". Das Manifest wird automatisch im Manifest-Designer geöffnet.
  2. Öffnen Sie die Registerkarte "Anwendungsbenutzeroberfläche", und greifen Sie auf das Feld für die "Mindestbreite" zu.
  3. Ändern Sie die Mindestbreite mithilfe der Dropdownliste in "320 px".
  4. Wenn Sie "package.appxmanifest" in einem Text-Editor öffnen, sollte das ApplicationView-Element als untergeordnetes Element des VisualElements-Elements angezeigt werden. Die neue Mindestbreite in der Manifestdatei sieht beispielsweise wie folgt aus:
    
    <ApplicationView MinWidth="width320" /> 
    
    
    

Entwerfen des Layouts für schmale Breiten

Da die App jetzt auf eine Breite von 320 Pixel verkleinert werden kann, müssen Sie die App so anpassen, dass sie bei schmalen Breiten leicht genutzt werden kann und gut aussieht. Beispiele für Änderungen:

  • Kleinere Schriftart für die Kopfzeile
  • Kleineres Format der Schaltfläche "Zurück"
  • Schmalerer linker Rand
  • Vertikales Schwenken (anstatt horizontal)
  1. Treffen Sie eine Entscheidung, bei welcher Breite Sie diese Änderungen vornehmen möchten. In diesem Beispiel wurde eine Breite von 500 Pixel als Punkt gewählt, an dem die App auf das schmale Layout umschaltet. Für alle Breiten unterhalb von 500 Pixel wird von der App also das schmale Layout verwendet.
  2. Suchen Sie in der Datei "GroupedItemsPage.xaml" nach dem Abschnitt, in dem das Layout für die Schaltfläche "Zurück", den Seitentitel, die Ränder und den Textblock festgelegt ist. Verwenden Sie diesen Code aus der Vorlage für die Standardansicht, also für 500 Pixel und größer. Definieren Sie dann ein zusätzliches Raster mit den kleineren, schmaleren Formaten. Diese beiden Raster werden im folgenden XAML-Code veranschaulicht.
    
    <!-- Back button and page title -->
    <Grid x:Name="defaultNavigation" Visibility="Visible">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <AppBarButton x:Name="backButton" Icon="Back" Height="95" Margin="10,46,10,0"
                      Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" 
                      Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource Mode=Self}}"
                      AutomationProperties.Name="Back"
                      AutomationProperties.AutomationId="BackButton"
                      AutomationProperties.ItemType="Navigation Button"/>
        <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                   IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
        <Grid x:Name="minimalNavigation" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <AppBarButton x:Name="backButtonMinimal" Icon="Back" Height="70" Margin="10,56,10,0" IsCompact="True"
                          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" 
                          Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource Mode=Self}}"
                          AutomationProperties.Name="Back"
                          AutomationProperties.AutomationId="BackButton"
                          AutomationProperties.ItemType="Navigation Button" RenderTransformOrigin="0.5,0.5">
                <AppBarButton.RenderTransform>
                    <CompositeTransform ScaleX="0.75" ScaleY="0.75"/>
                </AppBarButton.RenderTransform>
            </AppBarButton>
            <TextBlock x:Name="pageTitleMinimal" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" FontSize="27"
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="20,0,30,40"/>
        </Grid>
    
    
    
  3. Ändern Sie das horizontale Schwenken für die App in das vertikale Schwenken, wenn das schmale Layout aktiv ist. Erstellen Sie dazu ein ListView-Steuerelement. Dies ist der XAML-Code für das ListView-Steuerelement für das schmale Layout in der Datei "GroupedItemsPage.xaml".
    
    <!-- Vertical scrolling list used in small portrait view -->
    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemListView"
        AutomationProperties.Name="Items In Group"
        TabIndex="1"
        Grid.Row="1"
        Visibility="Collapsed"
        Padding="10,0,0,60"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" MaxHeight="40"/>
                        <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="7,7,0,0">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Click="Header_Click"
                                Style="{StaticResource TextBlockButtonStyle}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource SubheaderTextBlockStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource SubheaderTextBlockStyle}"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
    
    

Entfernen des hohen Layouts

Als Nächstes definieren Sie das Layout für den Zustand, in dem die Höhe des App-Fensters seine Breite übersteigt. In diesem Fall soll von einer App mit horizontaler Schwenkung zu einer App mit vertikaler Schwenkung gewechselt werden. Alle anderen Komponenten, z. B. Größe der Kopfzeile, Ränder und Format der Schaltfläche "Zurück", bleiben gleich. Diese anderen Änderungen sind nur erforderlich, wenn Benutzer die App auf eine schmale Breite unterhalb von 500 Pixel einstellen.

  • Ändern Sie das horizontale Schwenken für die App in das vertikale Schwenken, wenn die Höhe der App die Breite übersteigt. Dazu können Sie in der Datei "GroupedItemsPage.xaml" ein weiteres "ListView"-Steuerelement erstellen, das jedoch nahezu identisch mit dem vertikalen "ListView"-Steuerelement wäre, das Sie für das schmale Layout erstellt haben. Der einzige Unterschied sind die Abstandswerte und das "DataTemplate"-Element. Anstatt ein weiteres "ListView"-Steuerelement zu erstellen, verwenden Sie also das bereits vorhandene "ListView"-Steuerelement, verschieben dabei die "DataTemplate"-Details jedoch in den Abschnitt "Page.Resources" der Datei "GroupedItemsPage.xaml". Sie benötigen das "DataTemplate"-Element zu einem späteren Zeitpunkt, wenn Sie angeben, wann zwischen den Layouts gewechselt werden soll.

    Dies ist der Abschnitt "Page.Resources" des Codes:

    
    <Page.Resources>
            <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <x:String x:Key="ChevronGlyph">&#xE26B;</x:String>
            <!--
                Collection of grouped items displayed by this page, bound to a subset
                of the complete item list because items in groups cannot be virtualized
            -->
            <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="Items"
                d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
            
            <!-- DataTemplate to use in the portrait layout. -->
            <DataTemplate x:Key="portraitItemTemplate">
                <Grid HorizontalAlignment="Left" Width="250" Height="250">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                    </Border>
                    <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                        <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
                        <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
            
            <!-- DataTemplate to use in the minimal layout. -->
            <DataTemplate x:Key="portraitSmallItemTemplate">
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" MaxHeight="40"/>
                        <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Page.Resources>
    
    

    Und dies ist das bereits erstellte itemListViewPortrait-Element, für das das DataTemplate-Element entfernt und stattdessen dem Abschnitt "Page.Resources" hinzugefügt wurde.

    
    <!-- Vertical scrolling list used in portrait view -->
    <ListView
        x:Name="itemListViewPortrait"
        AutomationProperties.AutomationId="ItemListView"
        AutomationProperties.Name="Items In Group"
        TabIndex="1"
        Grid.Row="1"
        Visibility="Collapsed"
        Padding="60,0,0,10"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick">
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="7,7,0,0">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Click="Header_Click"
                                Style="{StaticResource TextBlockButtonStyle}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource SubheaderTextBlockStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource SubheaderTextBlockStyle}"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
    
    

Definieren von drei Ansichtszuständen

Definieren Sie die Ansichtszustände, zwischen denen von der App gewechselt wird, wenn Benutzer die Größe der App ändern. Im Beispiel werden dafür die Namen "DefaultLayout", "MinimalLayout" und "PortraitLayout" verwendet. Sie müssen die Eigenschaften für das Standardlayout nicht definieren, weil diese Standardwerte bereits an einem anderen Ort definiert sind. Im defaultNavigation-Raster ist die Visibility-Eigenschaft beispielsweise auf "Visible" festgelegt.

Sehen wir uns einen dieser Ansichtszustände einmal etwas genauer an. Im Zustand "MinimalLayout" legen Sie das defaultNavigation-Raster auf "Collapsed" und das minimalNavigation-Raster auf "Visible" fest. Das angezeigte Raster ist dann das minimalNavigation-Raster, für das Sie die kleinere Schaltfläche "Zurück", die kleinere Kopfzeilenschriftart und den schmaleren Rand festgelegt haben. Sie legen das itemGridView-Element, für das Elemente horizontal angezeigt werden, auf "Collapsed" fest. Sie legen das itemListView-Element, für das Elemente in einer vertikalen Liste angezeigt werden, auf "Visible" fest. Außerdem legen Sie die ItemTemplate-Eigenschaft so fest, dass dafür das DataTemplate-Element verwendet wird, das Sie unter "Page.Resources" definiert haben. Zuletzt legen Sie die Padding-Eigenschaft für das itemListView-Element fest.

Dies ist der XAML-Code, mit dem die drei Zustände definiert werden.

  • Definieren der Ansichtszustände.
    
    <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultLayout">
                        <!-- The default Visibility properties are set in the XAML that defines the objects. -->
                    </VisualState>
                    <VisualState x:Name="MinimalLayout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource portraitSmallItemTemplate}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="10,0,0,60"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="PortraitLayout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="defaultNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="minimalNavigation" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource portraitItemTemplate}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="60,0,0,10"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
    

Wechseln von Layouts

Nachdem Sie das schmale Layout und das hohe Layout definiert haben, müssen Sie das Ereignis festlegen, mit dem der Wechsel zwischen den Layouts ausgelöst wird.

  • Fügen Sie der Seite einen SizeChanged-Ereignishandler hinzu. Dieses Ereignis tritt ein, wenn sich die Höhe oder Breite der page ändert. Dies ist der Code aus der Datei "GroupedItemsPage.xaml.cs", mit dem der SizeChanged-Ereignishandler definiert wird.
    
    public sealed partial class GroupedItemsPage : Page
        {
            /// ...
    
            public GroupedItemsPage()
            {
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += navigationHelper_LoadState;
                this.SizeChanged += GroupedItemsPage_SizeChanged;
            }
    
            /// If the page is resized to less than 500 pixels, use the layout for narrow widths. 
            /// If the page is resized so that the width is less than the height, use the tall (portrait) layout.
            /// Otherwise, use the default layout.
            void GroupedItemsPage_SizeChanged(object sender, SizeChangedEventArgs e) 
            { 
                if (e.NewSize.Width < 500) 
                    { 
                        VisualStateManager.GoToState(this, "MinimalLayout", true); 
                    } 
                    else if (e.NewSize.Width < e.NewSize.Height) 
                    { 
                        VisualStateManager.GoToState(this, "PortraitLayout", true); 
                    } 
                    else 
                    { 
                        VisualStateManager.GoToState(this, "DefaultLayout", true); 
                    } 
                } 
           }
           /// ...
        }
    
    
    

Zusammenfassung

Sie wissen jetzt, wie Sie die App so entwerfen können, dass sie bei geringen Breiten und in Layouts, bei denen die Höhe die Breite übersteigt, gut aussieht und funktioniert.

Verwandte Themen

Schnellstart: Definieren von Layouts

 

 

Anzeigen:
© 2017 Microsoft