Ansicht mit zwei Panels

Die Ansicht mit zwei Bereichen ist ein Layoutsteuerelement, mit dem Sie die Anzeige von Apps verwalten können, die 2 verschiedene Inhaltsbereiche aufweisen, z. B. eine Listen-/Detailansicht.

Ist dies das richtige Steuerelement?

Verwenden Sie die Zwei-Bereich-Ansicht, wenn Sie zwei verschiedene, aber verwandte Bereiche von Inhalten haben und:

• Der Inhalt sollte automatisch neu anordnen und seine Größe ändern, um das Fenster optimal anzupassen.
• Der sekundäre Inhaltsbereich basierend auf dem verfügbaren Platz angezeigt/ausgeblendet werden soll.

Wenn Sie zwei Inhaltsbereiche anzeigen müssen, aber nicht die Größe ändern und neu anordnen müssen, die von der Zweibereichsansicht bereitgestellt wird, sollten Sie stattdessen eine geteilte Ansicht verwenden.

Verwenden Sie für Navigationsoptionen eine Navigationsansicht.

Funktionsweise

Die Zwei-Bereich-Ansicht verfügt über zwei Bereiche, in denen Sie Ihre Inhalte platzieren. Es passt die Größe und Anordnung der Fensterbereiche je nach verfügbarem Platz im Fenster an. Die möglichen Bereichslayouts werden durch die TwoPaneViewMode-Aufzählung definiert:

App im breiten Modus.

App mit Ansicht aus zwei Bereichen im Tall-Modus, mit einem Foto eines Berges oben und Informationen zum Foto unten.

App im Hochmodus.

Sie konfigurieren die Ansicht mit zwei Bereichen, indem Sie die PanePriority festlegen, um anzugeben, welcher Bereich angezeigt wird, wenn nur für einen Bereich Platz vorhanden ist. Anschließend geben Sie an, ob Pane1 für hohe Fenster oben oder unten oder links oder rechts für breite Fenster angezeigt wird.

Die Ansicht mit zwei Bereichen behandelt die Größe und Anordnung der Bereiche, aber Sie müssen den Inhalt innerhalb des Bereichs an die Änderungen in Größe und Ausrichtung anpassen. Weitere Informationen zum Erstellen einer adaptiven Benutzeroberfläche finden Sie unter Responsive Layouts mit XAML und Layout Panels.

Zwei-Bereich-Ansicht erstellen

Dieser XAML-Code zeigt, wie Sie eine einfache TwoPaneView erstellen.

<TwoPaneView>
    <TwoPaneView.Pane1>
        <Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
            <TextBlock Text="Pane 1" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane1>

    <TwoPaneView.Pane2>
        <Grid Background="{ThemeResource LayerFillColorAltBrush}">
            <TextBlock Text="Pane 2" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane2>
</TwoPaneView>

Die TwoPaneView muss nicht das Stammelement Ihres Seitenlayouts sein. Tatsächlich verwenden Sie es häufig in einem NavigationView-Steuerelement , das die allgemeine Navigation für Ihre App bereitstellt. Die TwoPaneView passt sich unabhängig davon an, wo sie sich im XAML-Baum befindet.

Hinzufügen von Inhalten zu den Fenstern

Jeder Bereich einer Ansicht mit zwei Bereichen kann ein einzelnes XAML UIElement enthalten. Zum Hinzufügen von Inhalten platzieren Sie in der Regel einen XAML-Layoutbereich in jedem Bereich und fügen dann dem Panel weitere Steuerelemente und Inhalte hinzu. Die Bereiche können die Größe ändern und zwischen breiten und hohen Modi wechseln, daher müssen Sie sicherstellen, dass sich der Inhalt in jedem Bereich an diese Änderungen anpassen kann. Weitere Informationen zum Erstellen einer adaptiven Benutzeroberfläche finden Sie unter Responsive Layouts mit XAML und Layout Panels.

In diesem Beispiel wird die zuvor gezeigte einfache Bild-/Info-App-Benutzeroberfläche erstellt. Der Inhalt kann in zwei Bereichen angezeigt oder in einem einzelnen Bereich kombiniert werden, je nachdem, wie viel Platz verfügbar ist. (Wenn nur Platz für einen Bereich vorhanden ist, verschieben Sie den Inhalt von Pane2 in Pane1, und lassen Sie den Benutzer scrollen, um ausgeblendete Inhalte anzuzeigen. Der Code für dies wird später im Abschnitt " Reagieren auf Modusänderungen" angezeigt .)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton x:Name="Share" Icon="Share" Label="Share" Click="Share_Click"/>
        <AppBarButton x:Name="Print" Icon="Print" Label="Print" Click="Print_Click"/>
    </CommandBar>

    <TwoPaneView
        x:Name="MyTwoPaneView"
        Grid.Row="1"
        MinWideModeWidth="959"
        MinTallModeHeight="863"
        ModeChanged="TwoPaneView_ModeChanged">

        <TwoPaneView.Pane1>
            <Grid x:Name="Pane1Root">
                <ScrollViewer>
                    <StackPanel x:Name="Pane1StackPanel">
                        <Image Source="Assets\LandscapeImage8.jpg"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Margin="16,0"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane1>

        <TwoPaneView.Pane2
            <Grid x:Name="Pane2Root">
                <ScrollViewer x:Name="DetailsContent">
                    <StackPanel Padding="16">
                        <TextBlock Text="Mountain.jpg" MaxLines="1"
                                       Style="{ThemeResource HeaderTextBlockStyle}"/>
                        <TextBlock Text="Date Taken:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="8/29/2019 9:55am"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Dimensions:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="800x536"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Resolution:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="96 dpi"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Description:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                       Style="{ThemeResource SubtitleTextBlockStyle}"
                                       TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane2>
    </TwoPaneView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TwoPaneViewStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Wide">
                <VisualState.Setters>
                    <Setter Target="MyTwoPaneView.Pane1Length"
                            Value="2*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Angeben, welcher Bereich angezeigt werden soll

Wenn die Zweibereichsansicht nur einen einzelnen Bereich anzeigen kann, wird die PanePriority-Eigenschaft verwendet, um zu bestimmen, welcher Bereich angezeigt werden soll. Standardmäßig ist PanePriority auf Pane1 festgelegt. Hier erfahren Sie, wie Sie diese Eigenschaft in XAML oder im Code festlegen können.

<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Anpassen der Bereichsgröße

Die Größe der Bereiche wird durch die Eigenschaften Pane1Length und Pane2Length bestimmt. Diese verwenden GridLength-Werte , die die automatische Größenanpassung und die Größenanpassung von Stern(*) unterstützen. Eine Erläuterung der automatischen Größenanpassung und der Größenanpassung mit der Sternvariablen finden Sie unter Dynamische Layouts mit XAML im Abschnitt Layouteigenschaften.

Standardmäßig ist Pane1Length auf Auto eingestellt und passt seine Größe an den Inhalt an. Pane2Length wird auf * gesetzt und verwendet den gesamten verbleibenden Speicherplatz.

Bereiche mit Standardgrößenanpassung

Die Standardwerte sind nützlich für ein typisches Listen-/Detaillayout, bei dem Sie eine Liste von Elementen in Pane1 haben und viele Details in Pane2. Je nach Inhalt möchten Sie den Abstand jedoch möglicherweise anders unterteilen. Hier wird Pane1Length auf 2* gesetzt, damit es doppelt so viel Platz bekommt wie Pane2.

<TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">

Bereiche mit der den Werten „2*“ und „*“ für die Größenanpassung

Wenn Sie einen Bereich für die automatische Größenanpassung festlegen, können Sie die Größe steuern, indem Sie die Höhe und Breite des Panel festlegen, das den Inhalt des Bereichs enthält. In diesem Fall müssen Sie möglicherweise das ModeChanged Ereignis behandeln und die Einschränkungen für Höhe und Breite des Inhalts entsprechend dem aktuellen Modus festlegen.

Anzeige im breiten oder hohen Modus

Auf einem einzelnen Bildschirm wird der Anzeigemodus der zwei Bereiche durch die Eigenschaften MinWideModeWidth und MinTallModeHeight bestimmt. Beide Eigenschaften weisen einen Standardwert von 641px auf, identisch mit NavigationView.CompactThresholdWidth.

Diese Tabelle zeigt, wie Height und Width des TwoPaneView bestimmen, welcher Anzeigemodus verwendet wird.

Breite Konfigurationsoptionen

MinWideModeWidth steuert, wann die Ansicht mit zwei Bereichen in den Querformat-Modus wechselt. Die Ansicht mit zwei Bereichen wechselt in den Wide-Modus, wenn der verfügbare Platz breiter als die MinWideModeWidth-Eigenschaft ist. Der Standardwert ist 641px, Sie können ihn jedoch auf das gewünschte Element ändern. Im Allgemeinen sollten Sie diese Eigenschaft auf den Wert festlegen, der der gewünschten minimalen Breite Ihres Bereichs entspricht.

Wenn sich die Zweibereichsansicht im breiten Modus befindet, bestimmt die WideModeConfiguration-Eigenschaft , was angezeigt werden soll:

Die Standardeinstellung ist LeftRight.

LeftRight	RightLeft

Hohe Konfigurationsoptionen

Die Ansicht mit zwei Bereichen wechselt in den Tall Modus, wenn der verfügbare Platz schmaler als MinWideModeWidthund höher als MinTallModeHeightist. Der Standardwert ist 641px, Sie können ihn jedoch auf das gewünschte Element ändern. Im Allgemeinen sollten Sie diese Eigenschaft auf den Wert festlegen, der der gewünschten minimalen Höhe Ihres Bereichs entspricht.

Wenn sich die Zwei-Bereich-Ansicht im Hochmodus befindet, legt die Eigenschaft TallModeConfiguration fest, was angezeigt werden soll.

Der Standardwert lautet TopBottom.

ObenUnten	UntenOben

Sonderwerte für MinWideModeWidth und MinTallModeHeight

Sie können die MinWideModeWidth-Eigenschaft verwenden, um zu verhindern, dass die Zweibereichsansicht in den Wide-Modus wechselt, indem Sie es einfach auf MinWideModeWidth festlegen.

Wenn Sie MinTallModeHeight auf Double.PositiveInfinity festlegen, verhindert dies, dass die Ansicht mit zwei Bereichen in den Tall-Modus wechselt.

Wenn Sie MinTallModeHeight auf 0 setzen, wird verhindert, dass die Zwei-Bereichs-Ansicht in den SinglePane-Modus wechselt.

Reagieren auf Modusänderungen

Sie können die schreibgeschützte Eigenschaft Mode verwenden, um den aktuellen Anzeigemodus abzurufen. Wenn die Zwei-Bereich-Ansicht ändert, welcher Bereich oder welche Bereiche angezeigt werden, tritt das ModeChanged-Ereignis auf, bevor der aktualisierte Inhalt gerendert wird. Sie können das Ereignis behandeln, um auf Änderungen im Anzeigemodus zu reagieren.

Eine Möglichkeit, dieses Ereignis zu verwenden, besteht darin, die Benutzeroberfläche Ihrer App zu aktualisieren, damit Benutzer alle Inhalte im SinglePane Modus anzeigen können. Die Beispiel-App verfügt beispielsweise über einen primären Bereich (das Bild) und einen Infobereich.

Hoher Modus

Wenn nur genügend Platz zum Anzeigen eines Bereichs vorhanden ist, können Sie den Inhalt von Pane2 in Pane1 verschieben, damit der Benutzer scrollen kann, um alle Inhalte anzuzeigen. Das sieht ungefähr wie folgt aus.

SinglePane-Modus

Denken Sie daran, dass die MinWideModeWidth Eigenschaften MinTallModeHeight bestimmen, wann sich der Anzeigemodus ändert, sodass Sie ändern können, wann der Inhalt zwischen Bereichen verschoben wird, indem Sie die Werte dieser Eigenschaften anpassen.

Hier sehen Sie den ModeChanged Ereignishandlercode, der den Inhalt zwischen Pane1 und Pane2. Außerdem wird ein VisualState festgelegt, um die Breite des Bilds im Wide Modus einzuschränken.

private void TwoPaneView_ModeChanged(TwoPaneView sender, object args)
{
    // Remove details content from it's parent panel.
    ((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
    // Set Normal visual state.
    VisualStateManager.GoToState(this, "Normal", true);

    // Single pane
    if (sender.Mode == TwoPaneViewMode.SinglePane)
    {
        // Add the details content to Pane1.
        Pane1StackPanel.Children.Add(DetailsContent);
    }
    // Dual pane.
    else
    {
        // Put details content in Pane2.
        Pane2Root.Children.Add(DetailsContent);

        // If also in Wide mode, set Wide visual state
        // to constrain the width of the image to 2*.
        if (sender.Mode == TwoPaneViewMode.Wide)
        {
            VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

Verwandte Artikel

• Layoutübersicht
• Geteilte Ansicht