Delen via

Weergave met twee deelvensters

Weergave met twee deelvensters is een indelingsbesturingselement waarmee u de weergave van apps met twee verschillende inhoudsgebieden kunt beheren, zoals een lijst-/detailweergave.

Is dit de juiste controle?

Gebruik de weergave met twee deelvensters wanneer u twee afzonderlijke, maar gerelateerde inhoudsgebieden hebt en:

  • De inhoud moet automatisch opnieuw rangschikken en de grootte aanpassen om beter aan het venster te passen.
  • Het secundaire gebied van de inhoud moet worden weergegeven/verborgen op basis van de beschikbare ruimte.

Als u twee gebieden met inhoud wilt weergeven, maar de grootte en herschikking van de twee deelvensters niet nodig hebt, kunt u in plaats daarvan een gesplitste weergave gebruiken.

Gebruik een navigatieweergave voor navigatieopties.

Hoe het werkt

De weergave met twee deelvensters bevat twee deelvensters waar u uw inhoud plaatst. De grootte en rangschikking van de deelvensters worden aangepast, afhankelijk van de ruimte die beschikbaar is voor het raam. De mogelijke deelvensterindelingen worden gedefinieerd door de opsomming TwoPaneViewMode :

Opsommingswaarde Description
SinglePane Er wordt slechts één deelvenster weergegeven, zoals opgegeven door de eigenschap PanePriority .
Wide Deelvensters worden naast elkaar weergegeven of één deelvenster wordt weergegeven, zoals opgegeven door de eigenschap WideModeConfiguration .
Tall Deelvensters worden van boven naar beneden weergegeven, of één deelvenster wordt weergegeven, zoals opgegeven door de eigenschap TallModeConfiguration.

De weergave-app met twee deelvensters in de brede modus, met een foto van een berg aan de linkerkant en informatie over de foto aan de rechterkant.

App in brede modus.

App met tweedelige kijk in verticale modus, met bovenaan een foto van een berg en onderaan informatie over de foto.

App in staande modus.

U configureert de weergave met twee deelvensters door het deelvensterPriority in te stellen om op te geven welk deelvenster wordt weergegeven wanneer er slechts één deelvenster ruimte is. Vervolgens geeft u op of Pane1 deze wordt weergegeven aan de boven- of onderkant voor hoge vensters, of aan de linkerkant of rechts voor brede vensters.

In de weergave met twee deelvensters worden de grootte en rangschikking ervan verwerkt, maar u moet nog steeds de inhoud in de deelvensters aanpassen aan de wijzigingen in grootte en oriëntatie. Zie Responsieve indelingen met XAML - en Lay-outpanelen voor meer informatie over het maken van een adaptieve gebruikersinterface.

Creëer een weergave met twee deelvensters

Deze XAML laat zien hoe je een basis TwoPaneView maakt.

<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>

Weergave in twee deelvensters met deelvensters ingesteld op standaardgrootten

De TwoPaneView hoeft niet het hoofdelement van uw pagina-indeling te zijn. In feite gebruikt u het vaak in een Navigatieweergave-besturingselement dat de algehele navigatie voor uw app biedt. Het TwoPaneView past zich op de juiste manier aan, ongeacht waar deze zich in de XAML-structuur bevindt.

Inhoud toevoegen aan de deelvensters

Elk deelvenster van een weergave met twee deelvensters kan één XAML UIElement bevatten. Als u inhoud wilt toevoegen, plaatst u meestal een XAML-indelingspaneel in elk deelvenster en voegt u vervolgens andere besturingselementen en inhoud toe aan het deelvenster. De deelvensters kunnen de grootte wijzigen en schakelen tussen brede en hoge modi, zodat u ervoor moet zorgen dat de inhoud in elk deelvenster kan worden aangepast aan deze wijzigingen. Zie Responsieve indelingen met XAML - en Lay-outpanelen voor meer informatie over het maken van een adaptieve gebruikersinterface.

In dit voorbeeld wordt de gebruikersinterface van de eenvoudige afbeelding/info-app gemaakt die eerder is weergegeven. De inhoud kan in twee deelvensters worden weergegeven of in één deelvenster worden gecombineerd, afhankelijk van de hoeveelheid ruimte die beschikbaar is. (Als er slechts ruimte is voor één deelvenster, verplaatst u de inhoud van Pane2 naar Pane1 en laat de gebruiker schuiven om verborgen inhoud te zien. U ziet de code hiervoor verderop in de sectie Reageren op wijzigingen in de modus .)

Kleine afbeelding van voorbeeld-app die op twee schermen wordt weergegeven 

<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>

Opgeven welk deelvenster moet worden weergegeven

Wanneer in de weergave met twee deelvensters slechts één deelvenster kan worden weergegeven, wordt de eigenschap PanePriority gebruikt om te bepalen welk deelvenster moet worden weergegeven. PanePriority is standaard ingesteld op Pane1. U kunt deze eigenschap als volgt instellen in XAML of in code.

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

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Deelvenstergrootte

De grootte van de deelvensters wordt bepaald door de eigenschappen Pane1Length en Pane2Length . Deze maken gebruik van GridLength-waarden, die ondersteuning bieden voor automatische en stervormige(*) afmetingen. Zie in de sectie Indelingseigenschappen van Responsieve indelingen met XAML voor een uitleg over automatische grootte en stergrootte.

Pane1Length De standaardinstelling is ingesteld op Auto en de grootte ervan wordt aangepast aan de inhoud. Pane2Length is ingesteld op * en gebruikt alle resterende ruimte.

Weergave in twee deelvensters met deelvensters ingesteld op standaardgrootten

Deelvensters met standaardgrootte

De standaardwaarden zijn handig voor een typische indeling van een lijst/detail, waarin u een lijst met items Pane1hebt en veel details in Pane2. Afhankelijk van uw inhoud wilt u de ruimte echter mogelijk anders verdelen. Hier wordt Pane1Length ingesteld op 2* zodat het twee keer zoveel ruimte krijgt als Pane2.

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

Weergave met twee deelvensters met deelvenster 1 met twee derde van het scherm en deelvenster 2 met één derde

Panelen van formaat 2* en *

Als u een deelvenster instelt op automatisch aanpassen, kunt u de grootte regelen door de hoogte en breedte in te stellen van het Panel dat de inhoud van het deelvenster bevat. In dit geval moet u mogelijk de ModeChanged gebeurtenis afhandelen en de hoogte- en breedtebeperkingen van de inhoud zo instellen dat deze geschikt zijn voor de huidige modus.

Weergave in brede of staande modus

Op één scherm wordt de weergavemodus van de weergave in twee deelvensters bepaald door de eigenschappen MinWideModeWidth en MinTallModeHeight . Beide eigenschappen hebben een standaardwaarde van 641px, hetzelfde als NavigationView.CompactThresholdWidth.

In deze tabel ziet u hoe de Height en Width van de TwoPaneView bepalen welke weergavemodus wordt gebruikt.

Voorwaarde TwoPaneView Wijze
Width > MinWideModeWidth Wide-modus wordt gebruikt
Width <= MinWideModeWidth, en Height>MinTallModeHeight Tall de modus wordt gebruikt
Width <= MinWideModeWidth, en Height<= MinTallModeHeight SinglePane de modus wordt gebruikt

Brede configuratieopties

MinWideModeWidth bepaalt wanneer de weergave met twee deelvensters in de brede modus wordt geopend. De weergave met twee deelvensters Wide wordt geactiveerd wanneer de beschikbare ruimte breder is dan de MinWideModeWidth eigenschap. De standaardwaarde is 641 pixels, maar u kunt deze wijzigen in wat u wilt. Over het algemeen moet u deze eigenschap instellen op wat u wilt dat de minimale breedte van het deelvenster is.

Wanneer de weergave met twee deelvensters zich in de brede modus bevindt, bepaalt de eigenschap WideModeConfiguration wat moet worden weergegeven:

Opsommingswaarde Description
SinglePane Eén deelvenster (zoals bepaald door PanePriority). Het deelvenster neemt de volledige grootte van het TwoPaneView in beslag en is in beide richtingen uitgerekt.
LeftRight Pane1 aan de linkerkant/Pane2 aan de rechterkant. Beide deelvensters zijn in stergrootte verticaal, Pane1's breedte wordt automatisch ingesteld en Pane2's breedte is in stergrootte.
RightLeft Pane1 aan de rechterkant/Pane2 aan de linkerkant. Beide deelvensters zijn verticaal sterformaat, Pane2de breedte wordt automatisch gewijzigd en Pane1de breedte is sterformaat.

De standaardinstelling is LeftRight.

LinksRechts RechtsLinks
Tweepaneelweergave geconfigureerd van links naar rechts Weergave in twee vensters, geconfigureerd van rechts naar links

Opmerking

Wanneer het apparaat een taal van rechts naar links (RTL) gebruikt, wordt de volgorde in de weergave met twee deelvensters automatisch gewisseld: RightLeft wordt weergegeven als LeftRighten LeftRight wordt weergegeven als RightLeft.

Hoge configuratieopties

De weergave met twee deelvensters Tall wordt geactiveerd wanneer de beschikbare ruimte smaller is dan MinWideModeWidthen hoger is dan MinTallModeHeight. De standaardwaarde is 641 pixels, maar u kunt deze wijzigen in wat u wilt. Over het algemeen dient u deze eigenschap in te stellen op de minimale hoogte die u voor het deelvenster wenst.

Wanneer de weergave met twee deelvensters zich in de hoge modus bevindt, bepaalt de eigenschap TallModeConfiguration wat moet worden weergegeven:

Enumeratiewaarde Description
SinglePane Eén deelvenster (zoals bepaald door PanePriority). Het deelvenster neemt de volledige grootte van TwoPaneView in beslag (het is in beide richtingen even groot).
TopBottom Pane1 aan de bovenkant/Pane2 onderaan. Beide deelvensters zijn horizontaal sterformaat, de hoogte van Pane1 wordt automatisch aangepast, en de hoogte van Pane2 is sterformaat.
BottomTop Pane1 onderaan/Pane2 bovenaan. Beide deelvensters zijn horizontaal sterformaat, Pane2's hoogte wordt automatisch aangepast en Pane1de hoogte is sterformaat.

De standaardwaarde is TopBottom.

BovenOnder OnderBoven
Weergave met twee deelvensters die boven-onder is geconfigureerd Weergave met twee deelvensters die van onder naar boven is geconfigureerd

Speciale waarden voor MinWideModeWidth en MinTallModeHeight

U kunt de MinWideModeWidth eigenschap gebruiken om te voorkomen dat de weergave met twee deelvensters de modus Wide invoert; stel MinWideModeWidth gewoon in op Double.PositiveInfinity.

Als u MinTallModeHeight instelt op Double.PositiveInfinity, voorkomt u dat de weergave met twee deelvensters in de modus Tall gaat.

Als u MinTallModeHeight op 0 instelt, verhindert u dat de weergave met twee deelvensters de modus SinglePane invoert.

Reageren op wijzigingen in de modus

U kunt de eigenschap Alleen-lezenmodus gebruiken om de huidige weergavemodus op te halen. Wanneer in de weergave met twee deelvensters wordt gewijzigd welk deelvenster of welke deelvensters worden weergegeven, vindt de gebeurtenis ModeChanged plaats voordat de bijgewerkte inhoud wordt weergegeven. U kunt de gebeurtenis afhandelen om te reageren op wijzigingen in de weergavemodus.

Belangrijk

De ModeChanged gebeurtenis treedt niet op wanneer de pagina in eerste instantie wordt geladen, dus uw standaard XAML moet de gebruikersinterface vertegenwoordigen zoals deze moet worden weergegeven wanneer deze voor het eerst wordt geladen.

Een manier waarop u deze gebeurtenis kunt gebruiken, is door de gebruikersinterface van uw app bij te werken, zodat gebruikers alle inhoud in SinglePane de modus kunnen bekijken. De voorbeeld-app heeft bijvoorbeeld een primair deelvenster (de afbeelding) en een informatievenster.

Kleine afbeelding van voorbeeld-app die in de hoge modus wordt weergegeven

Hoge modus

Wanneer er slechts voldoende ruimte is om één deelvenster weer te geven, kunt u de inhoud Pane2 ervan verplaatsen Pane1 zodat de gebruiker kan schuiven om alle inhoud weer te geven. Het ziet er zo uit.

Afbeelding van voorbeeld-app op één scherm met alle inhoud die in één deelvenster schuift

Modus SinglePane

Houd er rekening mee dat de eigenschappen MinWideModeWidth en MinTallModeHeight bepalen wanneer de weergavemodus verandert, zodat u kunt beïnvloeden wanneer de inhoud tussen de deelvensters wordt verplaatst door de waarden van deze eigenschappen aan te passen.

Hier is de ModeChanged gebeurtenis-handlercode waarmee de inhoud tussen Pane1 en Pane2 wordt verplaatst. Er wordt ook een VisualState ingesteld om de breedte van de afbeelding in de Wide modus te beperken.

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);
        }
    }
}

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Voor de TwoPaneView voor UWP-apps is WinUI 2 vereist. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor deze control bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:TwoPaneView />
  • Last updated on