Aracılığıyla paylaş

Kaydırma görüntüleyicisi denetimleri

Gösterilecek kullanıcı arabirimi içeriği bir alana sığmayacak kadar fazla olduğunda, kaydırma görüntüleyicisi denetimi kullanın.

Kaydırma görüntüleyicileri, içeriğin görünüm penceresi sınırlarının (görünür alan) ötesine genişletilebilmesini sağlar. Kullanıcılar dokunmatik ekran, fare çarkı, klavye veya oyun yüzeyi aracılığıyla ya da kaydırma görüntüleyicisinin kaydırma çubuğuyla etkileşim kurmak için fare veya kalem imlecini kullanarak kaydırma görüntüleyici yüzeyini değiştirerek bu içeriğe ulaşır.

Duruma bağlı olarak, kaydırma görüntüleyicisinin kaydırma çubuğu aşağıdaki çizimde gösterilen iki farklı görselleştirme kullanır: kaydırma göstergesi (sol) ve geleneksel kaydırma çubuğu başparmak (sağ).

İçeriğin sağ kenarında 2 piksel genişliğinde dikey çizgi olan kaydırma çubuğunu gösteren ekran görüntüsü.

Standart kaydırma çubuğunu, üstte yukarı ok düğmesinin olduğu 6 piksel genişliğindeki dikey çizgiyi ve altta aşağı oku gösteren ekran görüntüsü.

Önemli

WinUI 3'de iki farklı kaydırma görüntüleyici denetimi vardır: ScrollViewer ve ScrollView. Kaydırma görüntüleyicisi denetimleri hakkında genel olarak konuştuğumuzda, bilgiler her iki denetim için de geçerlidir.

Denetim ScrollView davranış ve kullanım açısından denetime ScrollViewer benzer, ancak InteractionTracker'ı temel alır, animasyon temelli görünüm değişiklikleri gibi yeni özelliklere sahiptir ve ItemsRepeater ile tam işlevsellik sağlamak için tasarlanmıştır.

Kaydırma, sürükleme ve yakınlaştırma

İçeriğinizin kaydırılması, kaydırılması ve yakınlaştırılması için kaydırma görüntüleyicisi denetimi kullanın.

  • Kaydırma: Kaydırma çubuğu başparmağını sürükleyerek veya fare üzerindeki kaydırma tekerleğini kullanarak içeriği dikey veya yatay olarak taşıma.
  • Yatay kaydırma: Dokunmatik veya kalem girişi kullanarak içeriği dikey veya yatay olarak taşıma.
  • Yakınlaştırma: İçeriğin ölçeğini optik olarak artırır veya küçültür.

Kaydırma çubuğu kullanıcının giriş yönteminin bilincindedir ve hangi görselleştirmenin görüntüleneceğini belirlemek için bunu kullanır.

  • Örneğin, dokunarak kaydırma çubuğu doğrudan kullanılmadan bölge kaydırıldığında, kaydırma göstergesi belirir ve geçerli kaydırma konumunu gösterir.
  • Fare veya kalem imleci kaydırma göstergesinin üzerine geldiğinde, geleneksel kaydırma çubuğuna dönüştürülür. Kaydırma çubuğu başparmağını sürüklemek, kaydırma bölgesini düzenler.

İmleç üzerine geldiğinde, kaydırma çubuğunun dar kaydırma göstergesinden geleneksel başparmak işaretine dönüşümünü gösteren animasyon.

Uyarı

Kaydırma çubuğu görünür olduğunda, ScrollViewer'ınızın içindeki içeriğin üzerine 16 piksel olarak bindirilir. İyi bir UX tasarımı sağlamak için bu katman tarafından hiçbir etkileşimli içeriğin gizlenmediğinden emin olmak istersiniz. Ayrıca UX çakışmasını önlemek istiyorsanız, kaydırma çubuğuna yer açmak için görünüm penceresinin kenarında 16 piksel boşluk bırakın.

Görünüm penceresi ve kapsam

Kaydırma görüntüleyicisi, işlevselliğini anlamak için önemli olan iki ana bölgeden oluşur. Hem gizli hem de görünür tüm kaydırılabilir içeriği içeren alan uzantıdır. Denetimin içeriğin gösterildiği görünür alanı görünüm penceresidir.

Görünüm penceresi veya denetimin görünür alanının ötesine uzanan bir metin bloğu.

Bu bölgelerin yükseklik ve genişliğinin yanı sıra, boyut boyutu ile görünüm penceresi boyutu arasındaki fark olan kaydırılabilir yükseklik ve genişliği almanıza olanak tanıyan çeşitli API'ler mevcuttur.

Recommendations

  • Mümkün olduğunda, yatay yerine dikey kaydırma tasarımı.
  • Bir görünüm penceresi sınırını (dikey veya yatay) aşan içerik bölgeleri için tek eksenli kaydırma kullanın. her iki görünüm penceresi sınırlarının (dikey ve yatay) ötesine uzanan içerik bölgeleri için iki eksenli kaydırma kullanın.
  • Öğeler görünümünde, liste görünümünde, kılavuz görünümünde, birleşik giriş kutusunda, liste kutusunda, metin giriş kutusunda ve hub denetimlerinde yerleşik kaydırma işlevini kullanın. Bu denetimlerle, tümünü bir kerede göstermek için çok fazla öğe varsa, kullanıcı öğe listesini yatay veya dikey olarak kaydırabiliyor.
  • Kullanıcının daha büyük bir alanın çevresinde her iki yönde de kaydırmasını ve büyük olasılıkla yakınlaştırmasını istiyorsanız, örneğin, kullanıcının tam boyutlu bir görüntüyü (ekrana sığacak şekilde boyutlandırılmış bir resim yerine) kaydırmasına ve yakınlaştırmasına izin vermek istiyorsanız, görüntüyü kaydırma görüntüleyicisinin içine yerleştirin.
  • Kullanıcı uzun bir metin parçası boyunca kaydıracaksa, kaydırma görüntüleyicisini yalnızca dikey olarak kaydıracak şekilde yapılandırın.
  • Yalnızca bir nesne içeren bir kaydırma görüntüleyicisi kullanın. Tek bir nesnenin bir düzen paneli olabileceğine ve bu panelde kendi başına herhangi bir sayıda nesnenin bulunabileceğine dikkat edin.
  • Kaydırılabilir bir görünümde (ScrollViewer veya ListView gibi) uiElement için işaretçi olaylarını işlemeniz gerekiyorsa , UIElement.CancelDirectManipulation çağrısı yaparak görünümdeki öğe üzerinde işleme olayları desteğini açıkça devre dışı bırakmanız gerekir. Görünümde işleme olaylarını yeniden etkinleştirmek için UIElement.TryStartDirectManipulation öğesini çağırın.

Kaydırma görüntüleyicisi oluştur.

WinUI 3 Galeri uygulamasını açın ve ScrollView'un nasıl çalıştığını görün

WinUI 3 Galeri uygulamasını açın ve ScrollViewer'ı çalışırken görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Kaydırma görüntüleyicisi denetimi, içeriği açıkça kaydırma görüntüleyicisinde kaydırarak veya bir içerik denetiminin denetim şablonuna kaydırma görüntüleyicisi yerleştirerek içeriği kaydırılabilir hale getirmek için kullanılabilir.

Denetim şablonunda kaydırma görüntüleyicisi

Kaydırma görüntüleyicisi denetiminin diğer denetimlerin bileşik bir parçası olarak mevcut olması normaldir. Kaydırma görüntüleyicisi bölümü, yalnızca konak denetiminin düzen alanı genişletilmiş içerik boyutundan daha küçük olduğunda kaydırma çubuklarıyla birlikte bir görünüm penceresi görüntüler.

ItemsView şablonunda bir ScrollView denetim içerir. ancak ScrollView özelliğine erişebilirsiniz.

ListView ve GridView şablonları her zaman bir ScrollVieweriçerir. TextBox ve RichEditBox da şablonlarına bir ScrollViewer ekler. Yerleşik ScrollViewer bölümünün bazı davranışlarını ve özelliklerini etkilemek için, ScrollViewer stillerde ayarlanabilen ve şablon bağlamalarında kullanılabilen bir dizi XAML ekli özelliği belirler. Ekli özellikler hakkında daha fazla bilgi için bkz. Ekli özelliklere genel bakış.

Kaydırılabilir içerik ayarlama

Kaydırma görüntüleyicisinin içindeki içerik, kaydırma görüntüleyicisinin görünüm penceresine göre daha büyük olduğunda kaydırılabilir hale gelir

Bu örnek, bir Rectangle öğesini ScrollView denetiminin içeriği olarak ayarlar. Kullanıcı bu dikdörtgenin yalnızca 500x400 bölümünü görür ve geri kalanını görmek için kaydırabilir.

<ScrollView Width="500" Height="400">
    <Rectangle Width="1000" Height="800">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollView>

Tasarım Düzeni

Önceki örnekte, dikdörtgenin boyutu açıkça kaydırma görüntüleyicisinden daha büyük olacak şekilde ayarlanmıştır. Kaydırma görüntüleyicisi içeriğinin bir liste veya metin bloğunda olduğu gibi doğal olarak büyümesine izin verilen durumlarda, kaydırma görüntüleyicisini içeriğinin ( kapsam) dikey, yatay, hem de her ikisi gibi genişlemesine izin verecek şekilde yapılandırabilirsiniz.

Örneğin, bu metin bloğu ebeveyn kapsayıcısı onu kısıtlayana kadar yatay olarak büyür, sonra metni sarar ve dikey olarak büyür.

<TextBlock Text="{x:Bind someText}" TextWrapping="WrapWholeWords"/>

Metin bloğu bir kaydırma görüntüleyicisine sarmalandığında, kaydırma görüntüleyicisi yatay ve dikey büyümesini kısıtlar.

Dikey , içeriğin yatay olarak kısıtlandığı, ancak görünüm penceresi sınırlarının ötesinde dikey olarak büyüyebileceği ve kullanıcının içeriği yukarı ve aşağı kaydırabileceği anlamına gelir.

Denetimin görünür alanının veya görünüm penceresinin dışına dikey olarak genişleyen ve dikey kaydırma çubuğu gösteren bir metin bloğu.

Yatay , içeriğin dikey olarak kısıtlandığı, ancak görünüm penceresi sınırlarının ötesinde yatay olarak büyüyebileceği ve kullanıcının içeriği sola ve sağa kaydırabileceği anlamına gelir.

Görünüm alanı veya denetimin görünen kısmının ötesine yatay olarak uzanan ve yatay kaydırma çubuğu gösterilen bir metin bloğu.

Kaydırma çubuğu görünürlüğü

ScrollViewer ve ScrollView denetimleri, içeriğin yatay ve dikey kaydırmasını yapılandırmak için biraz farklı araçlar kullanır.

  • ScrollViewer denetiminde VerticalScrollBarVisibility ve HorizontalScrollBarVisibility özellikleri hem kaydırma çubuklarının görünürlüğünü hem de belirli bir yönde kaydırmaya izin verilip verilmediğini denetler. Bir özellik olarak Disabledayarlandığında, kullanıcı etkileşimi tarafından içerik bu yönde kaydırılamaz.
    • Varsayılan değerler şunlardır: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Disabled"
  • ScrollView denetiminde VerticalScrollBarVisibility ve HorizontalScrollBarVisibility özellikleri yalnızca kaydırma çubuklarının görünürlüğünü denetler.
    • Varsayılan değerler şunlardır: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Auto"

Bu tabloda, bu özellikler için görünürlük seçenekleri açıklanmaktadır.

Değer Description
Auto Kaydırma çubuğu yalnızca görünüm penceresi içeriğin tümünü görüntüleyemediğinde görünür.
Devre dışı (yalnızca ScrollViewer) Görünüm penceresi içeriğin tümünü görüntüleyemediğinde bile kaydırma çubuğu görünmez. Kullanıcı etkileşimi ile kaydırma devre dışı bırakıldı. (Programlı kaydırma hala mümkündür.)
Gizli Görünüm penceresi içeriğin tümünü görüntüleyemediğinde bile kaydırma çubuğu görünmez. Kaydırma hala etkindir ve dokunma, klavye veya fare tekerleği etkileşimi aracılığıyla gerçekleşebilir.
Görünür Her zaman bir kaydırma çubuğu görüntülenir. Mevcut UX tasarımlarında, görünüm penceresi içeriğin tümünü görüntüleyemediğinde kaydırma çubuğu her zaman görünür; aksi takdirde, yalnızca fare imleci onun üzerindeyken görünür.

(ScrollViewer ScrollBarVisibility numaralandırmasını kullanır; ScrollView ScrollingScrollBarVisibility numaralandırmasını kullanır.)

Oryantasyon

ScrollView denetimi, içeriğin düzenini denetlemenizi sağlayan bir ContentOrientation özelliğine sahiptir. Bu özellik, içeriğin açıkça kısıtlanmadığında nasıl büyüyebileceğini belirler. Eğer Height ve Width içerik üzerinde açıkça ayarlanmışsa, ContentOrientation hiçbir etkisi yoktur.

Bu tabloda ScrollView için seçenekler ve ContentOrientation için eşdeğer ayarlar gösterilir.

Oryantasyon ScrollView Kaydırma Görüntüleyici
Dikey ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Yatay ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Both ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Hiç kimse ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Dikey düzen

Varsayılan olarak, kaydırma görüntüleyicinin içerik düzeni (yönlendirme) dikeydir.

Bu örnekte, ScrollView'ın öğesi olarak Content kullanılır. ItemsRepeater için UniformGridLayout , boşluk tükenene kadar öğeleri yatay olarak bir satırda (bu örnekte 500 piksel) konumlandırıp sonraki öğeyi sonraki satıra konumlandırir. ItemsRepeater, kullanıcının görebileceği 400 pikselden uzun olabilir, ancak kullanıcı içeriği dikey olarak kaydırabilir.

Varsayılan ContentOrientation değer olur, Verticalbu nedenle ScrollView'da değişiklik gerekmez.

<ScrollView Width="500" Height="400">
    <ItemsRepeater ItemsSource="{x:Bind Albums}"
                   ItemTemplate="{StaticResource MyTemplate}">
        <ItemsRepeater.Layout>
            <UniformGridLayout RowSpacing="8" ColumnSpacing="8"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollView>

Yatay düzen

Bu örnekte içerik, öğelerini yatay olarak yerleştiren bir StackPanel içeriktir. Kaydırma görüntüleyici yapılandırması yatay kaydırmayı destekleyecek ve dikey kaydırmayı devre dışı bırakacak şekilde değiştirilir.

ScrollView'un ContentOrientation özelliği, içeriğin gerektiği kadar yatay olarak büyümesine izin verecek şekilde Horizontal olarak ayarlanır.

<ScrollView Width="500" Height="400" ContentOrientation="Horizontal">
    <StackPanel Orientation="Horizontal">
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

Programlı kaydırma

Kaydırma görüntüleyicisinin ofset özellikleri salt okunurdur, ancak programlama yoluyla kaydırma yapabilmeniz için yöntemler sunulmaktadır.

ScrollView denetimi için ScrollTo yöntemini çağırın ve kaydırmak istediğiniz konuma ulaşmak için yatay ve dikey ofsetleri iletin. Bu durumda kaydırma yalnızca dikeydir, bu nedenle geçerli HorizontalOffset değeri kullanılır. En üste kaydırmak için VerticalOffset'in 0 değeri kullanılır. Alta kaydırmak için, VerticalOffset öğesi, ScrollableHeight ile aynıdır.

<Button Content="Scroll to top" Click="ScrollTopButton_Click"/>
<Button Content="Scroll to bottom" Click="ScrollBottomButton_Click"/>
<ScrollView x:Name="scrollView" Width="500" Height="400">
    <StackPanel>
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

private void ScrollTopButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: 0);
}

private void ScrollBottomButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: scrollView.ScrollableHeight);
}

ScrollView ayrıca, mevcut uzaklıktan belirtilen bir delta kadar kaydırmanızı sağlayan dikey veya yatay ScrollBy yöntemini de sağlar.

Yakınlaştırma

Kullanıcının içeriği optik olarak yakınlaştırmasını ve uzaklaştırmasını sağlamak için kaydırma görüntüleyici kullanabilirsiniz. Optik yakınlaştırma etkileşimleri, parmaklarınızı ayırarak (yakınlaştırma) veya birbirine yaklaştırarak (uzaklaştırma) yapılan sıkıştırma ve esnetme hareketleri ya da fare kaydırma tekerleğini kaydırırken Ctrl tuşuna basılması yoluyla gerçekleştirilir. Yakınlaştırma hakkında daha fazla bilgi için bkz . Optik yakınlaştırma ve yeniden boyutlandırma.

Kullanıcı etkileşimine ZoomMode göre yakınlaştırmayı etkinleştirmek için özelliğini Enabled ( Disabled varsayılan olarak) olarak ayarlayın. Özelliğindeki ZoomMode değişiklikler hemen geçerli olur ve devam eden kullanıcı etkileşimini etkileyebilir.

Bu örnekte, yakınlaştırmaya izin verecek şekilde yapılandırılmış bir kaydırma görüntüleyicisi içinde yer alan bir Görüntü gösterilmektedir.

<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Bu durumda Görüntü, kaydırma görüntüleyicisi tarafından kısıtlanmamıştır, bu nedenle başlangıçta yerel boyutunda gösterilir. Görüntü kaynağı görünüm penceresinden büyükse, kullanıcının resmin tamamını görmek için uzaklaştırması gerekir ve bu amaçlanan davranış olmayabilir.

Resim o kadar yakınlaştırılmış ki, sadece resmin sol üst kısmındaki mavi gökyüzü ve bulutlar görünür.

Sonraki örnekte, kaydırma görüntüleyicisinin görüntüyü görünüm penceresiyle kısıtlayarak başlangıçta büyütülmesi ve kullanıcının isterse yakınlaştırıp kaydırabilmesi için nasıl yapılandırılabildiği gösterilmektedir.

Ön plan, dağ ve gökyüzü görünür olacak şekilde uzaktan çekilmiş bir dağın fotoğrafı.

Görüntüyü ScrollView'un görünüm penceresiyle sınırlamak için ContentOrientation özelliğini olarak Noneayarlayın. Kaydırma çubuğu görünürlüğü bu kısıtlamaya bağlı olmadığından, kullanıcı yakınlaştırdığında kaydırma çubukları otomatik olarak görünür.

<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Yakınlaştırma faktörü

MinZoomFactor ve MaxZoomFactor özelliklerini kullanarak kullanıcının içeriği yakınlaştırma seviyesini kontrol edin. Bu özellikler hem kullanıcı etkileşimleri hem de programlı yakınlaştırma için etkilidir.

  • Varsayılan değerler şunlardır: MinZoomFactor="0.1", MaxZoomFactor="10.0"
<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled" 
            MinZoomFactor="1.0" MaxZoomFactor="8.0">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

Programlı yakınlaştırma

ZoomFactor özelliği salt okunurdur, ancak program aracılığıyla yakınlaştırmanıza olanak sağlayan yöntemler sağlanır. Bunun tipik bir kullanımı, kaydırma görüntüleyicisini yakınlaştırma miktarını denetleyen bir kaydırıcıya veya yakınlaştırma düzeyini sıfırlayan bir düğmeye bağlamaktır. (Yakınlaştırma kaydırıcısının bir örneğini görmek için bkz. WinUI 3 Galeri uygulamasında ScrollViewer.)

ScrollView denetimi için ZoomTo yöntemini çağırın ve yeni yakınlaştırma faktörünü ilk parametre olarak geçirin.

<Slider Header="Zoom" IsEnabled="True"
        Maximum="{x:Bind scrollControl.MaxZoomFactor, Mode=OneWay}"
        Minimum="{x:Bind scrollControl.MinZoomFactor, Mode=OneWay}"
        StepFrequency="0.1"
        ValueChanged="ZoomSlider_ValueChanged" />
<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

private void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (scrollControl != null)
    {
        scrollControl.ZoomTo(
            zoomFactor: (float)e.NewValue,
            centerPoint: null)
    }
}

ScrollView ayrıca, geçerli yakınlaştırma düzeyinden belirli bir deltayla yakınlaştırmanızı ve uzaklaştırmanızı sağlayan bir ZoomBy yöntemi de sağlar.

UWP ve WinUI 2

Uyarı

Denetim ScrollView yalnızca WinUI 3'te kullanılabilir. UWP ve WinUI 2 için denetimi kullanın ScrollViewer .

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Bu denetimin API'leri Windows.UI.Xaml.Controls ad alanında bulunur.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz. WinUI 2.2 veya üzeri, bu denetim için yuvarlatılmış köşeler kullanan yeni bir şablon içerir. Daha fazla bilgi için bkz . Köşe yarıçapı.

  • Last updated on