Aracılığıyla paylaş

Anlamsal yakınlaştırma

Anlamsal yakınlaştırma, kullanıcının büyük bir gruplandırılmış veri kümesinde hızla gezinebilmesi için aynı içeriğin iki farklı görünümü arasında geçiş yapmasını sağlar.

  • Yakınlaştırılmış görünüm, içeriğin ana görünümüdür. Bu, tek tek veri öğelerini gösterdiğiniz ana görünümdür.
  • Uzaklaştırılmış görünüm, aynı içeriğin daha üst düzey bir görünümüdür. Bu görünümde genellikle gruplandırılmış veri kümesinin grup üst bilgilerini gösterirsiniz.

Örneğin, bir adres defterini görüntülerken, kullanıcı hızla "W" harfine atlamak için uzaklaştırabilir ve onunla ilişkilendirilmiş adları görmek için bu harfi yakınlaştırabilir.

Özellikler:

  • Uzaklaştırılan görünümün boyutu, anlamsal yakınlaştırma denetiminin sınırlarıyla kısıtlanır.
  • Grup üst bilgisinde dokunulduğunda görünümler değiştirilir. Görünümler arasında geçiş yapmak için sıkıştırma etkinleştirilebilir.
  • Aktif başlıklar, görünümler arasında geçiş yapar.

Doğru kontrol bu mu?

Tümü bir veya iki sayfada gösterilemeyecek kadar büyük bir gruplandırılmış veri kümesi göstermeniz gerektiğinde SemanticZoom denetimi kullanın.

Anlamsal yakınlaştırmayı optik yakınlaştırma ile karıştırmayın. Hem aynı etkileşimi hem de temel davranışları paylaşırken (yakınlaştırma faktörüne göre daha fazla veya daha az ayrıntı görüntüler), optik yakınlaştırma, bir içerik alanı veya fotoğraf gibi bir nesne için büyütme ayarını ifade eder. Optik yakınlaştırma gerçekleştiren bir denetim hakkında bilgi için bkz. ScrollViewer denetimi.

Recommendations

  • Uygulamanızda anlamsal yakınlaştırma kullanırken, öğe düzeninin ve kaydırma yönünün yakınlaştırma düzeyine göre değişmediğinden emin olun. Düzenler ve kaydırma etkileşimleri, yakınlaştırma düzeylerinde tutarlı ve tahmin edilebilir olmalıdır.
  • Anlamsal yakınlaştırma, kullanıcının içeriğe hızla atlayabilmesini sağlar, bu nedenle sayfa/ekran sayısını uzaklaştırılan modda üç ile sınırlayın. Çok fazla kaydırma semantik yakınlaştırmanın pratikliğini azaltıyor.
  • İçeriğin kapsamını değiştirmek için anlamsal yakınlaştırma kullanmaktan kaçının. Örneğin, fotoğraf albümü File Explorer klasör görünümüne geçmemelidir.
  • Görünüm için gerekli olan bir yapı ve semantik kullanın.
  • Gruplandırılmış koleksiyondaki öğeler için grup adlarını kullanın.
  • Gruplandırılmamış ancak sıralanmış bir koleksiyon için tarihler için kronolojik veya ad listesi için alfabetik olarak sıralama düzeni kullanın.

Örnekler

Denetimler Galerisi'ndeki SemanticZoom bölümü, kullanıcıların denetim türlerinin gruplandırılmış bölümlerini hızla yakınlaştırmasını ve uzaklaştırmasını sağlayan bir gezinti deneyimi gösterir.

WinUI 3 Galerisi'nde kullanılan anlamsal yakınlaştırma örneği

Fotoğraflar uygulaması

Fotoğraflar uygulamasında kullanılan anlamsal yakınlaştırma aşağıdadır. Fotoğraflar aya göre gruplandırılır. Varsayılan kılavuz görünümünde ay üst bilgisinin seçilmesi, daha hızlı gezinme için ay listesi görünümüne doğru uzaklaştırılıyor.

Fotoğraflar uygulamasında kullanılan anlamsal yakınlaştırma

Anlamsal yakınlaştırma oluşturma

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

WinUI 3 Galeri simgesi 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.

SemanticZoom denetiminin kendi görsel gösterimi yoktur. Genellikle içeriğinizin görünümlerini sağlayan ListView veya GridView denetimleri arasındaki geçişi yöneten bir ana denetimdir. Görünüm denetimlerini SemanticZoom'un ZoomedInView ve ZoomedOutView özelliklerine ayarlarsınız.

Anlamsal yakınlaştırma için ihtiyacınız olan 3 öğe şunlardır:

  • Gruplandırılmış veri kaynağı. (Gruplar, yakınlaştırılmış görünümde GroupStyle tanımıyla tanımlanır.)
  • Öğe düzeyindeki verileri gösteren yakınlaştırılmış görünüm.
  • Grup düzeyinde verileri gösteren bir yakınlaştırma görünümü.

Anlamsal yakınlaştırmayı kullanmadan önce, gruplandırılmış verilerle liste görünümünün nasıl kullanılacağını anlamanız gerekir. Daha fazla bilgi için bkz. Liste görünümü ve ızgara görünümü.

Uyarı

SemanticZoom denetiminin yakınlaştırılmış görünümünü ve uzaklaştırılmış görünümünü tanımlamak için ISemanticZoomInformation arabirimini uygulayan iki denetimi kullanabilirsiniz. XAML çerçevesi bu arabirimi uygulayan 3 denetim sağlar: ListView, GridView ve Hub.

Bu XAML SemanticZoom denetiminin yapısını gösterir. ZoomedInView ve ZoomedOutView özelliklerine başka denetimler atarsınız.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Buradaki örnekler WinUI 3 Galerisi örneğinin SemanticZoom sayfasından alınmıştır. Veri kaynağı dahil olmak üzere kodun tamamını görmek için örneği indirebilirsiniz. Bu anlam temelli yakınlaştırma, yakınlaştırılmış görünüm için GridView ve uzaklaştırılmış görünüm için ListView kullanır.

Yakınlaştırılan görünümü tanımlama

İşte yakınlaştırılan görünümün GridView denetimi. Yakınlaştırılan görünümde tek tek veri öğeleri gruplar halinde görüntülenmelidir. Bu örnekte, kılavuzdaki öğelerin görüntü ve metinle nasıl görüntüleneceği gösterilmektedir.

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}"
              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

Grup başlıklarının görünümü ZoomedInGroupHeaderTemplate kaynağında tanımlanır. Öğelerin görünümü kaynakta ZoomedInTemplate tanımlanır.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}"
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}"
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}"
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Uzaklaştırılmış görünümü tanımlama

Bu XAML, yakınlaştırılmış görünüm için bir ListView denetimi tanımlar. Bu örnekte, grup üst bilgilerinin bir listede metin olarak nasıl görüntüleneceği gösterilmektedir.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

Görünüm, ZoomedOutTemplate kaynağında tanımlanmıştır.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}"
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

Görünümleri senkronize et

Yakınlaştırılmış görünüm ve uzaklaştırılmış görünüm eşitlenmelidir, bu nedenle bir kullanıcı yakınlaştırılmış görünümde bir grup seçerse, aynı grubun ayrıntıları yakınlaştırılmış görünümde gösterilir. Bir CollectionViewSource kullanabilir veya görünümleri eşitlemek için kod ekleyebilirsiniz.

Aynı CollectionViewSource'a bağladığınız tüm denetimler her zaman aynı geçerli öğeye sahiptir. Her iki görünüm de veri kaynaklarıyla aynı CollectionViewSource'ı kullanıyorsa, CollectionViewSource görünümleri otomatik olarak eşitler. Daha fazla bilgi için bkz. CollectionViewSource.

Görünümleri eşitlemek için CollectionViewSource kullanmıyorsanız, ViewChangeStarted olayını işlemeli ve burada gösterildiği gibi olay işleyicisindeki öğeleri eşitlemelisiniz.

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">

private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}
  • Last updated on