ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その38:Expression BlendでDataStoreを作成する。

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年2月13日 from Atelier:Mitsuba

はじめに

Expression Blendを使えばパネルからデータストアを作成することができます。

試しに利用してみましょう。

新しいデータストアの作成

  1. データタブから新しいデータストアを作成します。
    f:id:c-mitsuba:20120213034052p:image
  2. データストアに名前をつけます。
    f:id:c-mitsuba:20120213034051p:image
  3. できたデータストアを編集します。
    f:id:c-mitsuba:20120213034050p:image
  4. 名前や初期値、型を設定します。
    f:id:c-mitsuba:20120213034049p:image
  5. 適当にボタンを置いて、ContentにBindingしてみましょう。
    f:id:c-mitsuba:20120213034048p:image
  6. データフィールドから、Bindingする要素を選択します。
    f:id:c-mitsuba:20120213034046p:image
  7. ボタンに0が表示されました。
    f:id:c-mitsuba:20120213034045p:image

このDataStoreはxamlとxaml.csからできています。

DataStore.xaml

<!--
      *********    このファイルを編集しないでください     *********
      このファイルはデザイン ツールにより作成されました。
      このファイルに変更を加えるとエラーが発生する場合があります。
-->
<DataStore:DataStore xmlns:DataStore="clr-namespace:Expression.Blend.DataStore.DataStore" Num="0" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" />

DataStore.xaml.cs

//      *********    このファイルを編集しないでください     *********
//      このファイルはデザイン ツールにより作成されました。
//      このファイルに変更を加えるとエラーが発生する場合があります。
namespace Expression.Blend.DataStore.DataStore
{
	using System;
	using System.Collections.Generic;

	public class DataStoreGlobalStorage
	{
		public static DataStoreGlobalStorage Singleton;
		public bool Loading {get;set;}
		private List<WeakReference> registrar; 

		public DataStoreGlobalStorage()
		{
			this.registrar = new List<WeakReference>();
		}
		
		static DataStoreGlobalStorage()
		{
			Singleton = new DataStoreGlobalStorage();
		}

		public void Register(DataStore dataStore)
		{
			this.registrar.Add(new WeakReference(dataStore));
		}

		public void OnPropertyChanged(string property)
		{
			foreach (WeakReference entry in this.registrar)
			{
				if (!entry.IsAlive)
				{
					continue;
				}
				DataStore dataStore = (DataStore)entry.Target;
				dataStore.FirePropertyChanged(property);
			}
		}
		
		public bool AssignementAllowed
		{
			get
			{
				// Only assign from loading once
				if(this.Loading && this.registrar.Count > 0)
				{
					return false;
				}
				
				return true;
			}
		}

		private double _Num = 0;

		public double Num
		{
			get
			{
				return this._Num;
			}

			set
			{
				if(!this.AssignementAllowed)
				{
					return;
				}
				
				if (this._Num != value)
				{
					this._Num = value;
					this.OnPropertyChanged("Num");
				}
			}
		}
	}

	public class DataStore : System.ComponentModel.INotifyPropertyChanged
	{
		public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
		
		public void FirePropertyChanged(string propertyName)
		{
			this.OnPropertyChanged(propertyName);
		}

		protected virtual void OnPropertyChanged(string propertyName)
		{
			if (this.PropertyChanged != null)
			{
				this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
			}
		}

		public DataStore()
		{
			try
			{
				System.Uri resourceUri = new System.Uri("/WindowsPhoneApplication23;component/DataStore/DataStore/DataStore.xaml", System.UriKind.Relative);
				if (System.Windows.Application.GetResourceStream(resourceUri) != null)
				{
					DataStoreGlobalStorage.Singleton.Loading = true;
					System.Windows.Application.LoadComponent(this, resourceUri);
					DataStoreGlobalStorage.Singleton.Loading = false;
					DataStoreGlobalStorage.Singleton.Register(this);
				}
			}
			catch (System.Exception)
			{
			}
		}

		private double _Num = 0;

		public double Num
		{
			get
			{
				return DataStoreGlobalStorage.Singleton.Num;
			}

			set
			{
				DataStoreGlobalStorage.Singleton.Num = value;
			}
		}
	}
}

このC#から分かるようにDataStoreをデータパネルから作成すると、DataStoreに対して自動的にOnPropertyChangedやINotiyPropertyChangedが実装されています。

SetDataStoreValueActionを使う

次に、SetDataStoreValueActionを使ってみましょう。

SetDataStoreValueActionをボタンに設置します。

f:id:c-mitsuba:20120213035523p:image

クリックされたらDataStoreのNumを1増やすように設定します。

Incrementにチェックをいれるとその分値を増やすビヘイビアになります。

f:id:c-mitsuba:20120213035522p:image

実行

実行してみましょう。

ボタンを押すたびに値が増えていくことが確認できます。

f:id:c-mitsuba:20120213040133p:image

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ