Aracılığıyla paylaş

Bölünmüş görünüm denetimi

Bölünmüş görünüm denetimi genişletilebilir/daraltılabilir bir bölmeye ve içerik alanına sahiptir.

Önemli API'ler: SplitView sınıfı

Burada, Hub'ını göstermek için SplitView kullanan Microsoft Edge uygulamasının bir örneği verilmiştir.

Microsoft Edge bölünmüş görünüm örneği

Bölünmüş görünümün içerik alanı her zaman görünür. Bölme genişletilebilir, daraltılabilir veya açık durumda kalabilir ve uygulama penceresinin sol tarafından veya sağ tarafından kendini sunabilir. Bölmenin dört modu vardır:

  • Kaplama

    Bölme açılana kadar gizlenir. Açıldığında, bölme içerik alanını katmanlar.

  • satır içi

    Bölme her zaman görünür ve içerik alanını kaplamaz. Bölme ve içerik alanları, kullanılabilir ekran taşınmazlarını böler.

  • CompactOverlay

    Bölmenin dar bir kısmı, simgeleri gösterecek kadar geniş olan bu modda her zaman görünür. Varsayılan kapalı bölme genişliği 48 pikseldir ve ile CompactPaneLengthdeğiştirilebilir. Bölme açılırsa, içerik alanı yer paylaşımlı olur.

  • CompactInline

    Bölmenin dar bir kısmı, simgeleri gösterecek kadar geniş olan bu modda her zaman görünür. Varsayılan kapalı bölme genişliği 48 pikseldir ve ile CompactPaneLengthdeğiştirilebilir. Bölme açılırsa, içerik için kullanılabilir alanı azaltarak içeriği yolundan çıkarır.

Doğru kontrol bu mu?

Bölünmüş görünüm denetimi, kullanıcıların ek bölmeyi açıp kapatabileceği herhangi bir "çekmece" deneyimi oluşturmak için kullanılabilir. Örneğin, liste/ayrıntılar desenini oluşturmak için SplitView'ı kullanabilirsiniz.

Genişlet/daralt düğmesi ve gezinti öğelerinin listesini içeren bir gezinti menüsü oluşturmak istiyorsanız NavigationView denetimini kullanın.

Örnekler

WinUI 2 Galerisi
WinUI Galerisi

WinUI 2 Galeri uygulaması yüklüyse, uygulamayı açmak için buraya tıklayın ve SplitView'un çalıştığını görün.

Bölünmüş görünüm oluşturma

burada, İçerik'in yanında satır içinde görünen açık bir Bölme içeren bir SplitView denetimi yer alır.

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

Örnek kodunu alma

  • Last updated on