Görünümü çevir

Koleksiyondaki resimlere veya albümdeki fotoğraflar ya da ürün ayrıntıları sayfasındaki öğeler gibi diğer öğelere tek tek göz atmak için bir çevirme görünümü kullanın. Dokunmatik cihazlar için, bir öğeyi kaydırmak koleksiyon içinde gezinir. Mouse için gezinme düğmeleri, mouse'un üzerine gelindiği zaman görünür. Klavye için ok tuşları koleksiyonda gezinebilir.

Doğru kontrol bu mu?

Flip görünümü, küçük ve orta büyüklükteki koleksiyonlardaki (25 veya daha fazla öğe) görüntüleri incelemek için en iyisidir. Bu koleksiyonlara örnek olarak ürün ayrıntıları sayfasındaki öğeler veya fotoğraf albümündeki fotoğraflar verilebilir. Çoğu büyük koleksiyon için çevirme görünümü önermesek de, denetim bir fotoğraf albümünde tek tek görüntüleri görüntülemek için yaygın olarak kullanılır.

Recommendations

Çevirme görünümleri en çok 25 öğeden oluşan koleksiyonlar için en iyi sonucu sağlar.
Daha büyük koleksiyonlar için bir çevirme görünümü denetimi kullanmaktan kaçının, çünkü her öğeyi çevirmenin yinelenen hareketi yorucu olabilir. Genellikle yüzlerce veya binlerce resim içeren fotoğraf albümleri için bir istisna olabilir. Kılavuz görünümü düzeninde bir fotoğraf seçildikten sonra fotoğraf albümleri neredeyse her zaman bir çevirme görünümüne geçer. Diğer büyük koleksiyonlar için Liste görünümünü veya kılavuz görünümünü göz önünde bulundurun.

Genelleştirme ve yerelleştirme denetim listesi

Çift Yönlü Değerlendirmeler: RTL dilleri için standart yansıtmayı kullanın. Geri ve ileri denetimleri dilin yönüne bağlı olmalıdır, bu nedenle RTL dilleri için sağ düğme geri, sol düğme ise ileri doğru hareket etmelidir.

Örnekler

En soldaki öğeden başlayıp sağa doğru çevrilen yatay tarama, çevirme görünümü için tipik bir düzendir. Bu düzen, tüm cihazlarda dikey veya yatay yönlendirmede düzgün çalışır:

Yatay çevirme görünümü düzeni örneği

Çevirme görünümüne dikey olarak da göz atılabilir:

Dikey çevirme görünümü örneği

Çevirme görünümü oluşturun

Önemli API'ler: FlipView sınıfı, ItemsSource özelliği, ItemTemplate özelliği

WinUI 3 Galeri uygulamasını açın ve FlipView'un çalışır durumda olduğunu 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

FlipView bir ItemsControl olduğundan herhangi bir türde öğe koleksiyonu içerebilir. Görünümü doldurmak için Öğeler koleksiyonuna öğe ekleyin veya ItemsSource özelliğini bir veri kaynağı olarak ayarlayın.

Varsayılan olarak, bir veri öğesi, bağlı olduğu veri nesnesinin dize gösterimi olarak çevirme görünümünde görüntülenir. Çevirme görünümündeki öğelerin tam olarak nasıl görüntüleneceğini belirtmek için, tek bir öğeyi görüntülemek için kullanılan denetimlerin düzenini tanımlamak için bir DataTemplate oluşturursunuz. Düzendeki denetimler bir veri nesnesinin özelliklerine bağlanabilir veya içerik satır içinde tanımlanmış olabilir. DataTemplate'ı FlipView'un ItemTemplate özelliğine atarsınız.

Items koleksiyonuna öğe ekleme

XAML veya kod kullanarak Öğeler koleksiyonuna öğe ekleyebilirsiniz. Değişmeyen ve XAML'de kolayca tanımlanan az sayıda öğeniz varsa veya öğeleri çalışma zamanında kodda oluşturuyorsanız, öğeleri genellikle bu şekilde eklersiniz. Burada satır içinde tanımlanmış öğeler içeren bir çevirme görünümü yer alır.

<FlipView x:Name="flipView1">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

Bir çevirme görünümüne öğe eklediğinizde, bunlar otomatik olarak FlipViewItem kapsayıcısına yerleştirilir. Öğenin görüntülenme biçimini değiştirmek için ItemContainerStyle özelliğini ayarlayarak öğe kapsayıcısına stil uygulayabilirsiniz.

Öğeleri XAML'de tanımladığınızda, öğeler otomatik olarak Items koleksiyonuna eklenir.

Öğe kaynağını ayarlama

Genellikle veritabanı veya İnternet gibi bir kaynaktan verileri görüntülemek için çevirme görünümü kullanırsınız. Bir veri kaynağından çevirme görünümünü doldurmak için ItemsSource özelliğini bir veri öğeleri koleksiyonu olarak ayarlarsınız.

Burada, flip görünümünün ItemsSource'ı doğrudan kodda bir koleksiyon örneğine ayarlanır.

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

ItemsSource özelliğini XAML'deki bir koleksiyona da bağlayabilirsiniz. Daha fazla bilgi için bkz. XAML ile veri bağlama.

Burada ItemsSource adlı bir bağlıdır.

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

...

<FlipView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

Dikkat

Bir çevirme görünümünü Items koleksiyonuna öğe ekleyerek veya ItemsSource özelliğini ayarlayarak doldurabilirsiniz, ancak aynı anda iki yolu da kullanamazsınız. ItemsSource özelliğini ayarlayıp XAML'de bir öğe eklerseniz, eklenen öğe yoksayılır. ItemsSource özelliğini ayarlar ve koddaki Items koleksiyonuna bir öğe eklerseniz, bir hata oluşur.

Öğelerin görünümünü belirtme

Varsayılan olarak, bir veri öğesi, bağlı olduğu veri nesnesinin dize gösterimi olarak çevirme görünümünde görüntülenir. Genellikle verilerinizin daha zengin bir sunumunun gösterilmesini istersiniz. Çevirme görünümündeki öğelerin tam olarak nasıl görüntüleneceğini belirtmek için bir DataTemplate oluşturursunuz. DataTemplate içindeki XAML, tek bir öğeyi görüntülemek için kullanılan denetimlerin düzenini ve görünümünü tanımlar. Düzendeki denetimler bir veri nesnesinin özelliklerine bağlanabilir veya içerik satır içinde tanımlanmış olabilir. DataTemplate, FlipView denetiminin ItemTemplate özelliğine atanır.

Bu örnekte, FlipView'un ItemTemplate değeri satır içinde tanımlanmıştır. Görüntü adını görüntülemek için resme bir katman eklenir.

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Veri şablonu tarafından tanımlanan düzen şöyle görünür.

Veri şablonu içeren çevirme görünümü örneği

Çevirme görünümünün yönünü ayarla

Varsayılan olarak, sayfa çevirme yatay olarak gerçekleştirilir. Dikey olarak çevrilmesi için, çevirme görünümünün ItemsPanel'i olarak dikey yönlendirmeli bir yığın paneli kullanın.

Bu örnekte, FlipView'un ItemsPanel'i olarak dikey yönlendirmeli bir yığın panelinin nasıl kullanılacağı gösterilmektedir.

<FlipView x:Name="flipViewVertical" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
    
    <!-- Use a vertical stack panel for vertical flipping. -->
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Width="480" Height="270" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" 
                               FontFamily="Segoe UI" FontSize="26.667" 
                               Foreground="#CCFFFFFF" Padding="15,20"/>
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Dikey yönlendirmeli çevirme görünümü şöyle görünür.

Dikey yönde çevirme görünümü örneği.

Bağlam göstergesi ekleme

Kullanıcılara içerik içinde bir başvuru noktası sağlamaya yardımcı olmak için çevirme görünümüyle bağlam göstergesi ( PipsPager veya film şeridi gibi) kullanın.

Aşağıdaki resimde küçük bir fotoğraf galerisiyle kullanılan bir PipsPager gösterilmektedir (PipsPager'ı galerinin altında ortalamanızı tavsiye ederiz).

FlipView fotoğraf albümünün altında beş yatay nokta bulunan bir PipsPager. Üçüncü nokta seçilir ve bu da içeriğin üçüncü sayfasını gösterir.

Bu kod parçacığı, Bir PipsPager'ın FlipView ile nasıl bağlanacağını gösterir.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

Daha büyük koleksiyonlar (10 veya daha fazla öğe) için küçük resim film şeridi gibi bağlamsal bir gösterge kullanmanızı kesinlikle öneririz. Basit noktalar veya glifler kullanan bir PipsPager'in aksine, film şeridindeki her küçük resim ilgili görüntünün daha küçük, seçilebilir bir sürümünü gösterir.

FlipView fotoğraf albümünün altındaki küçük resimlerden oluşan film şeridi.

FlipView'a bağlam göstergesi eklemeyi gösteren tam bir örnek için bkz. XAML FlipView örneği.

UWP ve WinUI 2

Ö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.

UWP API'leri:FlipView sınıfı, ItemsSource özelliği, ItemTemplate özelliği
WinUI 2 Galeri uygulamasını açın ve FlipView'un nasıl çalıştığını görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 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.

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ı.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-25