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 solunda veya sağında görüntülenebilir. Bölmenin dört modu vardır:

  • Kaplama

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

  • 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 alanını böler.

  • CompactOverlay

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

  • CompactInline

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

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

UWP Galerisi için WinUI
WinUI Galerisi

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

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

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