Vy med två fönster

Vyn med två fönster är en layoutkontroll som hjälper dig att hantera visning av appar som har två olika innehållsområden, till exempel en list-/detaljvy.

Är det här rätt kontroll?

Använd vyn med två fönster när du har två distinkta men relaterade innehållsområden och:

• Innehållet bör automatiskt ordna om och ändra storlek så att det passar bäst för fönstret.
• Det sekundära innehållsområdet bör visa/dölja baserat på tillgängligt utrymme.

Om du behöver visa två områden med innehåll men inte behöver storleksändringen och omorganiseringen som tillhandahålls av vyn med två fönster kan du överväga att använda en delad vy i stället.

För navigeringsalternativ använder du en navigeringsvy.

Så här fungerar det

Vyn med två fönster har två fönster där du placerar ditt innehåll. Den justerar storlek och ordning på fönsterrutorna beroende på vilket utrymme som är tillgängligt för fönstret. Möjliga fönsterlayouter definieras av uppräkningen TwoPaneViewMode :

Uppräknat värde	Description
SinglePane	Endast en fönsterruta visas enligt egenskapen PanePriority .
Wide	Fönster visas sida vid sida, eller så visas en enda ruta enligt egenskapen WideModeConfiguration .
Tall	Fönster visas i topp och botten, eller så visas ett enda fönster enligt egenskapen TallModeConfiguration.

Appen är i brett läge.

Appen är i vertikalt läge.

Du konfigurerar vyn med två fönster genom att ange PanePriority för att ange vilket fönster som ska visas när det bara finns utrymme för ett fönster. Sedan anger du om Pane1 visas överst eller längst ned för höga fönster, eller till vänster eller höger för breda fönster.

Vyn med två fönster hanterar storlek och ordning på fönsterrutorna, men du måste ändå göra så att innehållet i fönstret anpassas till ändringarna i storlek och orientering. Mer information om hur du skapar ett anpassningsbart användargränssnitt finns i Dynamiska layouter med XAML - och layoutpaneler .

Skapa en vy med två fönster

• Viktiga API:er:TwoPaneView-klass

Denna XAML visar hur du skapar en grundläggande TwoPaneView.

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

TwoPaneView behöver inte vara rotelementet i sidlayouten. I själva verket använder du den ofta i en NavigationView-kontroll som ger den övergripande navigeringen för din app. Den TwoPaneView anpassar sig på rätt sätt oavsett var den finns i XAML-trädet.

Lägga till innehåll i fönsterrutorna

Varje fönster i en vy med två fönster kan innehålla en enda XAML UIElement. Om du vill lägga till innehåll placerar du vanligtvis en XAML-layoutpanel i varje fönster och lägger sedan till andra kontroller och innehåll i panelen. Fönstren kan ändra storlek och växla mellan breda och höga lägen, så du måste se till att innehållet i varje fönster kan anpassas till dessa ändringar. Mer information om hur du skapar ett anpassningsbart användargränssnitt finns i Dynamiska layouter med XAML - och layoutpaneler .

I det här exemplet skapas det enkla användargränssnittet för bild/info-appen som visades tidigare. Innehållet kan visas i två fönster eller kombineras till ett enda fönster, beroende på hur mycket utrymme som är tillgängligt. (När det bara finns utrymme för ett fönster flyttar du innehållet i Pane2 till Pane1 och låter användaren rulla för att se dolt innehåll. Du ser koden för detta senare i avsnittet Svara på ändringar i läget .)

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

Ange vilket fönster som ska visas

När vyn med två fönster bara kan visa ett enda fönster använder den egenskapen PanePriority för att avgöra vilket fönster som ska visas. Som standard är PanePriority inställt på Pane1. Så här kan du ange den här egenskapen i XAML eller i kod.

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

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Storleksändring av panel

Storleken på fönstren bestäms av egenskaperna Pane1Length och Pane2Length . Dessa använder GridLength-värden som stöder auto och star(*)-storlekar. Se avsnittet Layoutegenskaper i Responsiva layouter med XAML för en förklaring av auto- och stjärnstorlekar.

Som standard Pane1Length är inställt på Auto och det storleksanpassar sig för att passa innehållet. Pane2Length är inställt på * och använder allt återstående utrymme.

Fönster med standardstorlek

Standardvärdena är användbara för en typisk list-/detaljlayout, där du har en lista med objekt i Pane1och mycket information i Pane2. Beroende på ditt innehåll kanske du dock föredrar att dela upp utrymmet på ett annat sätt. Här ställs Pane1Length in till 2* så att det får dubbelt så mycket utrymme som Pane2.

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

Paneler med storlekar 2* och *

Om du anger att ett fönster ska använda automatisk storleksändring kan du styra storleken genom att ange höjden och bredden Panel på innehållet i fönstret. I det här fallet kan du behöva hantera ModeChanged händelsen och ange begränsningarna för höjd och bredd för innehållet efter behov för det aktuella läget.

Visa i brett eller högt läge

På en enda skärm bestäms visningsläget för två fönster av egenskaperna MinWideModeWidth och MinTallModeHeight . Båda egenskaperna har ett standardvärde på 641px, samma som NavigationView.CompactThresholdWidth.

Den här tabellen visar hur Height och WidthTwoPaneView avgör vilket visningsläge som används.

TwoPaneView-villkor	Mode
Width > MinWideModeWidth	Wide läget används
Width <= MinWideModeWidth, och Height>MinTallModeHeight	Tall läget är aktiverat
Width <= MinWideModeWidth, och Height<= MinTallModeHeight	SinglePane läget används

Många konfigurationsalternativ

MinWideModeWidth kontrollerar när tvåpanelsvyn går över till brett läge. Vyn med två fönster går in i Wide läget när det tillgängliga utrymmet är bredare än egenskapen MinWideModeWidth . Standardvärdet är 641px, men du kan ändra det till vad du vill. I allmänhet bör du ange den här egenskapen till vad du vill att den minsta bredden på fönstret ska vara.

När vyn med två fönster är i brett läge avgör egenskapen WideModeConfiguration vad som ska visas:

Uppräkningsvärde	Description
SinglePane	En enda ruta (som bestäms av PanePriority). Fönstret tar upp den fulla storleken på TwoPaneView (dvs. dess stjärnstorlek i båda riktningarna).
LeftRight	Pane1 till vänster/Pane2 till höger. Båda fönstren är i stjärnstorlekar vertikalt, Pane1's bredd är automatiskt justerad och Pane2's bredd är stjärnjusterad.
RightLeft	Pane1 till höger/Pane2 till vänster. Båda fönstren är stjärnstora lodrätt, Pane2bredden är automatisk och Pane1bredden är stjärnstorlek.

Standardinställningen är LeftRight.

Vänster-höger	HögerVänster

Anmärkning

När enheten använder ett RTL-språk (right-to-left) byter vyn med två fönster automatiskt ordningen: RightLeft renderas som LeftRightoch LeftRight renderas som RightLeft.

Omfattande konfigurationsalternativ

Vyn med två fönster går in i Tall läget när det tillgängliga utrymmet är smalare än MinWideModeWidth, och högre än MinTallModeHeight. Standardvärdet är 641px, men du kan ändra det till vad du vill. I allmänhet bör du ange den här egenskapen till vad du vill att den minsta höjden på fönstret ska vara.

När vyn med två fönster är i högt läge avgör egenskapen TallModeConfiguration vad som ska visas:

Uppräkningsvärde	Description
SinglePane	En enda ruta (som bestäms av PanePriority). Fönstret tar upp den fulla storleken på TwoPaneView (det vill säga, det är i stjärnform i båda riktningarna).
TopBottom	Pane1 längst upp/Pane2 längst ned. Båda rutorna är stjärnstora vågrätt, Pane1:s höjd är automatisk och Pane2:s höjd är stjärnstor.
BottomTop	Pane1 längst ned/Pane2 överst. Båda rutorna är i stjärnstorlek horisontellt, höjden för Pane2 är automatiskt anpassad, och höjden för Pane1 är i stjärnstorlek.

Standardvärdet är TopBottom.

ToppBotten	BottomTop

Specialvärden för MinWideModeWidth och MinTallModeHeight

Du kan använda MinWideModeWidth egenskapen för att förhindra att vyn med två fönster kommer in i Wide läget – ställ bara in MinWideModeWidth på Double.PositiveInfinity.

Om du anger MinTallModeHeightDouble.PositiveInfinity förhindrar det att vyn med två fönster kommer in i Tall läge.

Om du anger MinTallModeHeight till 0 förhindrar det att vyn med två fönster kommer in i SinglePane läge.

Svara på lägesändringar

Du kan använda egenskapen skrivskyddat läge för att hämta det aktuella visningsläget. När vyn med två fönster ändrar vilken eller vilka fönster som visas inträffar händelsen ModeChanged innan den återger det uppdaterade innehållet. Du kan hantera händelsen för att svara på ändringar i visningsläget.

Viktigt!

Händelsen ModeChanged inträffar inte när sidan först läses in, så din standard-XAML bör representera användargränssnittet som det ska visas när det läses in första gången.

Ett sätt att använda den här händelsen är att uppdatera appens användargränssnitt så att användarna kan visa allt innehåll i SinglePane läge. Exempelappen har till exempel ett primärt fönster (bilden) och ett informationsfönster.

Högt läge

När det bara finns tillräckligt med utrymme för att visa ett fönster kan du flytta innehållet Pane2 i till Pane1 så att användaren kan bläddra för att se allt innehåll. Det ser ut så här.

SinglePane-läge

Kom ihåg att MinWideModeWidth egenskaperna och MinTallModeHeight avgör när visningsläget ändras, så att du kan ändra när innehållet flyttas mellan fönster genom att justera värdena för dessa egenskaper.

Här är ModeChanged händelsehanterarkoden som flyttar innehållet mellan Pane1 och Pane2. Den anger också en VisualState för att begränsa bildens bredd i Wide läge.

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 och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

TwoPaneView för UWP-appar kräver WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för den här kontrollen finns i namnområdet Microsoft.UI.Xaml.Controls .

• WinUI 2 Apis:TwoPaneView-klass

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

<muxc:TwoPaneView />

Relaterade artiklar

• Layoutöversikt
• Delningsvy