Açıklamalı kaydırma çubuğu denetimi

Açıklamalı kaydırma çubuğu, kullanıcıların büyük bir öğe koleksiyonunda kolayca gezinmesine yardımcı olur. Varsayılan kaydırma çubuğunun yerini alır ve kaydırılabilir herhangi bir kapsayıcıyla birlikte kullanılabilir. Bu dikey kaydırma çubuğu, kullanıcıların koleksiyondaki öğeler arasında yukarı ve aşağı kaydırma yapmasına olanak tanır. Kullanıcılar, koleksiyonlarının neresinde olduklarına ilişkin görsel bir başvuru sağlamak için kaydırma çubuğu alanı boyunca kategori etiketlerini görebilir. Kaydırma göstergesi (vurgulu renkteki çizgi), kullanıcının koleksiyondaki geçerli konumunu gösterir. Bir kullanıcı kaydırma çubuğu alanının üzerine geldiğinde bir araç ipucu gösterilir. Bu araç ipucu, kullanıcıya koleksiyondaki geçerli konumu hakkında daha fazla bilgi veren bir etiket içerir. Kaydırma okları, kaydırma çubuğu alanının en üstünde ve altında bulunur. Geçerli konumu küçük bir artışla hareket ettirmek için kullanılabilirler.

Fotoğraflar uygulamasında açıklamalı kaydırma çubuğunu gösteren ekran görüntüsü.

Ek açıklamalı kaydırma çubuğu, bir fotoğraf galerisi deneyimini yeniden oluşturmak için ItemsView denetimiyle birlikte kullanılabilir. Kullanıcıların fotoğraf koleksiyonları içinde belirli bir konuma gitmelerine yardımcı olmak için kategori etiketleri farklı yıllara ayarlanabilir.

Etkileşimler

Üzerine gelindiğinde, bu konumun önizlemesini gösteren bir araç ipucu gösterilir. Kullanıcılar daha sonra bu konuma gitmek için tıklayabilir. Kullanıcılar ayrıca, koleksiyonları içinde yeni bir konuma gitmek için kaydırma çubuğu alanında herhangi bir yere tıklayıp sürükleyebilir. Sürüklendikçe, kaydırma göstergesi fare imlecine bağlı kalır ve içerik yeni konumu yansıtacak şekilde kaydırılır. Kullanıcılar ayrıca fare tekerleğini kullanarak koleksiyonlarında gezinebilir. Fare tekerleğinde yukarı veya aşağı kaydırma, koleksiyondaki konumlarını ve karşılık gelen kaydırma göstergesini sabit bir miktar yukarı veya aşağı taşır.

Uyarı

ScrollBar denetiminden farklı olarak başparmak öğesine tıklayıp sürükleyemezsiniz. Başparmak, yalnızca geçerli görünüm penceresi konumunu görselleştirmeye yönelik etkileşimli olmayan bir öğedir. Başparmak, görünüm penceresi yüksekliğini temsil eden sabit bir yüksekliğe sahiptir.

Etiket davranışı

Dokunmatik giriş için en iyi duruma getirilmiş deneyimler için kullanıcılar araç ipucuna bakmak için kaydırma çubuğu alanına dokunup basılı tutabilir. Dokunmatik kullanıcıların daha kolay okuyabilmesi için araç ipucu biraz daha yükseltilecek. Kaydırma çubuğu alanında herhangi bir yere dokunup sürüklemek, fareyle tıklayıp sürüklemeye benzer şekilde çalışır.
Araç ipucu etiketi hiçbir zaman kesilmez çünkü amacı açıklayıcı metinleri görüntülemektir. Bunun yerine, araç ipucunun maksimum 360 piksel genişliğini aşarsa, metin kaydırılır.
Metin kaydırma çubuğunun alanının genişliğinden uzunsa kategori etiketleri kırpılır.
İki kategori etiketi arasında bir çakışma olduğunda (örneğin, pencere boyutu azaldığında ve iki etiket birbiriyle çakıştığında), üstteki etiket kaldırılır. Bu kuralın bir istisnası olarak, koleksiyonun ilk etiketi her zaman tutulur, bunun için koleksiyon aralığının kullanıcılara gösterilmesine yardımcı olur. Kategori etiketlerinin arasında her zaman en az 4 piksel (2 piksel yukarıda, 2 piksel aşağıda) olmalıdır, aksi takdirde etiket çakışması tetiklenmiş olur.

Doğru kontrol bu mu?

Büyük bir öğe koleksiyonuyla ilgilenirken veya büyük miktarda kaydırma beklendiğinde varsayılan kaydırma çubuğu yerine ek açıklamalı kaydırma çubuğu kullanmanızı öneririz. Açıklamalı kaydırma çubuğu, kullanıcıların koleksiyonlarında kendilerini bulmaları ve geçiş yapmaları için kolay bir yol sağlar.

Yalnızca birkaç öğe içeren veya yalnızca az miktarda kaydırma gerektiren koleksiyonlar için varsayılan kaydırma çubuğunu kullanmanızı öneririz.

Recommendations

Yalnızca kullanıcılara yararlı bilgiler sağlayan bir kategori etiketi ekleyin
Kategori etiketleri ve araç ipucu için kullanılan dizeleri olabildiğince kısa tutun
Açıklamalı kaydırma çubuğu en iyi şekilde yeterli dikey alan olduğunda kullanılır. Sınırlı bir dikey alanda açıklamalı kaydırma çubuğu kullanılması, görünür etiketlerin sayısını azaltacaktır.
Açıklamalı kaydırma çubuğunu, kullanıcıların kendilerini bir koleksiyon içinde bulmalarının tek yolu olarak kullanmayın. Açıklamalı kaydırma çubuğunu tamamlamak için koleksiyonunuz genelinde yapışkan üst bilgiler veya kategori etiketleri kullanmanızı öneririz.

Açıklamalı kaydırma çubuğu oluşturma

Önemli API'ler:AnnotatedScrollBar sınıfı, ScrollView sınıfı, IScrollController arabirimi

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

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

AnnotatedScrollBar kullanmak için birkaç adımı tamamlamanız gerekir:

AnnotatedScrollBar'ı kayan bir kapsayıcıya bağlayın.
Kaydırma çubuğuna etiketler ekleyin.
Ayrıntı etiketleri (araç ipuçları) ekleyin.

AnnotatedScrollBar'ı kaydırma kapsayıcısına bağlama

AnnotatedScrollBar kullanmak için IScrollController arabirimi aracılığıyla kaydırılabilir bir kapsayıcıya bağlarsınız. AnnotatedScrollBar, ScrollController özelliği aracılığıyla bir IScrollController uygulaması sağlarken, ScrollView bunu ScrollPresenter özelliği (özellikle ScrollPresenter.VerticalScrollController) aracılığıyla tüketir.

Uyarı

ScrollView denetimi, IScrollController arabirimini kullanma desteğine sahiptir. ScrollViewer gibi diğer kaydırma kapsayıcıları için IScrollController için bir bağdaştırıcı yazmanız gerekir. Bu makalenin devamında yer alan bir örne bakın.

Burada, bir ItemsView'un VerticalScrollController özelliği, AnnotatedScrollBar'ın ScrollController öğesine bağlıdır. (ItemsView.VerticalScrollPresenter özelliği, ItemsView'un iç ScrollView değerinin ScrollPresenter.VerticalScrollController değerine geçirilir.)

<Grid ColumnDefinitions="*,Auto">
    <ItemsView VerticalScrollController="{x:Bind annotatedScrollBar.ScrollController}"/>
    <AnnotatedScrollBar x:Name="annotatedScrollBar" Grid.Column="1"/>
</Grid>

Burada gösterildiği gibi bunları kodla da bağlayabilirsiniz. Bu örnekte, bir ItemsRepeater'ı sarmak ve kaydırma işlevselliği sağlamak için bir ScrollView kullanılır. AnnotatedScrollBar, ScrollView'un varsayılan kaydırma çubuğunun yerini alır.

<Grid ColumnDefinitions="*, Auto">
    <ScrollView x:Name="scrollView"
                Background="LightGray" 
                MaxWidth="800" MaxHeight="500"
                VerticalScrollBarVisibility="Hidden">
        <ItemsRepeater x:Name="itemsRepeater"
                ItemsSource="{x:Bind ColorCollection}"
                Margin="2"
                SizeChanged="ItemsRepeater_SizeChanged">
            <ItemsRepeater.Layout>
                <UniformGridLayout/>
            </ItemsRepeater.Layout>
            <ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="media:SolidColorBrush">
                    <Grid Background="{x:Bind}" Width="112" Height="82" 
                          CornerRadius="4" Margin="4"/>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>
    </ScrollView>
                
    <AnnotatedScrollBar x:Name="annotatedScrollBar" Grid.Column="1"
        Margin="4,0,48,0" MaxHeight="500" HorizontalAlignment="Right"
        DetailLabelRequested="AnnotatedScrollBar_DetailLabelRequested"/>
</Grid>

private void AnnotatedScrollBarPage_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    scrollView.ScrollPresenter.VerticalScrollController = annotatedScrollBar.ScrollController;
}

Etiketler

AnnotatedScrollBar iki etiket türünü görüntüleyebilir ve her ikisi de isteğe bağlıdır.

Kategori etiketleri

Etiketler koleksiyonunu doldurarak etiketler eklersiniz. Her Etiket , AnnotatedScrollBarLabel sınıfıyla temsil edilir ve iki bilgi parçası gerektirir:

İçerik: Kaydırma çubuğunda görüntülenen içerik.
ScrollOffset: Etiket içeriğinin görüntülendiği uzaklık değeri.

Etiketler (belirtilirse), diğer etiketlerle çarpışmadığı ve rayın sınırlarını aşmadığı sürece kaydırma çubuğunda her zaman görünür. (Daha fazla bilgi için bkz . Etiket davranışı .)

Etiket kaydırma değerinin hesaplanması, uygulamanızın ayrıntılarına ve verilerine bağlıdır. Offset'in nasıl hesaplanabileceğine dair bir örnek için, GitHub üzerindeki WinUI 3 Galerisi örneğine göz atabilirsiniz.

Ayrıntı etiketleri

Ayrıntı etiketi, imleç kaydırma çubuğunun üzerindeyken gösterilen bir araç ipucu öğesidir. Ayrıntı etiketi oluşturmak için DetailLabelRequested olayını işlersiniz. Olay argümanları, araç ipucu etiketinin gösterileceği ScrollOffset'i sağlar. Bu konum için gösterilecek doğru etiketi belirlemek ve etiketi olay bağımsız değişkenlerinin Content özelliği olarak ayarlamak için bu değeri kullanın.

Kaydırma

Kullanıcı, kaydırma çubuğunun üst ve alt kısmındaki ok düğmelerine tıklayarak AnnotatedScrollBar'ı kaydırabilir. SmallChange özelliğini, ok düğmelerinin içeriği kaydırdığı miktarı belirtecek şekilde ayarlayabilirsiniz.

Kaydırma olayını işleyerek kaydırmanın nasıl gerçekleştirildiğini belirleyebilir, kaydırma sırasında bir eylem gerçekleştirebilir veya Kaydırma eylemini iptal edebilirsiniz.

Örnek kodunu alma

WinUI 3 Galerisi örneği - Tüm XAML denetimlerini etkileşimli biçimde görün.

ScrollView sınıfı

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-05