Windows10-development-data-binding

提供：Dev Guides
移動先:案内、検索

Windows 10開発-データバインディング

データバインディングはXAMLアプリケーションのメカニズムであり、Windowsランタイムアプリが部分クラスを使用してデータを表示および操作するシンプルで簡単な方法を提供します。 データの管理は、このメカニズムでのデータの表示方法から完全に分離されています。

データバインディングにより、ユーザーインターフェイス上のUI要素とデータオブジェクト間のデータフローが可能になります。 バインディングが確立され、データまたはビジネスモデルが変更されると、更新が自動的にUI要素に反映され、その逆も同様です。 標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。 データバインディングはすることができます-

  • 一方向のデータバインディング
  • 双方向のデータバインディング
  • 要素のバインド

一方向データバインディング

一方向バインディングでは、データはソース（データを保持するオブジェクト）からターゲット（データを表示するオブジェクト）にバインドされます。

一方向のデータバインディングの簡単な例を見てみましょう。 以下に、いくつかのプロパティを使用して4つのテキストブロックが作成されるXAMLコードを示します。 

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

2つのテキストブロックのTextプロパティは*” Name” および” Title” *に静的に設定され、テキストブロックの他の2つのTextプロパティはEmployeeクラスのクラス変数である“ Name”および“ Title”にバインドされます以下に示すように。 

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;
      }

   }
}
  • Employeeクラス*には、変数 Name および Title と、* employeeオブジェクト*が初期化され、その従業員オブジェクトを返す静的メソッドが1つあります。 したがって、プロパティName、Titleにバインドしていますが、プロパティが属するオブジェクトはまだ選択していません。 簡単な方法は、オブジェクトを DataContext に割り当てることです。このプロパティのプロパティは MainPage コンストラクターでバインドします。

このアプリケーションを実行すると、 MainWindow で、そのEmployeeオブジェクトの名前と役職に正常にバインドされていることがすぐにわかります。

一方向データバインディング

双方向のデータバインディング

双方向バインディングでは、ユーザーはユーザーインターフェイスを介してデータを変更し、そのデータをソースで更新できます。 たとえば、ユーザーがビューを見ているときにソースが変更された場合、ビューを更新する必要があります。

2つのラベル、2つのテキストボックス、1つのボタンがいくつかのプロパティとイベントとともに作成される、以下の例を見てみましょう。 

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

私たちは次を観察することができます-

  • 両方のテキストボックスのテキストプロパティは、以下に示すように* Personクラス*のクラス変数である "Name" および "Age" にバインドします。
  • * Personクラス*には、NameとAgeという2つの変数があり、そのオブジェクトは MainWindow クラスで初期化されます。
  • XAMLコードでは、プロパティにバインドしています- Name および Age ですが、プロパティが属するオブジェクトを選択していません。
  • より簡単な方法は、オブジェクトを DataContext に割り当てることです。このオブジェクトのプロパティは、以下の MainWindowconstructor に示すように、C＃コードでバインドします。
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;
            }
         }
      }

   }

}

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。 [表示]ボタンをクリックします。

双方向データバインディング

名前と年齢を変更し、[表示]ボタンをもう一度クリックします。

双方向データバインディング

クリックボタン*「表示」では、 *TextBlock のデータを表示するためにテキストボックスのテキストは使用されず、クラス変数が使用されていることがわかります。

理解を深めるために、両方のケースで上記のコードを実行することをお勧めします。

要素のバインド

標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。 SliderとRectangleが作成され、スライダーを使用して長方形の幅と高さがバインドされる ElementBinding というアプリケーションを作成してみましょう。 XAMLのコードを以下に示します。 

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

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。

要素バインディング

以下に示すように、スライダーを使用して、長方形のサイズを変更できます。

要素バインディング

「https://www.finddevguides.com/index.php?title=Windows10-development-data-binding&oldid=9419」から取得
Powered by MediaWiki