Windows 10 Geliştirme - Veri Bağlama
Veri bağlama, verileri görüntülemek ve etkileşimde bulunmak için kısmi sınıflar kullanan Windows Runtime uygulamaları için basit ve kolay bir yol sağlayan XAML uygulamasındaki bir mekanizmadır. Verilerin yönetimi, bu mekanizmada verilerin görüntülenme biçiminden tamamen ayrıdır.
Veri bağlama, kullanıcı arayüzünde UI öğeleri ile veri nesnesi arasında veri akışına izin verir. Bir bağlanma kurulduğunda ve veriler veya iş modeliniz değiştiğinde, güncellemeleri otomatik olarak UI öğelerine yansıtır ve bunun tersi de geçerlidir. Standart bir veri kaynağına değil, sayfadaki başka bir öğeye bağlanmak da mümkündür. Veri bağlama -
- Tek yönlü veri bağlama
- İki yönlü veri bağlama
- Eleman Bağlama
Tek Yönlü Veri Bağlama
Tek yönlü bağlamada, veriler kaynağından (verileri tutan nesne) hedefine (verileri görüntüleyen nesne) bağlanır.
Tek yönlü veri bağlamanın basit bir örneğine bakalım. Aşağıda, bazı özelliklerle dört metin bloğunun oluşturulduğu XAML kodu verilmiştir.
<Page
x:Class = "OneWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:OneWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name = "Display">
<StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
<TextBlock Text = "Name: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/>
</StackPanel>
<StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
<TextBlock Text = "Title: " Margin = "10" Width = "100"/>
<TextBlock Margin = "10" Width = "200" Text = "{Binding Title}" />
</StackPanel>
</StackPanel>
</Grid>
</Page>İki metin bloğunun Metin özellikleri şu şekilde ayarlanmıştır: “Name” ve “Title” statik olarak, metin bloklarının diğer iki Metin özelliği, aşağıda gösterildiği gibi Employee sınıfının sınıf değişkenleri olan "Ad" ve "Başlık" a bağlanır.
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace OneWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
public MainPage(){
this.InitializeComponent();
DataContext = Employee.GetEmployee();
}
}
public class Employee {
public string Name { get; set; }
public string Title { get; set; }
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Waqar Ahmed",
Title = "Development Manager"
};
return emp;
}
}
}İçinde Employee classdeğişkenlerimiz var Name ve Title ve bir statik yöntemde employee objectbaşlatılır ve bu çalışan nesnesini döndürür. Bu nedenle, mülkiyet, İsim ve Unvan'a bağlıyız, ancak mülkün ait olduğu nesneyi henüz seçmedik. Kolay yol, bir nesneyiDataContext, kimin mülklerini bağlayıcı olduğumuz MainPage Yapıcı.
Bu uygulamayı çalıştırdığınızda, hemen telefonunuzda görebilirsiniz. MainWindow o Çalışan nesnesinin Adı ve Unvanına başarıyla bağlandığınızı.
İki yönlü Veri Bağlama
Two-Way Binding'de kullanıcı, verileri kullanıcı arayüzü aracılığıyla değiştirebilir ve bu verilerin kaynakta güncellenmesini sağlayabilir. Örneğin, kullanıcı görünüme bakarken kaynak değişirse, görünümün güncellenmesini istersiniz.
Bazı özellikler ve olaylarla iki etiket, iki metin kutusu ve bir düğmenin oluşturulduğu aşağıdaki örneğe bakalım.
<Page
x:Class = "TwoWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:TwoWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "200,20,0,0">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0"
Text = "{Binding Name, Mode = TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "200,20,0,0"
Grid.Row = "1">Age:</TextBlock>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0"
Text = "{Binding Age, Mode = TwoWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "Display" Click = "Button_Click"
Margin = "200,20,0,0"/>
<TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/>
</StackPanel>
</Grid>
</Page>Aşağıdakileri gözlemleyebiliriz -
Her iki metin kutusunun Metin özellikleri, "Name" ve "Age" sınıf değişkenleri olan Person class Aşağıda gösterildiği gibi.
İçinde Person class, sadece iki değişkenimiz var - İsim ve Yaş ve nesnesi MainWindow sınıf.
XAML kodunda, özelliğe bağlıyız - Name ve Age, ancak mülkün ait olduğu nesneyi seçmedik.
Daha kolay yol, nesneye bir nesne atamaktır. DataContext, özelliklerini aşağıda gösterildiği gibi C # kodunda bağladığımız MainWindowconstructor.
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace TwoWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
this.InitializeComponent();
this.DataContext = person;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = person.Name + " is " + person.Age + " years old";
txtblock.Text = message;
}
}
public class Person {
private string nameValue;
public string Name {
get { return nameValue; }
set { nameValue = value; }
}
private double ageValue;
public double Age {
get { return ageValue; }
set {
if (value != ageValue) {
ageValue = value;
}
}
}
}
}Yukarıdaki kod derlendiğinde ve çalıştırıldığında, aşağıdaki pencereyi göreceksiniz. TıklaDisplay buton.
Adı ve Yaşı değiştirelim ve tıklayın. Display düğmesine tekrar basın.
Bunu tıklama düğmesinde görebilirsiniz ‘Display’, metin kutularının metni, verileri göstermek için kullanılmaz. TextBlock ancak sınıf değişkenleri kullanılır.
Daha iyi anlamak için yukarıdaki kodu her iki durumda da çalıştırmanızı tavsiye ederim.
Eleman Bağlama
Standart bir veri kaynağına değil, sayfadaki başka bir öğeye bağlanmak da mümkündür. Adlı bir uygulama oluşturalımElementBindingburada bir Kaydırıcı ve Dikdörtgenin oluşturulduğu ve kaydırıcıyla dikdörtgen genişliği ve yüksekliği sınırlıdır. Aşağıda XAML'deki kod verilmiştir.
<Page
x:Class = "ElementBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:ElementBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
<Rectangle Height = "100" Width = "100" Fill = "SteelBlue"
RenderTransformOrigin = "0.5,0.5" Margin = "50">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}"
ScaleY = "{Binding Value, ElementName = MySlider}"/>
</Rectangle.RenderTransform>
</Rectangle>
<Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"
x:Name = "MySlider" />
</StackPanel>
</Grid>
</Page>Yukarıdaki kod derlendiğinde ve çalıştırıldığında, aşağıdaki pencereyi göreceksiniz.
Bir kaydırıcıyla dikdörtgenin boyutunu aşağıda gösterildiği gibi değiştirebilirsiniz.
