İki bölmeli görünüm

İki bölmeli görünüm, liste/ayrıntı görünümü gibi 2 farklı içerik alanına sahip uygulamaların görünümünü yönetmenize yardımcı olan bir düzen denetimidir.

Doğru kontrol bu mu?

İki ayrı ama ilgili içerik alanınız varsa ve iki bölmeli görünümü kullanın:

• İçeriğin pencereye en uygun şekilde otomatik olarak yeniden düzenlenmesi ve yeniden boyutlandırılması gerekir.
• İçeriğin ikincil alanı kullanılabilir alana göre gösterilmelidir/gizlenmelidir.

İki içerik alanı görüntülemeniz gerekiyorsa ancak iki bölmeli görünüm tarafından sağlanan yeniden boyutlandırma ve yeniden düzenlemeye ihtiyacınız yoksa, bunun yerine Bölünmüş görünüm kullanmayı göz önünde bulundurun.

Gezinti seçenekleri için Gezinti görünümü kullanın.

Nasıl çalışır?

İki bölmeli görünümde, içeriğinizi yerleştirdiğiniz iki bölme vardır. Penceredeki kullanılabilir alana bağlı olarak bölmelerin boyutunu ve düzenini ayarlar. Olası bölme düzenleri TwoPaneViewMode numaralandırması tarafından tanımlanır:

enum değeri	Description
SinglePane	PanePriority özelliği tarafından belirtildiği gibi yalnızca bir bölme gösterilir.
Wide	Bölmeler yan yana gösterilir veya WideModeConfiguration özelliği tarafından belirtildiği gibi tek bir bölme gösterilir.
Tall	Bölmeler, TallModeConfiguration özelliği tarafından belirtildiği gibi üst-alt konumda veya tek bir bölme olarak gösterilir.

Uygulama geniş modda.

Uygulama uzun modda.

Yalnızca bir bölme için alan olduğunda hangi bölmenin gösterileceğini belirtmek için PanePriority ayarını yaparak iki bölmeli görünümü yapılandırabilirsiniz. Ardından, uzun pencereler için üstte veya altta mı yoksa geniş pencereler için sol veya sağda mı gösterileceğini belirtirsiniz Pane1 .

İki bölmeli görünüm, bölmelerin boyutunu ve düzenini işler, ancak bölmenin içindeki içeriğin boyut ve yönlendirmedeki değişikliklere uyum sağlaması gerekir. Uyarlamalı kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için XAML ile duyarlı düzenler ve Düzen panelleri konularına bakın.

İki bölmeli görünüm oluşturma

• Önemli API'ler:TwoPaneView sınıfı

Bu XAML, temel TwoPaneViewbir öğesinin nasıl oluşturulacağını gösterir.

<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'un sayfa düzeninizin kök öğesi olması gerekmez. Aslında, bunu genellikle uygulamanızın genel gezintisini sağlayan bir NavigationView denetiminde kullanırsınız. , TwoPaneView XAML ağacının neresinde olduğuna bakılmaksızın uygun şekilde uyarlanır.

Bölmelere içerik ekleme

İki bölmeli görünümün her bölmesi tek bir XAML UIElementbarındırabilir. İçerik eklemek için genellikle her bölmeye bir XAML düzen paneli yerleştirir ve ardından panele başka denetimler ve içerik eklersiniz. Bölmeler boyutu değiştirebilir ve geniş ve uzun modlar arasında geçiş yapabilir, bu nedenle her bölmedeki içeriğin bu değişikliklere uyarlanabilir olduğundan emin olmanız gerekir. Uyarlamalı kullanıcı arabirimi oluşturma hakkında daha fazla bilgi için XAML ile duyarlı düzenler ve Düzen panelleri konularına bakın.

Bu örnek, daha önce gösterilen basit resim/bilgi uygulaması kullanıcı arabirimini oluşturur. İçerik, kullanılabilir alan miktarına bağlı olarak iki bölmede gösterilebilir veya tek bir bölmede birleştirilebilir. (Tek bir bölme için yalnızca alan olduğunda, Pane2'nin içeriğini Pane1'e taşırsınız ve kullanıcının gizli içeriği görmesi için kaydırmasına izin verirsiniz. Bunun kodunu daha sonra Mod değişikliklerine yanıt verme bölümünde göreceksiniz.)

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

Görüntülenecek bölmeyi belirtin

İki bölmeli görünüm yalnızca tek bir bölme görüntüleyemiyorsa, görüntülenecek bölmeyi belirlemek için PanePriority özelliğini kullanır. Varsayılan olarak PanePriority, Pane1 olarak ayarlanır. Bu özelliği XAML'de veya kodda şu şekilde ayarlayabilirsiniz.

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

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Bölme boyutlandırma

Bölmelerin boyutu Pane1Length ve Pane2Length özellikleri tarafından belirlenir. Bunlar otomatik ve yıldız(*) boyutlandırmasını destekleyen GridLength değerlerini kullanır. Otomatik ve yıldız boyutlandırmanın açıklaması için XAML ile Duyarlı Düzenler sayfasındaki Düzen Özellikleri bölümüne bakın.

Varsayılan olarak, Pane1Length, Auto olarak ayarlanır ve içeriğine sığacak şekilde boyutlandırılır. Pane2Length olarak ayarlanır * ve kalan tüm alanı kullanır.

Varsayılan boyutlandırmaya sahip bölmeler

Varsayılan değerler, içindeki öğelerin Pane1listesinin ve içinde birçok ayrıntının bulunduğu tipik bir liste/ayrıntı Pane2düzeni için kullanışlıdır. Ancak içeriğinize bağlı olarak alanı farklı şekilde bölmeyi tercih edebilirsiniz. Pane1Length burada 2* olarak ayarlanır, böylece 2*, 'nin iki katı kadar alan alır.

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

2* ve * boyutunda paneller

Bir bölmeyi otomatik boyutlandırmayı kullanacak şekilde ayarlarsanız, bölmenin içeriğini barındıran yüksekliği ve genişliğini Panel ayarlayarak boyutu denetleyebilirsiniz. Bu durumda, ModeChanged olayını işlemeniz ve içeriğin yükseklik ve genişlik kısıtlamalarını mevcut moda uygun olarak ayarlamanız gerekebilir.

Geniş veya uzun modda görüntüleme

Tek bir ekranda, iki bölmeli görünümün görüntüleme ModuMinWideModeWidth ve MinTallModeHeight özellikleri tarafından belirlenir. Her iki özelliğin de varsayılan değeri 641px'tır ve NavigationView.CompactThresholdWidth ile aynıdır.

Bu tablo, Height ve Width öğelerinin, hangi görüntü modunun TwoPaneView kullanılacağını nasıl belirlediğini gösterir.

TwoPaneView koşulu	Mode
Width > MinWideModeWidth	Wide modu kullanılır
Width <= MinWideModeWidth, ve Height>MinTallModeHeight	Tall modu kullanılır
Width <= MinWideModeWidth, ve Height<= MinTallModeHeight	SinglePane modu kullanılır

Geniş yapılandırma seçenekleri

MinWideModeWidth iki bölmeli görünüm geniş moda girdiğinde denetler. İki bölmeli görünüm, kullanılabilir alan Wide özelliği ile belirlenen değerden daha geniş olduğunda MinWideModeWidth moduna geçer. Varsayılan değer 641 pikseldir, ancak istediğiniz değerle değiştirebilirsiniz. Genel olarak, bu özelliği bölmenizin en düşük genişliğini istediğiniz şekilde ayarlamanız gerekir.

İki bölmeli görünüm geniş moddayken , WideModeConfiguration özelliği nelerin gösterileceğini belirler:

Enum değeri	Description
SinglePane	Tek bir bölme (PanePriority tarafından belirlendiği gibi). Bölme, TwoPaneView öğesinin tam boyutunu alır (diğer bir deyişle, her iki yönde de yıldız boyutundadır).
LeftRight	Pane1 sağda/Pane2 solda. Her iki bölme de dikey olarak yıldız boyutuna, Pane1'nin genişliği otomatik ayarlandı ve Pane2 genişliği yıldız boyutundadır.
RightLeft	Pane1 sağda/Pane2 sol tarafta. Her iki bölme de dikey olarak yıldız boyutuna, Pane2'nin genişliği otomatik ayarlandı ve Pane1 genişliği yıldız boyutundadır.

Varsayılan ayar LeftRight değeridir.

SolSağ	RightLeft

Uyarı

Cihaz sağdan sola (RTL) bir dil kullandığında, iki bölmeli görünüm sırayı otomatik olarak değiştirir: RightLeft olarak LeftRightişlenir ve LeftRight olarak RightLeftişlenir.

Kapsamlı yapılandırma seçenekleri

İki bölmeli görünüm, mevcut alan genişliği Tall'den daha dar ve MinWideModeWidth'den daha uzun olduğunda MinTallModeHeight moduna girer. Varsayılan değer 641 pikseldir, ancak istediğiniz değerle değiştirebilirsiniz. Genel olarak, bu özelliği bölmenizin en düşük yüksekliğini istediğiniz şekilde ayarlamanız gerekir.

İki bölmeli görünüm uzun moddayken , TallModeConfiguration özelliği nelerin gösterileceğini belirler:

Enum değeri	Description
SinglePane	Tek bir bölme (PanePriority tarafından belirlendiği gibi). Bölme, TwoPaneView öğesinin tam boyutunu alır (diğer bir deyişle, her iki yönde de yıldız boyutundadır).
TopBottom	Pane1 üsttePane2 altta. Her iki bölme de yatayda yıldız boyutunda, Pane1'nin yüksekliği otomatik boyutlandırılır ve Pane2'in yüksekliği yıldız boyutundadır.
BottomTop	Pane1 ögesini seçinPane2 . Her iki bölme de yatayda yıldız boyutunda, Pane2'nin yüksekliği otomatik boyutlandırılır ve Pane1'in yüksekliği yıldız boyutundadır.

Varsayılan değer: TopBottom.

ÜstAlt	Alt Üst

MinWideModeWidth ve MinTallModeHeight için özel değerler

İki bölme görünümünün MinWideModeWidth moduna geçmesini Wide önlemek için bu özelliği kullanabilirsiniz - MinWideModeWidth değerini Double.PositiveInfinity olarak ayarlayın.

Eğer MinTallModeHeight'yı Double.PositiveInfinity olarak ayarlarsanız, iki bölmeli görünüm Tall moduna girmesini engeller.

MinTallModeHeight sıfır olarak ayarlarsanız, iki bölmeli görünümün SinglePane moduna geçmesini engeller.

Mod değişikliklerine yanıt verme

Geçerli görüntüleme modunu almak için salt okunur Mod özelliğini kullanabilirsiniz. İki bölmeli görünüm hangi bölmeyi veya bölmeleri görüntülediğini değiştirdiğinde, ModeChanged olayı güncellenmiş içeriği görüntülemeden önce gerçekleşir. Görüntüleme modundaki değişikliklere yanıt vermek için etkinliği yönetebilirsiniz.

Önemli

Olay ModeChanged , sayfa ilk yüklendiğinde gerçekleşmez, bu nedenle varsayılan XAML'niz ilk yüklendiğinde görünmesi gereken kullanıcı arabirimini temsil etmelidir.

Bu olayı kullanmanın bir yolu, kullanıcıların tüm içeriği SinglePane modda görüntüleyebilmesi için uygulamanızın kullanıcı arabirimini güncelleştirmektir. Örneğin, örnek uygulamanın birincil bölmesi (resim) ve bilgi bölmesi vardır.

Yüksek mod

Yalnızca bir bölmeyi görüntülemek için yeterli alan olduğunda, kullanıcının tüm içeriği görebilmesi için içeriği Pane2'den Pane1'e taşıyabilirsiniz, böylece kullanıcı kaydırabilir. Şuna benziyor.

Tek Sayfa modu

MinWideModeWidth ve MinTallModeHeight özelliklerinin görüntü modunun ne zaman değişeceğini belirlediğini unutmayın; bu nedenle, bu özelliklerin değerlerini ayarlayarak içeriğin bölmeler arasında ne zaman taşındığını değiştirebilirsiniz.

İçeriği ModeChanged ile Pane1 arasında taşıyan Pane2 olay işleyici kodu aşağıdadır. Ayrıca, görüntünün genişliğini modda kısıtlamak için bir Wide ayarlar.

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

İlgili makaleler

• Düzene genel bakış
• bölünmüş görünüm