Veri bağlamaları oluşturma

Yer tutucu görüntüler ve ortak metin içeren bir kullanıcı arabirimi tasarladıysanız, bu öğreticide veri bağlamalarını kullanarak gerçek verilere nasıl bağlanabileceğiniz gösterilir. Verileri biçimlendirmeyi, kullanıcı arabiriminizi ve verilerinizi eşitlenmiş durumda tutmayı ve kod bakımını iyileştirmeyi öğrenin.

Bu öğreticide, şablon kodunuzu veri bağlamalarıyla değiştirmeyi ve verileriniz ile kullanıcı arabiriminiz arasında başka doğrudan bağlantılar oluşturmayı öğreneceksiniz. Ayrıca verilerinizi görüntüleme için biçimlendirmeyi veya dönüştürmeyi ve kullanıcı arabiriminizle verilerinizi eşitlenmiş durumda tutmayı da öğrenirsiniz. Bu öğreticiyi tamamladığınızda, XAML ve C# kodunun basitliğini ve düzenlemesini geliştirerek bakımını ve kapsamını genişletmeyi kolaylaştırabilirsiniz.

PhotoLab örneğinin basitleştirilmiş bir sürümüyle başlarsınız. Bu başlangıç sürümü, tam veri katmanının yanı sıra temel XAML sayfa düzenlerini içerir ve kodun daha kolay göz atılması için birçok özelliği hariç tutar. Bu Öğretici tam uygulamayı kapsamıyor, bu nedenle özel animasyonlar ve uyarlamalı düzenler gibi özellikleri görmek için son sürümü kontrol edin. Son sürümü Windows-appsample-photo-lab deposunun kök klasöründe bulabilirsiniz.

PhotoLab örnek uygulamasının iki sayfası vardır. Ana sayfada, her resim dosyasıyla ilgili bazı bilgilerin yanı sıra bir fotoğraf galerisi görünümü görüntülenir.

Ayrıntılar sayfasında, siz seçtikten sonra tek bir fotoğraf görüntülenir. Açılır menü, fotoğrafı değiştirmenizi, yeniden adlandırmanızı ve kaydetmenizi sağlar.

Önkoşullar

• Visual Studio 2019 veya üzeri: Visual Studio'yu indirin (Community sürümü ücretsizdir.)
• Windows SDK (10.0.17763.0 veya üzeri): En son Windows SDK'sını indirin (ücretsiz)
• Windows 10, Sürüm 1809 veya üzeri

Bölüm 0: GitHub'dan başlangıç kodunu alma

Bu öğretici için PhotoLab örneğinin basitleştirilmiş bir sürümüyle başlarsınız.

1. Örneğin GitHub sayfasına gidin: https://github.com/Microsoft/Windows-appsample-photo-lab.

2. Ardından, örneği kopyalamanız veya indirmeniz gerekir. Kopyala veya indir düğmesini seçin. Bir alt menü görüntülenir.

   GitHub hakkında bilginiz yoksa:

   a. ZIP İndir'i seçin ve dosyayı yerel olarak kaydedin. Bu eylem, ihtiyacınız olan tüm proje dosyalarını içeren bir .zip dosyası indirir.

   b. Dosyayı ayıklayın. Dosya Gezgini'ni kullanarak yeni indirdiğiniz .zip dosyasına göz atın, dosyaya sağ tıklayın ve Tümünü Ayıkla... öğesini seçin.

   ç. Örneğin yerel kopyasına göz atın ve Windows-appsample-photo-lab-master\xaml-basics-starting-points\data-binding dizinine gidin.

   GitHub hakkında bilginiz varsa:

   a. Depo ana dalını yerel olarak klonlayın.

   b. Windows-appsample-photo-lab\xaml-basics-starting-points\data-binding dizinine gidin.

3. Photolab.sln'a çift tıklayarak çözümü Visual Studio'da açın.

1. Bölüm: Yer tutucuları değiştirme işlemi

Bu bölümde, yer tutucu içerik yerine gerçek görüntüleri ve görüntü meta verilerini görüntülemek için veri şablonu XAML'sinde tek seferlik bağlamalar oluşturacaksınız.

Tek seferlik bağlamalar salt okunur ve değişmeyen veriler içindir. Bunlar yüksek performanslıdır ve onları oluşturması kolaydır, böylece GridView ve ListView denetimlerinde büyük veri kümelerini görüntüleyebilirsiniz.

Yer tutucuları tek seferlik bağlamalarla değiştirin

1. xaml-basics-starting-points\data-binding Klasörü açın ve dosyayı Visual Studio'da başlatınPhotoLab.sln.

2. Çözüm Platformunuzun Arm değil x86 veya x64 olarak ayarlandığından emin olun ve uygulamayı çalıştırın. Bu adım, bağlamalar eklenmeden önce ui yer tutucularıyla uygulamanın durumunu gösterir.

   

3. MainPage.xaml dosyasını açın ve adlandırılmış bir DataTemplateImageGridView_DefaultItemTemplate arayın. Bu şablonu veri bağlamalarını kullanacak şekilde güncelleştireceksiniz.

   Öncesi:

   <DataTemplate x:Key="ImageGridView_DefaultItemTemplate">
   

   x:Key değeri, veri nesnelerini görüntülemek üzere bu şablonu seçmek için kullanılırImageGridView.

4. Şablona bir x:DataType değer ekleyin.

   Sonrası:

   <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                 x:DataType="local:ImageFileInfo">
   

   x:DataType bu şablonun hangi tür için olduğunu gösterir. Bu durumda, ImageFileInfo sınıfı için bir şablondur (burada local:, dosyanın üst kısmındaki xmlns bildiriminde tanımlandığı gibi yerel ad alanını belirtir).

   Bir veri şablonunda x:Bind ifadeleri kullanırken x:DataType'a ihtiyacınız vardır, daha sonra açıklandığı gibi.

5. DataTemplateiçinde, Image adlı ItemImage öğesini bulun ve gösterildiği gibi Source değerini değiştirin.

   Öncesi:

   <Image x:Name="ItemImage"
          Source="/Assets/StoreLogo.png"
          Stretch="Uniform" />
   

   Sonrası:

   <Image x:Name="ItemImage"
          Source="{x:Bind ImageSource}"
          Stretch="Uniform" />
   

   x:Name bir XAML öğesi tanımlar, böylece XAML'nin başka bir yerinde ve arka planda buna başvurabilirsiniz.

   x:Bind ifadeleri, değeri bir data-object özelliğinden alarak ui özelliğine bir değer sağlar. Şablonlarda, belirtilen özellik, ayarı ne olursa olsun x:DataType özelliğinin bir özelliğidir. Bu durumda veri kaynağı özelliğidir ImageFileInfo.ImageSource .

   Uyarı

   x:Bind Bu değer, düzenleyicinin veri türünü bilmesini de sağlar, böylece bir x:Bind ifadede özellik adını yazmak yerine IntelliSense'i kullanabilirsiniz. Yeni yapıştırdığınız kodu deneyin: İmleci hemen arkasına x:Bind yerleştirin ve ara çubuğuna basarak bağlanabileceğiniz özelliklerin listesini görüntüleyin.

6. Diğer kullanıcı arabirimi denetimlerinin değerlerini aynı şekilde değiştirin. (Bunu kopyalama/yapıştırma yerine IntelliSense ile yapmayı deneyin!)

   Öncesi:

   <TextBlock Text="Placeholder" ... />
   <StackPanel ... >
       <TextBlock Text="PNG file" ... />
       <TextBlock Text="50 x 50" ... />
   </StackPanel>
   <muxc:RatingControl Value="3" ... />
   

   Sonrası:

   <TextBlock Text="{x:Bind ImageTitle}" ... />
   <StackPanel ... >
       <TextBlock Text="{x:Bind ImageFileType}" ... />
       <TextBlock Text="{x:Bind ImageDimensions}" ... />
   </StackPanel>
   <muxc:RatingControl Value="{x:Bind ImageRating}" ... />
   

Şu ana kadar nasıl göründüğünü görmek için uygulamayı çalıştırın. Artık yer tutucu yok! İyi bir başlangıç yapıyorsun.

Uyarı

Daha fazla deneme yapmak istiyorsanız, veri şablonuna yeni bir TextBlock ekleyerek deneyin ve görüntülenecek bir özelliği bulmak için x:Bind IntelliSense özelliğini kullanın.

Bölüm 2: Galeri kullanıcı arabirimini görüntülere bağlamak için bağlamayı kullanın

Bu bölümde, galeri görünümünü görüntü koleksiyonuna bağlamak için sayfa XAML'de tek seferlik bağlamalar oluşturacaksınız. Bu bağlayıcılar, arka plan kodunda mevcut olan yordam kodunun yerini alır. Koleksiyondan görüntü kaldırdığınızda galeri görünümünün nasıl değiştiğini görmek için bir Sil düğmesi de oluşturursunuz. Aynı zamanda, geleneksel olay işleyicilerinden daha fazla esneklik için olayları olay işleyicilerine bağlamayı öğrenirsiniz.

Şimdiye kadar ele alınan tüm bağlamalar veri şablonlarının içindedir ve değeriyle belirtilen sınıfın özelliklerine başvurur x:DataType . Sayfanızdaki XAML'nin geri kalanı ne olacak?

x:Bind veri şablonları dışındaki ifadeler her zaman sayfanın kendisine bağlanır. Bu, arka planda kod olarak eklediğiniz veya XAML'de bildirdiğiniz her şeye, sayfadaki diğer kullanıcı arayüzü kontrollerinin özel özellikleri ve özellikleri (x:Name bir değere sahip oldukları sürece) dahil olmak üzere başvurabileceğiniz anlamına gelir.

PhotoLab örneğinde, ana GridView denetimini arka plandaki kod yerine doğrudan görüntü koleksiyonuna bağlamak için bu tür bir bağlama kullanırsınız. Daha sonra diğer örnekleri görürsünüz.

Ana GridView denetimini Images koleksiyonuna bağlama

1. MainPage.xaml.cs dosyasında, GetItemsAsync yöntemini bulun ve ItemsSource ayarlayan kodu kaldırın.

   Öncesi:

   ImageGridView.ItemsSource = Images;
   

   Sonrası:

   // Replaced with XAML binding:
   // ImageGridView.ItemsSource = Images;
   

2. MainPage.xaml dosyasında, GridView isimli ImageGridView bulun ve bir ItemsSource özniteliği ekleyin. Değer için, kod arkasında uygulanmış x:Bind özelliğine başvuran bir Images ifadesi kullanın.

   Öncesi:

   <GridView x:Name="ImageGridView"
   

   Sonrası:

   <GridView x:Name="ImageGridView"
             ItemsSource="{x:Bind Images}"
   

   Images özelliği ObservableCollection<ImageFileInfo> türündedir, bu nedenle içinde GridView görüntülenen tek tek öğeler ImageFileInfo türündedir. Bu tür, Bölüm 1'de açıklanan değerle eşleşir x:DataType .

Daha önce gördüğünüz tüm bağlamalar, düz x:Bind ifadeler için varsayılan davranış olan tek seferlik, salt okunur bağlamalardır. Veriler yalnızca başlatma sırasında yüklenir ve bu da büyük veri kümelerinin birden çok karmaşık görünümünü desteklemek için mükemmel olan yüksek performanslı bağlamalar sağlar.

Az önce eklediğiniz ItemsSource bağlaması bile değişmeyen bir özellik değerine tek seferlik, salt okunur bir bağlamadır, ancak burada yapılması gereken önemli bir ayrım vardır. Images özelliğinin değişmeyen değeri, burada gösterildiği gibi yalnızca bir kez başlatılan bir koleksiyonun tek, belirli bir örneğidir.

private ObservableCollection<ImageFileInfo> Images { get; }
    = new ObservableCollection<ImageFileInfo>();

Images Özellik değeri hiçbir zaman değişmez, ancak özelliği türünde ObservableCollection<T>olduğundan koleksiyonun içeriği değişebilir ve bağlama değişiklikleri otomatik olarak fark eder ve kullanıcı arabirimini güncelleştirir.

Bu davranışı test etmek için, seçili durumdaki görüntüyü silecek bir düğmeyi geçici olarak ekleyin. Bu düğme son sürümde değildir çünkü bir resim seçildiğinde bir ayrıntı sayfası açılır. Ancak XAML, sayfa oluşturucusunda InitializeComponent yöntemi çağrısı aracılığıyla başlatıldığından, ancak Images koleksiyonu daha sonraki GetItemsAsync yönteminde doldurulduğundan, ObservableCollection<T> davranışı son PhotoLab örneğinde hala önemlidir.

Sil düğmesi ekleme

1. MainPage.xaml dosyasında CommandBar adlı adı bulun ve yakınlaştırma düğmesinden önce yeni bir düğme ekleyin. (Yakınlaştırma denetimleri henüz çalışmıyor. Bunları öğreticinin sonraki bölümünde bağlayacaksınız.)

   <AppBarButton Icon="Delete"
                 Label="Delete selected image"
                 Click="{x:Bind DeleteSelectedImage}" />
   

   XAML'yi zaten biliyorsanız, bu Click değer olağan dışı görünebilir. XAML'nin önceki sürümlerinde bunu, genellikle olay göndereni ve olaya özgü bağımsız değişkenler nesnesi için parametreler de dahil olmak üzere belirli bir olay işleyicisi imzasına sahip bir yönteme ayarlamanız gerekiyordu. Olay bağımsız değişkenlerine ihtiyacınız olduğunda bu tekniği kullanmaya devam edebilirsiniz, ancak ile x:Binddiğer yöntemlere de bağlanabilirsiniz. Örneğin, olay verilerine ihtiyacınız yoksa, burada yaptığımız gibi parametresiz yöntemlere bağlanabilirsiniz.

2. MainPage.xaml.cs dosyasına DeleteSelectedImage yöntemini ekleyin.

   private void DeleteSelectedImage() =>
       Images.Remove(ImageGridView.SelectedItem as ImageFileInfo);
   

   Bu yöntem yalnızca seçili görüntüyü koleksiyondan Images siler.

Şimdi uygulamayı çalıştırın ve birkaç görüntüyü silmek için düğmesini kullanın. Gördüğünüz gibi kullanıcı arabirimi, veri bağlama ve ObservableCollection<T> türü sayesinde otomatik olarak güncelleştirilir.

Uyarı

Bu kod, yalnızca çalışan uygulamadaki ImageFileInfo koleksiyonundan Images örneğini siler. Görüntü dosyasını bilgisayardan silmez.

Bölüm 3: Yakınlaştırma kaydırıcısını ayarlama

Bu bölümde, veri şablonundaki bir denetimden şablonun dışındaki yakınlaştırma kaydırıcısına tek yönlü bağlamalar oluşturacaksınız. Ayrıca, TextBlock.Text ve Image.Source gibi en belirgin özellikler dışında birçok denetim özelliğiyle de veri bağlamayı kullanabileceğinizi öğreneceksiniz.

Görüntü veri şablonunu yakınlaştırma kaydırıcısına bağlama

• DataTemplate adlı ImageGridView_DefaultItemTemplate öğesini bulun ve şablonun üst kısmındaki **Height** denetiminin Width ve Grid değerlerini değiştirin.

  Önce

  <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                x:DataType="local:ImageFileInfo">
      <Grid Height="200"
            Width="200"
            Margin="{StaticResource LargeItemMargin}">
  

  Sonra

  <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                x:DataType="local:ImageFileInfo">
      <Grid Height="{Binding Value, ElementName=ZoomSlider}"
            Width="{Binding Value, ElementName=ZoomSlider}"
            Margin="{StaticResource LargeItemMargin}">
  

Bunların Binding ifade ve x:Bind ifade olmadığını fark ettiniz mi? Bu, veri bağlamaları yapmanın eski yoludur ve çoğunlukla eskidir. x:Bind neredeyse her Binding şeyi yapar ve daha fazlasını yapar. Ancak, x:Bind bir veri şablonunda kullandığınızda, x:DataType değerinde bildirilen türe bağlanır. Peki şablondaki bir şeyi XAML sayfasındaki veya arka planda koddaki bir şeye nasıl bağlarsınız? Eski stil Binding bir ifade kullanmanız gerekir.

Binding ifadeler değeri tanımaz x:DataType , ancak bu Binding ifadeler neredeyse aynı şekilde çalışan değerlere sahiptir ElementName . Bunlar bağlama altyapısına bağlama Bağlama Değeri sayfadaki belirtilen öğenin Value özelliğine (yani bu x:Name değerine sahip öğeye) yönelik bir bağlama olduğunu bildirir. Kod arka planında bir özelliğe bağlanmak istiyorsanız, {Binding MyCodeBehindProperty, ElementName=page} XAML'deki page öğesinde ayarlanan x:Name değerine başvurduğunda, bu durum Page gibi görünebilir.

Uyarı

Varsayılan olarak, ifadeleritekyoldur. Bu, ilişkili özellik değeri değiştiğinde kullanıcı arabirimini otomatik olarak güncelleştirecekleri anlamına gelir.

Buna karşılık, için varsayılan değerbirzamandır. Bu, ilişkili özellikteki tüm değişikliklerin yoksayıldığı anlamına gelir. Bu varsayılan seçenektir çünkü en yüksek performanslı seçenektir ve bağlamaların çoğu statik, salt okunur verilere yöneliktir.

Buradaki ders, değerlerini değiştirebilecek özelliklerle x:Bind kullanıyorsanız Mode=OneWay veya Mode=TwoWay eklemeye dikkat etmeyi unutmayın. Sonraki bölümde bunun örneklerini göreceksiniz.

Uygulamayı çalıştırın ve kaydırıcıyı kullanarak görüntü şablonu boyutlarını değiştirin. Gördüğünüz gibi etki, çok fazla koda gerek kalmadan oldukça güçlüdür.

Uyarı

Kendinize bir meydan okuma yaratmak için başka arayüz özelliklerini yakınlaştırma kaydırıcısı Value özelliğine ya da yakınlaştırma kaydırıcısından sonra eklediğiniz diğer kaydırıcılara bağlamayı deneyin. Örneğin, FontSize özelliğini varsayılan değeri TitleTextBlockolan 'e ait yeni bir kaydırıcıya bağlayabilirsiniz. Makul minimum ve maksimum değerleri ayarladığınızdan emin olun.

Bölüm 4: Yakınlaştırma deneyimini geliştirme

Bu bölümde arka plan koduna özel ItemSize bir özellik ekleyecek ve görüntü şablonundan yeni özelliğe tek yönlü bağlamalar oluşturacaksınız. ItemSize değeri, yakınlaştırma kaydırıcısı, Ekrana sığdır anahtarı ve pencere boyutu gibi diğer faktörler tarafından güncellenir, bu da daha hassas bir deneyim sunar.

Yerleşik denetim özelliklerinden farklı olarak, özel özellikleriniz tek yönlü ve iki yönlü bağlamalarla bile kullanıcı arabirimini otomatik olarak güncelleştirmez. Tekzaman bağlamalarıyla sorunsuz çalışırlar, ancak özellik değişikliklerinizin kullanıcı arabiriminizde gösterilmesini istiyorsanız, bazı çalışmalar yapmanız gerekir.

Kullanıcı arabirimini güncelleştirebilmesi için ItemSize özelliğini oluşturma

1. MainPage.xaml.cs'da, MainPage sınıfının imzasını INotifyPropertyChanged arabirimini uygulayacak şekilde değiştirin.

   Öncesi:

   public sealed partial class MainPage : Page
   

   Sonrası:

   public sealed partial class MainPage : Page, INotifyPropertyChanged
   

   Bu, bağlama sistemine MainPage'ın (daha sonra eklenecek) bir PropertyChanged olayına sahip olduğunu ve bu sayede bağlamaların kullanıcı arabirimini güncelleyebileceğini bildirir.

2. PropertyChanged sınıfına bir MainPage olayı ekleyin.

   public event PropertyChangedEventHandler PropertyChanged;
   

   Bu olay, INotifyPropertyChanged arabiriminin gerektirdiği tam uygulamayı yapar. Ancak, herhangi bir etkiye sahip olması için olayı özel özelliklerinizde açıkça tetiklemelisiniz.

3. Bir ItemSize özelliği ekleyin ve PropertyChanged olayını ayarlayıcısında tetikleyin.

   public double ItemSize
   {
       get => _itemSize;
       set
       {
           if (_itemSize != value)
           {
               _itemSize = value;
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
           }
       }
   }
   private double _itemSize;
   

   ItemSize özelliği, özel _itemSize bir alanın değerini kullanıma sunar. Bunun gibi bir yedekleme alanı kullanmak, özelliğin gereksiz olabilecek bir olayı tetiklemeden önce yeni bir değerin eski değerle aynı olup olmadığını denetlemesini PropertyChanged sağlar.

   Olayın kendisi Invoke metodu tarafından oluşturulur. Soru işareti, olayın null olup olmadığını PropertyChanged , yani henüz herhangi bir olay işleyicisinin eklenip eklenmediğini denetler. Her tek yönlü veya iki yönlü bağlama, arka planda bir olay işleyicisi ekler, ancak kimse dinlemiyorsa, burada başka bir şey olmaz. Ancak PropertyChanged null değilse, Invoke olay kaynağına bir başvuruyla (sayfanın kendisi, anahtar sözcüğüyle this gösterilir) ve özelliğin adını gösteren bir event-args nesnesiyle çağrılır. Bu bilgilerle, özelliğine ItemSize yönelik tek yönlü veya iki yönlü bağlamalar, ilişkili kullanıcı arabirimini güncelleştirebilmeleri için tüm değişiklikler hakkında bilgilendirilir.

4. MainPage.xaml dosyasında, DataTemplate adlı ImageGridView_DefaultItemTemplate öğesini bulun ve şablonun üst kısmında yer alan Height denetiminin Width ve Grid değerlerini değiştirin. (Bu öğreticinin önceki bölümünde denetimden denetime bağlama yaptıysanız, tek yapmanız gereken değişiklik Value'ı ItemSize ile ve ZoomSlider'yi pageile değiştirmektir. Bunu hem Height hem de Widthiçin yaptığınızdan emin olun!)

   Önce

   <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                 x:DataType="local:ImageFileInfo">
       <Grid Height="{Binding Value, ElementName=ZoomSlider}"
           Width="{Binding Value, ElementName=ZoomSlider}"
           Margin="{StaticResource LargeItemMargin}">
   

   Sonra

   <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                 x:DataType="local:ImageFileInfo">
       <Grid Height="{Binding ItemSize, ElementName=page}"
             Width="{Binding ItemSize, ElementName=page}"
             Margin="{StaticResource LargeItemMargin}">
   

Artık kullanıcı arabirimi ItemSize değişikliklerine yanıt verebildiğine göre bazı değişiklikler yapmanız gerekir. Daha önce belirtildiği gibi, ItemSize değer çeşitli ui denetimlerinin geçerli durumundan hesaplanır, ancak bu denetimler durum değiştirildiğinde hesaplamanın gerçekleştirilmesi gerekir. Bunu yapmak için, belirli kullanıcı arabirimi değişikliklerinizin ItemSize'ı güncelleyen bir yardımcı metodu çağırmasını sağlamak amacıyla olay bağlama kullanacaksınız.

ItemSize özellik değerini güncelleştirme

1. DetermineItemSize yöntemini MainPage.xaml.cs ekleyin.

   private void DetermineItemSize()
   {
       if (FitScreenToggle != null
           && FitScreenToggle.IsOn == true
           && ImageGridView != null
           && ZoomSlider != null)
       {
           // The 'margins' value represents the total of the margins around the
           // image in the grid item. 8 from the ItemTemplate root grid + 8 from
           // the ItemContainerStyle * (Right + Left). If those values change,
           // this value needs to be updated to match.
           int margins = (int)this.Resources["LargeItemMarginValue"] * 4;
           double gridWidth = ImageGridView.ActualWidth -
               (int)this.Resources["DefaultWindowSidePaddingValue"];
           double ItemWidth = ZoomSlider.Value + margins;
           // We need at least 1 column.
           int columns = (int)Math.Max(gridWidth / ItemWidth, 1);
   
           // Adjust the available grid width to account for margins around each item.
           double adjustedGridWidth = gridWidth - (columns * margins);
   
           ItemSize = (adjustedGridWidth / columns);
       }
       else
       {
           ItemSize = ZoomSlider.Value;
       }
   }
   

2. MainPage.xaml dosyasında, dosyanın en üstüne gidin ve SizeChanged öğesi için bir Page olay bağlaması ekleyin.

   Öncesi:

   <Page x:Name="page"
   

   Sonrası:

   <Page x:Name="page"
         SizeChanged="{x:Bind DetermineItemSize}"
   

3. Slider adlı ZoomSlider'i (Page.Resources bölümünde) bulun ve bir ValueChanged etkinlik bağlama ekleyin.

   Öncesi:

   <Slider x:Name="ZoomSlider"
   

   Sonrası:

   <Slider x:Name="ZoomSlider"
           ValueChanged="{x:Bind DetermineItemSize}"
   

4. ToggleSwitch adlı FitScreenToggle bulun ve Toggled olay bağlaması ekleyin.

   Öncesi:

   <ToggleSwitch x:Name="FitScreenToggle"
   

   Sonrası:

   <ToggleSwitch x:Name="FitScreenToggle"
                 Toggled="{x:Bind DetermineItemSize}"
   

Uygulamayı çalıştırın ve görüntü şablonu boyutlarını değiştirmek için yakınlaştırma kaydırıcısını ve ekrana sığdırma iki durumlu düğmeyi kullanın. Gördüğünüz gibi, en son değişiklikler kodu iyi organize ederken daha iyi bir yakınlaştırma/yeniden boyutlandırma deneyimi sağlar.

Uyarı

Bir sınama için TextBlock öğesinin arkasına bir ZoomSlider eklemeyi ve Text özelliğini ItemSize özelliğine bağlamayı deneyin. Veri şablonunda olmadığından, önceki x:Bind bağlamalarda olduğu gibi yerine Binding kullanabilirsinizItemSize.

5. Bölüm: Kullanıcı düzenlemelerini etkinleştirme

Burada, kullanıcıların görüntü başlığı, derecelendirme ve çeşitli görsel efektler dahil olmak üzere değerleri güncelleştirmesini sağlamak için iki yönlü bağlamalar oluşturacaksınız.

Bunu başarmak için, tek görüntü görüntüleyici, yakınlaştırma denetimi ve düzenleme kullanıcı arabirimi sağlayan mevcut DetailPagegüncelleştireceksiniz.

Ancak ilk olarak, kullanıcı galeri görünümünde bir resme tıkladığında uygulamanın bu resme gidebilmesi için öğesini eklemeniz DetailPage gerekir.

DetaySayfasını ekleyin

1. MainPage.xaml dosyasında GridView adlı ImageGridView'i bulun. Öğeleri tıklanabilir hale getirmek için IsItemClickEnabled'i True olarak ayarlayın ve bir ItemClick olay işleyicisi ekleyin.

   Tavsiye

   Kopyalama/yapıştırma yerine aşağıdaki değişikliği yazarsanız "<Yeni Olay İşleyicisi>" yazan bir IntelliSense açılır penceresi görürsünüz. Sekme tuşuna basarsanız, değeri varsayılan yöntem işleyici adıyla doldurur ve sonraki adımda gösterilen yöntemi otomatik olarak saplar. Ardından arkaplan kodundaki yöntemine gitmek için F12 tuşuna basabilirsiniz.

   Öncesi:

   <GridView x:Name="ImageGridView">
   

   Sonrası:

   <GridView x:Name="ImageGridView"
             IsItemClickEnabled="True"
             ItemClick="ImageGridView_ItemClick">
   

   Uyarı

   Burada x:Bind ifadesi yerine geleneksel bir olay işleyicisi kullanıyoruz. Bunun nedeni, bundan sonra gösterildiği gibi olay verilerini görmemiz gerektiğidir.

2. MainPage.xaml.cs olay işleyicisini ekleyin (veya ipucunu son adımda kullandıysanız doldurun).

   private void ImageGridView_ItemClick(object sender, ItemClickEventArgs e)
   {
       this.Frame.Navigate(typeof(DetailPage), e.ClickedItem);
   }
   

   Bu yöntem yalnızca ayrıntı sayfasına gider ve sayfayı başlatmak için ImageFileInfo tarafından kullanılan bir nesnesi olan tıklanan öğeyi geçirir. Bu öğreticide bu yöntemi uygulamanız gerekmez, ancak ne yaptığını görmek için bir göz atabilirsiniz.

3. (İsteğe bağlı) Seçili durumdaki görüntüyle çalışan önceki oyun noktalarına eklediğiniz denetimleri silin veya açıklama satırı yapma. Bunları etrafta tutmak hiçbir şeye zarar vermez, ancak artık ayrıntı sayfasına gitmeden bir resim seçmek çok daha zor.

artık iki sayfayı bağladığınıza göre uygulamayı çalıştırın ve etrafa göz atın. Düzenleme bölmesindeki denetimler dışında her şey çalışır. Bu denetimler, değerleri değiştirmeye çalıştığınızda yanıt vermez.

Gördüğünüz gibi, başlık metin kutusu başlığı görüntüler ve değişiklikleri yazmanızı sağlar. Değişiklikleri işlemek için odağı başka bir denetime değiştirmeniz gerekir, ancak ekranın sol üst köşesindeki başlık henüz güncelleştirilmez.

Bölüm 1'de ele aldığımız düz x:Bind kod ifadeleri kullanılarak tüm denetimler zaten bağlıdır. Hatırlayacağınız gibi, bu hepsinin tek seferlik bağlamalar olduğu anlamına gelir ve bu da değerlerdeki değişikliklerin neden kaydedilmediğini açıklar. Bunu düzeltmek için tek yapmamız gereken bunları iki yönlü bağlamalara dönüştürmektir.

Düzenleme denetimlerini etkileşimli hale getirme

1. DetailPage.xaml dosyasında, TextBlock adlı 'yi ve ardından gelen RatingControl denetimini bulun ve x:Bind ifadelerini Mode=TwoWayiçerecek şekilde güncelleyin.

   Öncesi:

   <TextBlock x:Name="TitleTextBlock"
              Text="{x:Bind item.ImageTitle}"
              ... >
   <muxc:RatingControl Value="{x:Bind item.ImageRating}"
                           ... >
   

   Sonrası:

   <TextBlock x:Name="TitleTextBlock"
              Text="{x:Bind item.ImageTitle, Mode=TwoWay}"
              ... >
   <muxc:RatingControl Value="{x:Bind item.ImageRating, Mode=TwoWay}"
                           ... >
   

2. Derecelendirme denetiminden sonra gelen tüm efekt kaydırıcıları için aynı şeyi yapın.

   <Slider Header="Exposure"    ... Value="{x:Bind item.Exposure, Mode=TwoWay}" ...
   <Slider Header="Temperature" ... Value="{x:Bind item.Temperature, Mode=TwoWay}" ...
   <Slider Header="Tint"        ... Value="{x:Bind item.Tint, Mode=TwoWay}" ...
   <Slider Header="Contrast"    ... Value="{x:Bind item.Contrast, Mode=TwoWay}" ...
   <Slider Header="Saturation"  ... Value="{x:Bind item.Saturation, Mode=TwoWay}" ...
   <Slider Header="Blur"        ... Value="{x:Bind item.Blur, Mode=TwoWay}" ...
   

İki yönlü mod, beklediğiniz gibi, her iki tarafta da değişiklik olduğunda verilerin her iki yönde de hareket ettiğini gösterir.

Daha önce ele alınan tek yönlü bağlamalar gibi, INotifyPropertyChanged sınıfındaki ImageFileInfo uygulaması sayesinde, bu iki yönlü bağlamalar da artık ilişkili özellikler değiştiğinde kullanıcı arabirimini güncelleyecektir. Ancak, iki yönlü bağlama ile, kullanıcı denetimle her etkileşimde olduğunda, değerler kullanıcı arabiriminden ilişkili özelliklere de taşınır. XAML tarafında başka bir şey gerekmez.

Uygulamayı çalıştırın ve düzenleme denetimlerini deneyin. Gördüğünüz gibi, bir değişiklik yaptığınızda, bu artık görüntü değerlerini etkiler ve ana sayfaya geri döndüğünüzde bu değişiklikler devam eder.

Bölüm 6: İşlev bağlaması aracılığıyla değerleri biçimlendirme

Son bir sorun kaldı. Efekt kaydırıcılarını hareket ettirdiğinizde, yanlarındaki etiketler yine de değişmez.

Bu öğreticinin son bölümü, görüntü için kaydırıcı değerlerini biçimlendiren bağlamalar eklemektir.

Efekt kaydırıcısı etiketlerini bağlama ve görüntüleme değerlerini biçimlendirme

1. TextBlock kaydırıcısından sonra yer alan Exposure ögesini bulun ve Text değerini burada gösterilen bağlama ifadesiyle değiştirin.

   Öncesi:

   <Slider Header="Exposure" ... />
   <TextBlock ... Text="0.00" />
   

   Sonrası:

   <Slider Header="Exposure" ... />
   <TextBlock ... Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />
   

   Bir yöntemin dönüş değerine bağladığınız için bu işlev bağlaması olarak adlandırılır. Bir veri şablonundaysanız, metoda sayfanın arka planda kodu veya x:DataType türü üzerinden erişilebilir olmalıdır. Bu durumda, sayfanın öğe özelliği ve ardından öğenin ToString özelliği aracılığıyla erişilen tanıdık .NET Exposure yöntemi kullanılır. (Bu, bir bağlantı zincirinde derin iç içe yerleştirilmiş yöntemlere ve özelliklere nasıl bağlanabileceğinizi gösterir.)

   İşlev bağlaması, diğer bağlama kaynaklarını yöntem bağımsız değişkenleri olarak geçirebileceğiniz ve bağlama ifadesi bu değerlerdeki değişiklikleri tek yönlü modla beklendiği gibi dinleyebileceği için, görüntüleme için değerleri biçimlendirmek için ideal bir yoldur. Bu örnekte, kültürü bağımsız değişkeni arka planda uygulanan değişmeyen bir alana başvurudur, ancak aynı şekilde PropertyChanged olayları oluşturan bir özellik de olabilir. Bu durumda, özellik değerinde yapılan tüm değişiklikler ifadenin x:Bind yeni değerle çağırmasına ToString ve ardından kullanıcı arabirimini sonuçla güncelleştirmesine neden olur.

2. Diğer efekt kaydırıcılarını etiketleyen TextBlockiçin de aynı şeyi yapın.

   <Slider Header="Temperature" ... />
   <TextBlock ... Text="{x:Bind item.Temperature.ToString('N', culture), Mode=OneWay}" />
   
   <Slider Header="Tint" ... />
   <TextBlock ... Text="{x:Bind item.Tint.ToString('N', culture), Mode=OneWay}" />
   
   <Slider Header="Contrast" ... />
   <TextBlock ... Text="{x:Bind item.Contrast.ToString('N', culture), Mode=OneWay}" />
   
   <Slider Header="Saturation" ... />
   <TextBlock ... Text="{x:Bind item.Saturation.ToString('N', culture), Mode=OneWay}" />
   
   <Slider Header="Blur" ... />
   <TextBlock ... Text="{x:Bind item.Blur.ToString('N', culture), Mode=OneWay}" />
   

Artık uygulamayı çalıştırdığınızda, kaydırıcı etiketleri de dahil olmak üzere her şey çalışır.

Bağlama ile x:Bind arasındaki farklar

UWP uygulamalarınızda XAML'de veri bağlamaları oluştururken Binding ile x:Bind arasında seçim yapabilirsiniz. Önemli farklar şunlardır:

• x:Bind: Derleme zamanı doğrulaması, daha iyi performans sağlar ve kesin olarak yazılır. Derleme zamanında veri yapısının bilindiği senaryolar için en uygun yöntemdir.
• Binding: Veri yapısının çalışma zamanında belirlenmesi gibi dinamik senaryolar için çalışma zamanı değerlendirmesi ve daha fazla esneklik sunar.

x:Bind tarafından desteklenmeyen senaryolar

Son derece verimli olsa x:Bind da, belirli senaryolarda sınırlamaları vardır:

• Dinamik veri yapıları: x:Bind Veri yapısı çalışma zamanında belirlendiğinde kullanılamaz.
• Öğeden öğeye bağlama: İki kullanıcı arabirimi öğesi arasındaki doğrudan bağlama tarafından x:Binddesteklenmez.
• DataContext devralma: 'nin aksineBindingx:Bind, bir üst öğenin öğesini otomatik olarak devralmazDataContext.
• İki yönlü bağlamalar: x:Bind İki yönlü bağlamaları destekler ve değişikliklerin kullanıcı arabiriminden kaynak özelliğe geri akmasını sağlar. Kullanıcı arabiriminin kaynak özellik değiştiğinde güncelleştirilebilmesi için (tek yönlü veya çift yönlü bağlamalarda), veri nesnelerinize uygulamanız INotifyPropertyChanged gerekir.

Diğer ayrıntılar ve örnekler için aşağıdaki kaynaklara bakın:

• Ayrıntılı Veri Bağlama
• x:Bind işaretleme uzantısı

Sonuç

Bu öğretici size veri bağlamanın tadını verdi ve kullanılabilir işlevlerden bazılarını gösterdi. Tamamlamadan önce bir uyarı: Her şey bağlanabilir değil ve bazen bağlamaya çalıştığınız değerler, özelliklerle uyumlu olmayabilir. Bağlamada çok fazla esneklik vardır, ancak her durumda çalışmaz.

Bağlama tarafından giderilmeyen bir soruna örnek olarak, ayrıntı sayfası yakınlaştırma özelliğinde olduğu gibi bir denetimin bağlanacak uygun özellikleri olmaması gerekir. Bu zoom kaydırıcısının görseli gösteren ScrollViewer ile etkileşime geçmesi gerekir; ancak, ScrollViewer yalnızca ChangeView yöntemiyle güncellenebilir. Bu durumda, ScrollViewer ve yakınlaştırma kaydırıcısını eşitlenmiş durumda tutmak için geleneksel olay işleyicilerini kullanırız; ayrıntılar için ZoomSlider_ValueChanged içindeki MainImageScroll_ViewChanged ve DetailPage yöntemlerine bakın.

Bununla birlikte bağlama, kodunuzu basitleştirmenin ve kullanıcı arabirimi mantığınızı veri mantığınızdan ayrı tutmanın güçlü ve esnek bir yoludur. Bu, diğer tarafa hata ekleme riskini azaltırken bu bölmenin her iki tarafını da ayarlamanızı çok daha kolay hale getirir.

Kullanıcı arabirimi ile veri ayrımına örnek olarak ImageFileInfo.ImageTitle özelliği gösterilebilir. Bu özellik (ve ImageRating özelliği), bölüm 4'te oluşturduğunuz özellikten ItemSize biraz farklıdır çünkü değer bir alan yerine dosya meta verilerinde (tür aracılığıyla ImageProperties sunulur) depolanır. Dosya meta verilerinde başlık yoksa ImageTitle, dosya adı olarak ayarlanan ImageName değerini döndürür.

public string ImageTitle
{
    get => String.IsNullOrEmpty(ImageProperties.Title) ? ImageName : ImageProperties.Title;
    set
    {
        if (ImageProperties.Title != value)
        {
            ImageProperties.Title = value;
            var ignoreResult = ImageProperties.SavePropertiesAsync();
            OnPropertyChanged();
        }
    }
}

Gördüğünüz gibi ayarlayıcı özelliği güncelleştirir ImageProperties.Title ve ardından yeni değeri dosyaya yazmak için çağırır SavePropertiesAsync . (Bu, eşzamansız bir yöntemdir, ancak bir özellikte await anahtar sözcüğünü kullanamayız ve özellik alıcılarının ve ayarlayıcılarının hemen tamamlanması gerektiğinden bunu yapmamalısınız. Bunun yerine, yöntemi çağırıp döndürdüğü Task nesnesini yoksayabilirsiniz.)

Daha ileri gitmek

Artık bu laboratuvarı tamamladığınıza göre, tek başınıza bir sorunu çözmek için yeterli bağlayıcı bilgiye sahipsiniz.

Fark etmiş olabileceğiniz gibi, ayrıntılar sayfasında yakınlaştırma düzeyini değiştirirseniz, geri gidip aynı görüntüyü yeniden seçtiğinizde otomatik olarak sıfırlanır. Her görüntü için yakınlaştırma düzeyini ayrı ayrı nasıl koruyup geri yükleyebileceğinizi öğrenebilir misiniz? İyi şanslar!

Bu öğreticide ihtiyacınız olan tüm bilgilere sahip olmanız gerekir, ancak daha fazla rehberliğe ihtiyacınız varsa veri bağlama belgeleri yalnızca bir tık uzağınızdadır. Buradan başlayın:

• {x:Bind} biçimlendirme uzantısı
• Ayrıntılı Veri Bağlama