Widok z dwoma okienkami

Widok podwójnego okna to kontrolka układu, która ułatwia organizację wyświetlania aplikacji z 2 odrębnymi obszarami zawartości, takimi jak widok listy/szczegółów.

Czy jest to właściwa kontrola?

Użyj widoku z dwoma okienkami, gdy masz dwa odrębne, ale powiązane obszary zawartości i:

• Zawartość powinna automatycznie zmieniać kolejność i zmieniać rozmiar, aby najlepiej dopasować okno.
• Pomocniczy obszar zawartości powinien być pokazywany/ukrywany na podstawie dostępnego miejsca.

Jeśli musisz wyświetlić dwa obszary zawartości, ale nie potrzebujesz zmiany rozmiaru i przestawiania, jakie oferuje widok dwóch paneli, rozważ użycie widoku z podziałem.

W przypadku opcji nawigacji użyj widoku nawigacji.

Jak to działa

Widok z dwoma okienkami zawiera dwa okienka, w których umieszczasz zawartość. Dostosowuje rozmiar i rozmieszczenie okienek w zależności od miejsca dostępnego dla okna. Możliwe układy okienka są definiowane przez wyliczenie TwoPaneViewMode :

Aplikacja w trybie szerokim.

Aplikacja w trybie pionowym.

Widok z dwoma okienkami można skonfigurować, ustawiając element PanePriority , aby określić, które okienko jest wyświetlane, gdy istnieje miejsce tylko dla jednego okienka. Następnie należy określić, czy Pane1 jest wyświetlana na górze, czy w dolnej części wysokich okien, czy po lewej lub prawej stronie dla szerokich okien.

Widok z dwoma okienkami obsługuje rozmiar i rozmieszczenie okienek, ale nadal trzeba dostosować zawartość wewnątrz okienka do zmian rozmiaru i orientacji. Aby uzyskać więcej informacji na temat tworzenia adaptacyjnego interfejsu użytkownika, zobacz Dynamiczne układy z panelami XAML i Layout .

Tworzenie widoku z dwoma okienkami

Ten XAML pokazuje, jak utworzyć podstawowy 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>

Element TwoPaneView nie musi być elementem głównym układu strony. W rzeczywistości często używasz jej wewnątrz kontrolki NavigationView , która zapewnia ogólną nawigację dla aplikacji. TwoPaneView odpowiednio dostosowuje się niezależnie od tego, gdzie znajduje się w drzewie XAML.

Dodawanie zawartości do okienek

Każde okienko w widoku z dwoma okienkami może zawierać jeden kod XAML UIElement. Aby dodać zawartość, zwykle umieszczasz panel układu XAML w każdym okienku, a następnie dodajesz inne kontrolki i zawartość do panelu. Okienka mogą zmieniać rozmiar i przełączać się między trybami szerokimi i wysokimi, więc należy się upewnić, że zawartość w każdym okienku może dostosować się do tych zmian. Aby uzyskać więcej informacji na temat tworzenia adaptacyjnego interfejsu użytkownika, zobacz Dynamiczne układy z panelami XAML i Layout .

W tym przykładzie tworzony jest prosty interfejs użytkownika aplikacji zdjęcia/informacje, pokazany wcześniej. Zawartość można wyświetlić w dwóch okienkach lub połączyć w jedno okienko w zależności od ilości dostępnego miejsca. (Gdy jest tylko miejsce dla jednego okienka, przenosisz zawartość okienka Pane2 do okienka 1 i pozwalasz użytkownikowi przewijać w celu wyświetlenia dowolnej ukrytej zawartości. W dalszej części sekcji Odpowiadanie na zmiany trybu zobaczysz kod tego kodu.

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

Określanie okienka do wyświetlenia

Gdy widok z dwoma okienkami może wyświetlać tylko jedno okienko, używa właściwości PanePriority do określenia, które okienko ma być wyświetlane. Domyślnie właściwość PanePriority jest ustawiona na Pane1. Poniżej przedstawiono sposób ustawiania tej właściwości w języku XAML lub w kodzie.

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

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Ustalanie rozmiaru panelu

Rozmiar okienek zależy od właściwości Pane1Length i Pane2Length . Używają one wartości GridLength , które obsługują automatyczne i star(*) ustalania rozmiaru. Zobacz sekcję Właściwości układu w układach responsywnych w XAML, aby uzyskać wyjaśnienie rozmiaru automatycznego i gwiazdkowego.

Domyślnie Pane1Length jest ustawiony na Auto i automatycznie dopasowuje swój rozmiar do zawartości. Pane2Length jest ustawiona na * i używa całej pozostałej przestrzeni.

Okna z domyślnym rozmiarem

Wartości domyślne są przydatne w przypadku typowego układu listy i szczegółów, w którym lista elementów znajduje się w Pane1, a wiele szczegółów w Pane2. Jednak w zależności od zawartości możesz wolisz podzielić przestrzeń inaczej. Pane1Length W tym miejscu jest ustawiona wartość 2* , aby uzyskać dwa razy więcej miejsca niż Pane2.

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

Okienka o rozmiarze 2* i *

Jeśli ustawisz okienko na automatyczne dopasowanie rozmiaru, możesz kontrolować jego wymiary, ustawiając wysokość i szerokość Panel, który zawiera zawartość okienka. W takim przypadku może być konieczne obsłużenie ModeChanged zdarzenia i ustawienie ograniczeń wysokości i szerokości zawartości odpowiednio dla bieżącego trybu.

Wyświetl w trybie szerokim lub wysokim

Na jednym ekranie tryb wyświetlania widoku dwupanelowego jest określany przez właściwości MinWideModeWidth i MinTallModeHeight. Obie właściwości mają domyślną wartość 641px, taką samą jak NavigationView.CompactThresholdWidth.

W tej tabeli pokazano, jak Height i Width w TwoPaneView określają, który tryb wyświetlania jest używany.

Opcje szerokiej konfiguracji

MinWideModeWidth kontroluje, kiedy widok dwupanelowy przechodzi w tryb szerokoekranowy. Widok dwupanelowy przechodzi w tryb Wide, gdy dostępna przestrzeń jest szersza niż właściwość MinWideModeWidth. Wartość domyślna to 641px, ale można ją zmienić na dowolną wartość. Ogólnie rzecz biorąc, należy ustawić tę właściwość na dowolną minimalną szerokość okienka.

Gdy widok dwóch okienek jest w trybie szerokim, właściwość WideModeConfiguration określa, co należy pokazać:

Ustawienie domyślne to LeftRight.

LewoPrawo	PrawoLewo

Wysokie opcje konfiguracji

Widok dwóch okienek przechodzi w tryb Tall, gdy dostępne miejsce jest węższe niż MinWideModeWidth, a wyższe niż MinTallModeHeight. Wartość domyślna to 641px, ale można ją zmienić na dowolną wartość. Ogólnie rzecz biorąc, należy ustawić tę właściwość na dowolną minimalną wysokość okienka.

Gdy widok dwóch okienek jest w trybie wysokim, właściwość TallModeConfiguration określa, co należy pokazać:

Wartość domyślna to TopBottom.

Z góry na dół	Dolny szczyt

Wartości specjalne dla MinWideModeWidth i MinTallModeHeight

Możesz użyć właściwości MinWideModeWidth, aby zapobiec wejściu widoku w tryb dwupanelowy Wide — wystarczy ustawić MinWideModeWidth na Double.PositiveInfinity.

Jeśli ustawisz MinTallModeHeightDouble.PositiveInfinity, uniemożliwi to wejście w tryb widoku dwupanelowego Tall.

Jeśli ustawisz wartość MinTallModeHeight na 0, uniemożliwi to przełączenie na widok dwupanelowy SinglePane.

Reagowanie na zmiany trybu

Aby uzyskać bieżący tryb wyświetlania, możesz użyć właściwości Tryb tylko do odczytu. Za każdym razem, gdy widok z dwoma okienkami zmienia okienko lub okienka, które jest wyświetlane, zdarzenie ModeChanged występuje przed renderowaniem zaktualizowanej zawartości. Zdarzenie można obsługiwać, aby reagować na zmiany w trybie wyświetlania.

Jednym ze sposobów wykorzystania tego zdarzenia jest zaktualizowanie interfejsu użytkownika aplikacji, aby użytkownicy mogli wyświetlać całą zawartość w trybie SinglePane. Na przykład przykładowa aplikacja ma okienko podstawowe (obraz) i okienko informacji.

Tryb wysoki

Gdy jest wystarczająco dużo miejsca tylko na wyświetlenie jednego panelu, możesz przenieść zawartość Pane2 do Pane1, aby użytkownik mógł przewinąć stronę i zobaczyć całą zawartość. Wygląda na to.

Tryb pojedynczego okienka

Pamiętaj, że właściwości MinWideModeWidth i MinTallModeHeight określają, kiedy zmienia się tryb wyświetlania, co pozwala na zmianę czasu przenoszenia zawartości między okienkami poprzez dostosowanie wartości tych właściwości.

ModeChanged Oto kod procedury obsługi zdarzeń, który przenosi zawartość między Pane1 i Pane2. Ustawia również VisualState, aby ograniczyć szerokość obrazu w trybie Wide.

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

Aplikacja TwoPaneView dla platformy UWP wymaga interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:TwoPaneView />

Powiązane artykuły

• Omówienie układu
• widok podzielony