WPF

[WPF][Silverlight]XAML入門

kazuto — Wed, 28 Apr 2010 12:33:00 GMT

以前にWPF入門としてXAMLの内容を書きましたが、XAML入門編として書き直しました。

続きを読む

[WFP]Adornerは使える１

kazuto — Wed, 07 Apr 2010 13:05:00 GMT

System.Windows.Documents.AdornerクラスはUIElementを装飾する為に使用するクラスとMSDNで説明されていますが、装飾を実現可能とする機構を上手く利用すると装飾としてではない実装も色々出来ます。

[WPF][雑記] MCTS 70-502を受けてきました

kazuto — Fri, 15 May 2009 13:54:00 GMT

VisualStudio2008関連のMCTSを初めて受験し、無事合格しました。

MCTS: .NET Framework 3.5, Windows Presentation Foundation アプリケーション

WPFはまったく仕事ではご縁のない状態ですが、WPFを初めて見たときから「カッコイイ！！」と感じコツコツと勉強していました。
どれ位力がついたか知る為にも良いかなと思い、又今ならMPVの方のバウチャーチケット（Rさんのを使わせて頂きました m(_ _)m )で割引が利くのでチャレンジしてきました。

受けてみた感想は、ClickOnceの出題が多く出た感じがしますが、浅く広～くな感じで良いバランスで出題されていた感じがします。
今回は言語の選択でC#を選択したのですが、途中VBのコードが出てきました（^^;
かずきさんのブログでも以前書かれていたので、出るかな～とワクワクしていたらちゃんと出てきましたｗ

今回自分の勉強方法は、入門的な書籍をまず始め、そこからMSDN、Selｆ-Paced、Pro WPF 2008を一通り勉強をしました。
一番効果的だったと感じたのは、勉強した事をわんくまブログでエントリしていく事だったと思います。エントリ数少ないですが・・・(^^;

覚えた事をエントリする為に一度コーディングし、動作確認を行ってソースコードを転記する。
その一連の事が一番力がついたように感じます。

英単語を覚えるには電子辞書ではなく辞書を開く。漢字を覚えるには手で書く。と同じように、コードを繰り返し書くのが一番の学習方法だなと今回改めて感じました。
そういった意味で、ブログを使った勉強ってかなり効果が高く感じます。
またブログを通じて技術情報のやり取りも行えますし、間違いなどのフィードバックを頂けたりと技術向上にも非常に良いと思います。

是非ブログを使って勉強をしてみては如何でしょうか？

また、プログラムは楽しんでナンボだとも感じました。
先に書いたように、仕事ではWPFを使ったことはないのですが、単純に「作っていて楽しい！」って感覚がとても大切ですね。
その楽しいって感じのお陰で、覚えることが沢山あるWPFの勉強も苦に感じていません。
いつかWPFの開発を仕事でやってみたいな・・。

MSTCの取得に甘んじず、今後も情報を発信していきたいと思います。

とりあえず自分におめでとう。

[WPF][Silverlight] RadioButtonの排他的同期が正しく行われない

kazuto — Mon, 11 May 2009 15:05:00 GMT

最近ホームページの作成でSilverlight2を少し触り始めたのですが、WPFとの違いに悪戦苦闘してます。
WPFに比べて最低限の機能以外サポートがされていないSilverlight2ですが、動作上困ったことが多々ありますね・・・。
例えば、ItemsControlを使用し、ItemTemplateにRadioButtonを使用すると、きちんと親コンテナを認識してくれません。

- Page.xaml -

- Page.xank,cs -

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            DataContext = Items;
        }

        private List<string> items;
        public List<string> Items
        {
            get
            {
                if (items == null)
                {
                    items = new List<string>(new string[] { "Item1", "Item2", "Item3", "Item4", "Item5" });
                }
                return items;
            }
        }
    }
}

こんな感じで文字列のリストをItemsControlにバインドさせ、ItemTemplateにRadioButtonを指定するとSilverlight2ではRadioButtonのチェックの排他的同期が行われません。

DataTemplateで指定したRadioButtonのGroupNameプロパティを指定してみても駄目です。
WPFではきちんと排他的同期処理が行われます。
どうもSilverlight2では１階層上の親コンテナ内でしか排他的同期が適用されないみたいな感じです。

実際こんな感じのXAMLを作ってみても同様な結果になります。

- XAML -

WPFでは出来ませんが、Silverlight2ではContentPresenterはダイレクト指定が行えます。
なぜContentPresenterを使用しているかと言いますと、DataTemplateを使用すると展開されるコンテンツはContentPresenter内に動的に作成されます（かなり説明をはしょってます）。
よって上記のItemsControlのItemTemplateで指定したRadioButtonは上記の直接ContentPresenter内にRadioButtonを記述しているXAMLと同様の構成になります。

実際はRadioButtonの直接の親要素がContentPresenterになってしまうからRadioButton間の同期が行われないのでしょうかね？
これって実際凄く不便だと思います。
例えばアコーディオンコントロールなどのパネル系コントロールを作成しようとした場合、展開されるアイテムグループを常にひとつにしたい場合、RadioButtonコントロールを内部的に使用することがあるかと思いますが、この動作では排他的同期処理が正しく行われない為にRadioButtonコントロールのチェック状態を自分で管理しないといけません。
DataTemplateによって要素の展開が行えるまで出来るのであれば、そのチェックの同期処理位おこなって欲しいですね・・。

いまいち使いづらいです。Silverlight2。

[WPF] WPF入門～コントロール [TextBox]～

kazuto — Wed, 29 Apr 2009 14:52:00 GMT

今回はTextBox（System.Windows.Controls.TextBox）です。
まずはMSDNの説明をみてみましょう。

書式なしテキストの表示や編集に使用できるコントロールを表します。

TextBoxコントロールはお馴染みのコントロールかと思います。
MSDNの説明の通り、基本的な文字列の編集が行えるコントロールです。
また、テキストのコピー・カット・選択や複数行表示なども行えます。
まずはTextBoxの簡単な使用例を見てみましょう。

- XAML -

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Background="DarkBlue" Width="150" Height="150">
    <StackPanel>
        
        <TextBox Margin="5" Text="Sample Text" />
        
        <TextBox Margin="5">Sample Text</TextBox>
    </StackPanel>
</Window>

上記の例で分かるとおりに、TextBoxコントロールはTextプロパティを使用してテキストの操作を行います。
また、TextBoxコントロールのコンテンツプロパティはTextプロパティが指定されている為、コンテンツプロパティに指定出来るのは文字列のみになります。よって他のコントロールなどを子要素にする事は出来ません。

TextBoxコントロールは既定で改行を行わないようになっています。
テキストの改行を行いたい場合はTextWrappingプロパティを使用します。
改行を行う例を見てみましょう。

- XAML -

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Background="DarkBlue" SizeToContent="WidthAndHeight">
    <StackPanel>
        <TextBox Margin="5" Width="100" TextWrapping="NoWrap">
            改行なし ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </TextBox>
        <TextBox Margin="5" Width="100" Height="40" TextWrapping="Wrap" >
            改行あり ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </TextBox>
        <TextBox Margin="5" Width="100" Height="40" TextWrapping="WrapWithOverflow" >
            改行あり ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </TextBox>
    </StackPanel>
</Window>

このようにTextWrappingプロパティを使用する事によって改行をする事が出来ます。
TextWappingプロパティの動作詳細についてはMSDNでとても分かりやすい物がありますので、そちらを参考にして下さい。

「テキスト折り返しの設定」

最後にTextBoxコントロールを使用する上でのワンポイントです。
TextBoxコントロールのコントロールサイズは基本的に設定されているフォントサイズと、Textプロパティに設定されている文字列によって決定されます。
よって同一のテキストでもフォントサイズが異なるだけでサイズが異なります。

この特性を知らないと、Gridコントロールなど配置した要素がストレッチされるレイアウトコントロールを使用する場合、レイアウトが正しく作れない事があります。
そのGridコントロールを使用した例を見てみましょう。

- XAML -

このようにGridの行・列のサイズを指定し子要素はそのサイズに合わせストレッチしている場合、きちんとサイズが合っていれば良いのですが、フォントサイズが途中で変更になった場合などに不都合が生じます。
上記例のTextBoxのフォントサイズを変更するとこのようになります。

このようにTextBoxコントロールの特性をきちんと理解し、レイアウト作成時に考慮する事が重要です。
今回はお馴染みのTextBoxコントロールでした。

to be continue・・・

[WPF] MVVMを使用した場合のViewのフェードイン・フェードアウト用ヘルパクラスの実装

kazuto — Tue, 21 Apr 2009 21:42:00 GMT

前回の「MVVMを使用した場合のViewのフェードアウトの実装方法について」について書きなぐりだけど実装が一応出来たのであげます。
まず、MSDNマガジンの「Model-View-ViewModel デザインパターンによる WPF アプリケーション」を元にしていますので、出てくる文言が分からない場合はリンク先を参照してください。

参考サイトでは、MainWindowView内でWorkspaceエリアにAllCustomerViewとCustomerViewが動的に配置されます。
MVVMパターンを使用しているので、Viewの配置はViewModelインスタンスの扱いによって行われます。
Viewが描画される仕組みは、ViewModelとViewがDataTemplateによって関連付けられ、ViewModelインスタンスが存在した場合にViewが読み込まれます。
逆にViewModelインスタンスが破棄されるとデータが有効でなくなるためViewも破棄されます。

DataTemplateの仕組みがある為、ViewModelはViewの描画に関しては知る必要が無く、Viewも自身のDataContextを元にデータバインドを行うためデータの管理に関して知る必要がありません。
この疎結合を生み出すパターンとしてMVVMが使用されます。

これを踏まえて、例えば動的に配置されるAllCustomerViewやCustomerViewが配置・破棄される際にフェードイン・フェードアウトなどのインタラクションを付け加えようとした場合にどのように実装すれば良いのでしょうか？
Viewの開始時のフェードインについてはUserControlのLoadedイベントにフェードイン用のアニメーションをイベントトリガにて設定すれば実装出来ます。

問題なのはView終了時のフェードアウトです。

Viewを終了する為にはViewModelインスタンスを破棄する必要があります。
アニメーションは設定対象のオブジェクト（View）のインスタンスが有効である期間しか行われない（見えない）為、Viewの終了時のフェードアウトを行っている場合はViewModelは破棄出来ないことになります。
ですが、ViewはViewModelによって管理される為、ViewModel側でViewのフェードアウト終了を感知する必要が出てきます。

Viewのフェードアウト終了時をViewModel側で感知するために、ViewModel側で感知用のプロパティを実装し、Viewとデータバインドを行い、Viewのフェードアウト時にプロパティトリガを使用して終了通知を送る事も出来ましたが、フェードアウトをする為だけにViewModel側でプロパティを実装しデータバインドを行うのは良い実装ではないと思います。
ここでViewとViewModelの間に、遷移感知用のヘルパクラスを使用したらどうなるかと思って実装してみました。

まず、目標として以下の事をあげました。

Viewのアニメーション定義はViewに行いさせたい
ViewとViewModelの疎結合を損ないたくない
ViewModel側にViewのフェードアウト終了を意識させたくない
View側でViewModelがフェードアウト終了を待機していることを意識させたくない
フェードイン・フェードアウトの設定はXAMLで設定したい

以上が目標です。

また書きなぐりですので、コード例の注意点がいくつかあります。

参考サイトをベースに実装していますが、一部変更しています
Viewのフェードアウトについての例なので、今回はModelは書いてありません
例外処理などはきちんと実装していません
自分で作成しているアプリケーション用の為、汎用的に使用できません

では実装結果です。

まず、View側のフェードイン・フェードアウトの設定は２パターン作りました。
リソース名指定方法と、リソース指定方法です。

- リソース名指定方法 -

- リソース指定方法 -

この２パターンの違いは、フェードイン・フェードアウトを定義しているリソースを名前指定で設定するか、リソース指定で設定するかの違いです。
リソース指定の場合は、少し注意する必要があります。View（UserControl）内でリソースを定義している場合はDynamicResourceでないとエラーになります。
これはUserControlのInitializeComponentメソッドが呼ばれ、XAML内が解析される時にStaticResourceの場合だとまたリソースインスタンスが生成されていない為です。

上記例でも解るとおりに、TransitionHelperという遷移感知ヘルパクラスの添付プロパティを使用してアニメーションを定義しています。

まずは今回作成したソリューション一覧です。

ではViewModelからです。
ViewModelの基底クラスとなるViewModelBaseを定義します。

- ViewModelBase.cs -

using System;
using System.ComponentModel;

namespace FadeSample.ViewModel
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        #region RequestClosed Event

        /// <summary>
        /// ViewModel側終了通知用イベント
        /// </summary>
        public event EventHandler<TransitionEventArgs> RequestClose;

        internal void OnRequestClose(ViewModelBase transitionViewModel)
        {
            EventHandler<TransitionEventArgs> handler = this.RequestClose;
            if (handler != null)
                handler(this, new TransitionEventArgs(transitionViewModel));
        }

        #endregion

        #region ViewClose Event

        /// <summary>
        /// 遷移ヘルパ側終了通知用イベント
        /// </summary>
        public event EventHandler<TransitionEventArgs> ViewClose;

        protected void Close(ViewModelBase transitionViewModel)
        {
            EventHandler<TransitionEventArgs> handler = this.ViewClose;
            if (handler != null)
                handler(this, new TransitionEventArgs(transitionViewModel));
        }

        #endregion

        #region INotifyPropertyChanged メンバ

        /// <summary>
        /// プロパティ値変更通知用イベント
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

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

        #endregion
    }

    public class TransitionEventArgs    : EventArgs
    {
        public TransitionEventArgs(ViewModelBase transitionViewModel)
        {
            this.transitionViewModel = transitionViewModel;
        }

        private ViewModelBase transitionViewModel;

        /// <summary>
        /// 遷移先ViewModel
        /// </summary>
        public ViewModelBase TransitionViewModel
        {
            get { return transitionViewModel; }
        }
    }
}

ViewModelBaseクラスではプロパティ値変更通知用のINotifyPropertyChangedインターフェイスを実装しています。
また、ViewModelインスタンスを管理しているViewModelクラスへインスタンスの破棄を通知するためのRequestCloseイベントと、遷移感知ヘルパクラスへ終了を通知する為のViewCloseイベントを実装しています。
２つのイベントでは次遷移先のViewModelを受け渡す為のTransitionEventArgsクラスも実装しています。
ViewCloseイベントが発行されると遷移感知ヘルパクラスが感知し、フェードインアニメーションを実行し終了するとRequestCloseイベントを発行するような仕組みです。

次にViewModelの切り替えをするMainWindowViewModeです。

- MainWindowViewModel.cs -

using System;

namespace FadeSample.ViewModel
{
    public class MainWindowViewModel : ViewModelBase
    {
        #region Constructor

        public MainWindowViewModel()
        {
            Workspace = new Sample1ViewModel();
        }

        #endregion

        #region Property

        private ViewModelBase workspace;

        /// <summary>
        /// Viewデータ元ViewModel
        /// </summary>
        public ViewModelBase Workspace
        {
            get { return workspace; }
            set
            {
                if (workspace == value) return;
                workspace = value;

                if (workspace != null)
                {
                    workspace.RequestClose += Workspace_RequestClosed;
                }

                OnPropertyChanged("Workspace");
            }
        }

        #endregion

        #region Event Handler

        /// <summary>
        /// RequestCloseイベントハンドラ
        /// </summary>
        private void Workspace_RequestClosed(object sender, TransitionEventArgs e)
        {
            Workspace.RequestClose -= Workspace_RequestClosed;
            Workspace = null;

            //遷移先がある場合は遷移する
            if (e.TransitionViewModel != null)
            {
                Workspace = e.TransitionViewModel;
            }
        }

        #endregion
    }
}

MainWindowViewModelではViewの切り替え元のデータとなるViewModelBase型のWorkspaceプロパティを実装しています。WorkspaceプロパティにViewModelBaseの派生クラスを設定することにより、DataTemplateにてViewが起動します。
またWorkspaceプロパティに設定されたViewModelより終了通知を受けるためのRequestCloseイベントもアタッチし、イベントハンドラ内でWorkspaceプロパティに設定されているViewModelを破棄し、次遷移先のViewModeインスタンスをWorkspaceプロパティに設定します。

次にMainWindowViewModelのViewにあたるMainWindowです。

- MainWindow.xaml -

MainWindowはViewを表示する元のWindowになります。今回はMainWindowViewModelのWorkspaceプロパティに設定されたViewModelをDataTemplateを使用して表示する為のContentControlを配置してあります。
また、MainWindowのDataContextプロパティに設定するMainWindowViewModelインスタンスはリソースより設定しています。

では次に、フェードイン・フェードアウトのサンプルとなるSample1ViewModelとSample2ViewModelです。

- Sample1ViewModel.cs -

using System;
using System.Windows.Input;

namespace FadeSample.ViewModel
{
    public class Sample1ViewModel : ViewModelBase
    {
        #region Command

        private ICommand command;
        public ICommand Command
        {
            get
            {
                if (command == null)
                    command = new RelayCommand(param => CloseView());
                return command;
            }
        }

        #endregion

        private void CloseView()
        {
            Close(new Sample2ViewModel());
        }
    }
}

- Sample2ViewModel.cs -

using System;
using System.Windows.Input;

namespace FadeSample.ViewModel
{
    public class Sample2ViewModel : ViewModelBase
    {
        #region Command

        private ICommand command;
        public ICommand Command
        {
            get
            {
                if (command == null)
                    command = new RelayCommand(param => CloseView());
                return command;
            }
        }

        #endregion

        private void CloseView()
        {
            Close(new Sample1ViewModel());
        }
    }
}

Sample1ViewModelもSample2ViewModelもViewのフェードイン・フェードアウトを試すためだけの簡単な実装です。
Viewが終了する際に使用するコマンドを実装しています。ここではコマンドの指定をRelayCommand型で定義していますが、RelayCommandは汎用コマンド定義クラスであり、参考サイトで詳しく説明されています。
詳細については参考サイトをご覧ください。一応RelayCommandもあげておきます。

- RelayCommand.cs -

using System;
using System.Windows.Input;

namespace FadeSample.ViewModel
{
    /// <summary>
    /// コマンドヘルパクラス
    /// </summary>
    public class RelayCommand : ICommand
    {
        private Action<object> execute;
        private Predicate<object> canExecute;

        #region Constructors

        public RelayCommand(Action<object> execute) : this(execute,null)
        {}

        public RelayCommand(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null) throw new ArgumentNullException("execute");
            this.execute = execute;
            this.canExecute = canExecute;
        }

        #endregion

        #region ICommand メンバ

        public event EventHandler CanExecuteChanged;

        /// <summary>
        /// コマンド実行可否
        /// </summary>
        public bool CanExecute(object parameter)
        {
            return (canExecute == null ? true : canExecute(parameter));
        }

        /// <summary>
        /// コマンド実行
        /// </summary>
        public void Execute(object parameter)
        {
            execute(parameter);
        }

        #endregion
    }
}

次に遷移感知ヘルパクラスを使用したSample1ViewとSample2Viewです。

- Sample1View.xaml -

<UserControl x:Class="FadeSample.View.Sample1View"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:helper="clr-namespace:FadeSample.ViewModel"
    helper:TransitionHelper.Attach="True"
    helper:TransitionHelper.LoadStoryboard="{DynamicResource LoadAnimation}"
    helper:TransitionHelper.CloseStoryboard="{DynamicResource CloseAnimation}"
    Opacity="0">

    <UserControl.Resources>
        
        <Storyboard x:Key="LoadAnimation">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:0.5" />
        </Storyboard>
        
        <Storyboard x:Key="CloseAnimation">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:0.5" />
        </Storyboard>
    </UserControl.Resources>

    <Border Background="Red" Width="150" Height="150">
        <Button Width="100" Height="30" Command="{Binding Path=Command}">Sample2Viewへ</Button>
    </Border>

</UserControl>

- Sample2View.xaml -

<UserControl x:Class="FadeSample.View.Sample2View"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:helper="clr-namespace:FadeSample.ViewModel"
    helper:TransitionHelper.Attach="True"
    helper:TransitionHelper.LoadAnimationName="LoadAnimation"
    helper:TransitionHelper.CloseAnimationName="CloseAnimation"
    Opacity="0" RenderTransformOrigin="0.5,1">

    <UserControl.Resources>
        
        <Storyboard x:Key="LoadAnimation">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:0.5" />
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                    From="0" To="1" Duration="00:00:0.5" />
        </Storyboard>
        
        <Storyboard x:Key="CloseAnimation">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:0.5" />
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                    From="1" To="0" Duration="00:00:0.5" />
        </Storyboard>
    </UserControl.Resources>

    <UserControl.RenderTransform>
        <ScaleTransform ScaleX="1"    ScaleY="0" />
    </UserControl.RenderTransform>

    <Border Background="Blue" Width="150" Height="150">
        <Button Width="100" Height="30" Command="{Binding Command}">Sample1Viewへ</Button>
    </Border>

</UserControl>

Sample1Viewではリソース指定で遷移感知ヘルパクラスを使用しています。フェードイン・フェードアウトのアニメーションを自身のリソース内にて定義しているのでDynamicResourceとなっています。
Sample2Viewではリソース名指定で遷移感知ヘルパクラスを使用しています。
今回Sample1ViewではOpacityを使用した徐々にViewが描画されるフェードイン・フェードアウトを。Sample2ViewではRenderTransformを使用した下から出てくるようなフェードイン・フェードアウトを指定してます。

遷移管理ヘルパクラスの使用する場合の注意点としては、あくまでもViewに対しアニメーションをかけるのでViewに対して初期設定を行うことです。
子要素に対してフェードイン・フェードアウトをかけるのでは無い事に注意して下さい。

今回ViewとViewModelのDataTemplateはApp.xamlに設定してます。ではその設定です。

- App.xaml -

App.xamlにてViewとViewModelの関連をDataTemplateにて定義しています。
MainWindowのContentControlのContentプロパティにバインドされているMainWindowViewModelのWorkspaceプロパティにViewModelが設定されるとViewが起動するわけです。

では最後に遷移感知ヘルパクラスです。

- TransitionHelper.cs -

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
using System.Windows.Media.Animation;
using FadeSample.ViewModel;

namespace FadeSample.Helper
{
    /// <summary>
    /// View遷移ヘルパクラス
    /// </summary>
    public static class TransitionHelper
    {
        #region Fields

        /// <summary>
        /// View - ViewModel保持用
        /// </summary>
        private static Dictionary<ViewModelBase, FrameworkElement> targets =
            new Dictionary<ViewModelBase, FrameworkElement>();

        /// <summary>
        /// 遷移ヘルパアタッチ用添付プロパティ
        /// </summary>
        public static readonly DependencyProperty AttachProperty =
            DependencyProperty.RegisterAttached("Attach", typeof(bool), typeof(TransitionHelper),
            new PropertyMetadata(false,new PropertyChangedCallback(AttachPropertyChangedCallback)));

        /// <summary>
        /// 起動時アニメーションリソース名
        /// </summary>
        public static readonly DependencyProperty LoadAnimationNameProperty =
            DependencyProperty.RegisterAttached("LoadAnimationName", typeof(string), typeof(TransitionHelper));

        /// <summary>
        /// 終了時アニメーションリソース名
        /// </summary>
        public static readonly DependencyProperty CloseAnimationNameProperty =
            DependencyProperty.RegisterAttached("CloseAnimationName", typeof(string), typeof(TransitionHelper));

        /// <summary>
        /// 起動時アニメーション
        /// </summary>
        public static readonly DependencyProperty LoadStoryboardProperty =
            DependencyProperty.RegisterAttached("LoadStoryboard", typeof(Storyboard), typeof(TransitionHelper));

        /// <summary>
        /// 終了時アニメーション
        /// </summary>
        public static readonly DependencyProperty CloseStoryboardProperty =
            DependencyProperty.RegisterAttached("CloseStoryboard", typeof(Storyboard), typeof(TransitionHelper));

        #endregion

        #region Metadata Callback Method

        /// <summary>
        /// AttachProperty変更時コールバック
        /// </summary>
        private static void AttachPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement target = (FrameworkElement)d;

            //デザインモード時は遷移ヘルパ機能を使用しない
            if (DesignerProperties.GetIsInDesignMode(target)) return;

            target.DataContextChanged += target_DataContextChanged;
            target.Loaded += target_Loaded;
        }

        #endregion

        #region EventHandlers

        /// <summary>
        /// ViewModel設定時
        /// </summary>
        private static void target_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement target = (FrameworkElement)sender;
            target.DataContextChanged -= target_DataContextChanged;

            ViewModelBase viewModel = target.DataContext as ViewModelBase;
            if (viewModel == null) throw new ApplicationException("View遷移にはViewModelが必要です。");
            viewModel.ViewClose += viewModel_ViewClose;

            targets.Add(viewModel, target);
        }

        /// <summary>
        /// View開始時
        /// </summary>
        private static void target_Loaded(object sender, RoutedEventArgs e)
        {
            FrameworkElement target = (FrameworkElement)sender;
            target.Loaded -= target_Loaded;

            Storyboard loadStoryboard = GetLoadStoryboard(target);
            if (loadStoryboard == null)
            {
                loadStoryboard = GetLoadStoryboardByName(target);
            }

            if (loadStoryboard != null)
                target.BeginStoryboard(loadStoryboard);
        }

        /// <summary>
        /// ViewModel終了時
        /// </summary>
        private static void viewModel_ViewClose(object sender, TransitionEventArgs e)
        {
            ViewModelBase viewModel = (ViewModelBase)sender;
            viewModel.ViewClose -= viewModel_ViewClose;
            FrameworkElement target = targets[viewModel];

            Storyboard closeStoryboard = GetCloseStoryboard(target);
            if (closeStoryboard == null)
            {
                closeStoryboard = GetCloseStoryboardByName(target);
            }

            if (closeStoryboard != null)
            {
                closeStoryboard.Completed += (obj, args) =>
                {
                    viewModel.OnRequestClose(e.TransitionViewModel);
                };

                target.BeginStoryboard(closeStoryboard);
            }
            else
            {
                viewModel.OnRequestClose(e.TransitionViewModel);
            }

            targets.Remove(viewModel);
        }

        #endregion

        #region Attached Method

        public static bool GetAttach(DependencyObject obj)
        {
            return (bool)obj.GetValue(AttachProperty);
        }
        public static void SetAttach(DependencyObject obj, bool value)
        {
            obj.SetValue(AttachProperty, value);
        }

        public static string GetLoadAnimationName(DependencyObject obj)
        {
            return (string)obj.GetValue(LoadAnimationNameProperty);
        }
        public static void SetLoadAnimationName(DependencyObject obj, string value)
        {
            obj.SetValue(LoadAnimationNameProperty, value);
        }

        public static string GetCloseAnimationName(DependencyObject obj)
        {
            return (string)obj.GetValue(CloseAnimationNameProperty);
        }
        public static void SetCloseAnimationName(DependencyObject obj, string value)
        {
            obj.SetValue(CloseAnimationNameProperty, value);
        }

        public static Storyboard GetLoadStoryboard(DependencyObject obj)
        {
            return (Storyboard)obj.GetValue(LoadStoryboardProperty);
        }
        public static void SetLoadStoryboard(DependencyObject obj, Storyboard value)
        {
            obj.SetValue(LoadStoryboardProperty, value);
        }

        public static Storyboard GetCloseStoryboard(DependencyObject obj)
        {
            return (Storyboard)obj.GetValue(CloseStoryboardProperty);
        }
        public static void SetCloseStoryboard(DependencyObject obj, Storyboard value)
        {
            obj.SetValue(CloseStoryboardProperty, value);
        }

        #endregion

        #region Private Methods

        /// <summary>
        /// Load時アニメーション取得
        /// </summary>
        private static Storyboard GetLoadStoryboardByName(FrameworkElement target)
        {
            Storyboard result = (Storyboard)target.Resources[GetLoadAnimationName(target)];
            return result;
        }

        /// <summary>
        /// Close時アニメーション取得
        /// </summary>
        private static Storyboard GetCloseStoryboardByName(FrameworkElement target)
        {
            Storyboard result = (Storyboard)target.Resources[GetCloseAnimationName(target)];
            return result;
        }

        #endregion
    }
}

ちょっと長いコードですがひとつづつ説明します。
まずView側のXAMLにてアニメーションを設定する添付プロパティを実装します。

AttachProperty
LoadAnimationNameProperty
CloseAnimationNameProperty
LoadStoryboardProperty
CloseStoryboardProperty

AttachPropertyは、View側よりフェードイン・フェードアウトが設定される事を感知し、View（UserControl）のイベントをアタッチします。アタッチポイントは、添付プロパティのメタデータのPropertyChangedCallback内で行います。
PropertyChangedCallback内では以下のイベントアタッチを行います。

ViewのDataContextChangedイベント
ViiewのLoadedイベント

DataContextChangedイベントは、DataTemplateによってViewのDataContextプロパティに設定されたViewModelインスタンスを取得する為です。
Loadedイベントは、Viewのフェードインに使用します。
あとの添付プロパティはXAMLより設定される各アニメーション指定用の添付プロパティです。

まずはじめに、MainWindowViewModelのWorkspaceプロパティにViewModelが設定されると、ViewのDataContextChangeイベントが呼ばれます。
そのViewのDataContextChangedイベントハンドラ内で、ViewのDataContextに設定されているViewModelを取得し、ViewModelのViewCloseイベントをアタッチします。
ViewCloseイベントハンドラではViewのフェードアウトを実行し、ViewModelのOnRequestCloseメソッドをコールし、ViewModelを管理しているMainWindowViewModelへ終了通知を伝えます。
また、ViewCloseイベントハンドラないにてViewのアニメーションを実行する為にViewインスタンスが必要になるので、ViewModelをキーとしたコレクションに一時保持しておきます。

次にViewの起動時でLoadedイベントが呼ばれます。
ViewのLoadedイベントハンドラ内にてフェードイン用のアニメーションを実行し、Viewが無事フェードインを行いながら起動します。

Viewでボタンがクリックされると、ViewModelに実装しているコマンドが呼ばれ、ViewCloseイベントが呼ばれます。
その呼ばれたViewCloseイベントのイベントハンドラないにて、一時保持していたコレクションよりViewインスタンスを取得し、フェードアウトを実行します。
ここでフェードアウトで使用しているStoryboardのCompletedイベントにてViewModelのOnRequestCloseメソッドを実行することにより、ViewModelがRequestCloseイベントを発行し、そのイベントをアタッチしているMainWindowViewModelのイベントハンドラが呼ばれることによってViewが終了するようになります。
これで一連の流れは終了です。

遷移感知ヘルパクラスはViewとViewModelにドップリ依存していますが、この中間ヘルパクラスを使用することによってViewとViewModelの不必要な依存を無くすことが出来ます。
また、ViewModel側もViewCloseイベント発行用のCloseメソッドをコールすればViewを遷移させることが出来るため、よけいな実装を行う必要がなくなります。

今回の実装はいくつかまだ足りない部分がありますが、とりあえずの実装の形にはなったかなと思います。
添付プロパティを使用したヘルパクラスの実装はいくらでも出来るので、アプリケーションの構築に合わせたものを実装することも可能です。
アニメーションは画像では伝えることが出来ないので添付画像は載せていません。
興味のある方は是非実装して試してみてください。

今回の感想として、ヘルパクラスを実装してみた感じ、MVVMパターンではViewとViewModelの橋渡しをするヘルパクラスが多々必要になってくるのかなと思いました。
フェードイン・フェードアウトのような少しのインタラクションを実現するためにも面倒な実装を強いられますが、それが出来たときのアプリケーションの表現の幅は大きいのではないでしょうか。

今回はMVVMパターンにおけるViewのフェードイン・フェードアウトを実現するためのほんの１例でした。

[WPF] MVVMを使用した場合のViewのフェードアウトの実装方法について

kazuto — Thu, 16 Apr 2009 21:41:00 GMT

MVVMパターンを使用した場合のViewのフェードアウトについて行き詰まってます・・。

最近MSDMマガジンに載っていた「Model-View-ViewModel デザインパターンによる WPF アプリケーション」を参考に、MVVMパターンを使用したアプリケーションを作っています。
MVVMパターンはUIとロジックを切り離すとてもいいパターンだと思うのですが、その疎結合さゆえにView側の操作が柔軟に行えない感じがしています。

現状は参考サイトと同様に、「Window×1」に対して「View×n」という、１つのWindowの中でViewの切り替えを行う画面遷移方式を取っています。
作っているアプリケーションはViewの遷移時にフェードイン・フェードアウトを行わせようと思っているのですが、Viewのフェードアウトの実装部分で行き詰っています。

MVVMパターンは「これがパターンだ！」という物はなく、柔軟に構築できるのだと参考サイトにも書いてありましたが、極力ViewとViewModel間での参照を無くしたいのでViewの表示はViewModelインスタンスをDataTemplateにて表示しています。
フェードインに関しては、UserControlを元にViewを作成しているので、UserControlのLoadedイベントをイベントトリガにしてアニメーションを行っているので問題はないのですが、Viewを閉じる（破棄）する際のフェードアウトが上手く作れません。
Unloadedイベントはフェードアウトのイベントトリガとして使用できない（既に要素ツリーから要素が削除されている為）ので、何をトリガとしてフェードアウトを行わせれば良いのか・・・・。
そもそもWPFでのフェードアウトの鉄板的なトリガを自分が分かってないだけなのかな？

参考サイトを例にとって例をあげると、Viewの起動・終了（実際はViewModelを）を管理しているViewModel（MainWindowViewModel）があります。
その管理しているViewModelより起動されたViewは、そのデータとなるViewModelのイベント通知にて管理しているViewModelに終了通知が送られ、ViewModelの破棄が行われ、Viewの終了となります。

例えばログイン画面があり、ユーザーIDとパスワード入力後にOKボタンにて検証を行い、正常の場合はそのままログイン画面が終了し、次画面へ遷移する物があったとします。
この場合、OKボタンをClickするとコマンドバインディングによってViewModelのコマンド処理が走り、ここで認証成功の場合、ViewModelよりイベント通知によって元のViewModelへ終了通知が行われますが、それはViewにとっては分からない部分です。
よってViewModelを管理しているViewModelも削除されるViewに対し終了通知を行えないのです。
一応、プロパティトリガの機構を使用して無理やりフェードアウトの実装は行えますが、とても汎用的ではい物で、ましてや開発現場などでは混乱を招く物でしかない実装は一応出来ました。

その実装方法と言うと、

- 事前実装 -
１、ViewModel側よりViewへの終了通知用の何かしらのプロパティ（プロパティトリガで使用される）をViewとViewModelでバインドさせておく
２、ViewModel側でViewのフェードアウトアニメーションが終了した場合の終了通知を感知する為の、何かしらのプロパティをViewとViewModelでバインドしておき、Viewよりそのプロパティが変更された場合のプロパティ変更後イベントをViewModel側で実装しておく

- 処理順序 -
１、ViewのOKボタンクリック時に呼ばれるViewModel側のコマンド処理内にて、終了通知用のプロパティを変更し、View側へ通知する
２、View側では1、で変更されたプロパティを元に、プロパティトリガを使用してフェードアウトアニメーションを行い、アニメーション終了時にアニメーション終了後通知用のプロパティを変更し、View側へ通知する
３、ViewModel側で２、で変更されたプロパティのセッター内にてプロパティ変更後のイベントを発行する
４．ViewModelを管理しているViewModelで３、で発行されたイベントのイベントハンドラ内にてViewModelの破棄を行い次画面へ遷移させる

こんな感じです。
実装するととても使いづらく、たまったものじゃありませんでした・・。
そもそもある動作を行わす時に、プロパティ操作で事を運ばすって事がスマートな感じではないし。
MVVMを使用した場合のViewとViewModel間での動作に関わる通知機構で良い実装ってどのように作るのでしょうかね？

もし「俺はこんな感じで実装している」や「MVVMを使用した場合のViewのフェードアウトはこうやるだろ～」みたいな事があれば教えてください。m(_ _)m

[WPF][TIPS] データバインドの最適化

kazuto — Thu, 16 Apr 2009 13:33:00 GMT

WPFのデータバインドで、XAMLで記述する場合の最適化に関する事が下記の書籍に載っていました。

XAMLでのデータバインドでは主に２つの記述方法があります。

・クラス修飾なしのプロパティ識別子指定
・クラス修飾ありのプロパティ識別子指定

「クラス修飾なしのプロパティ識別子指定」とはデータソースのプロパティ名をそのまま指定する方法です。

- クラス修飾なしのプロパティ識別子指定 -

「クラス修飾ありのプロパティ識別子指定」とはデータソース名とプロパティ名を指定する方法です。

- クラス修飾ありのプロパティ識別子指定 -

これら２つの指定方法は同じ結果になりますが、データバインドにおける内部動作が異なります。クラス修飾がない場合は、内部で指定されたプロパティ名をリフレクションを使用し検索にいきます。
WPFではデータバインドが頻繁に使用される事と、リフレクションはオーバーヘッドが大きい事から、クラス修飾ありのプロパティ識別子指定の最適化は効果が大きいのではないでしょうか。

[WPF] WPF入門～コントロール [TextBlock]～

kazuto — Tue, 14 Apr 2009 00:41:00 GMT

今回はTextBlock（System.Windows.Controls.TextBlock）です。
まずはMSDNの説明を見てみましょう。

少量のフローコンテンツを表示する軽量コントロールを提供します。

TextBlockコントロールは少量のフローコンテンツを表示する軽量コントロールと説明されています。
少量のフローコンテンツとはどのようなものでしょうか？まずはTextBlockの簡単な使用例を見てみましょう。

- XAML -

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300">
    <StackPanel>
        <TextBlock>TextBlockによってテキストを表示しています。</TextBlock>
        <TextBlock Text="TextBlockによってテキストを表示しています。" />
    </StackPanel>
</Window>

上記例では「TextBlockによってテキストを表示しています。」という文字列をTextBlockコントロールのコンテンツ構文にて表示している例と、TextBlockコントロールのTextプロパティを使用して表示している例です。
使用例を見る限りでは、TextBlockコントロールのコンテンツプロパティはTextプロパティかと思いますが、TextBlockコントロールのコンテンツプロパティはInlinesプロパティとなっています。
InlinesプロパティはInlineクラス（System.Windows.Documents.Inline）クラスを格納するコレクションクラスであり、このInlineクラスというのがMSDNの説明で書かれている「フローコンテンツ」と呼ばれる要素になっています。
WPFではさまざまなフローコンテンツがあり、すべてInlineクラスを抽象クラスとして実装されています。このさまざまフローコンテンツを使用する事により、柔軟なテキストの表示をTextBlockコントロールで行えるようになります。
ではフローコンテンツを使用してテキストを表示する例を見てみましょう。

- XAML -

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <TextBlock>
        <Bold>これは太字です。</Bold>
        <LineBreak />
        これは<Italic>Italic Font</Italic>です。
        <LineBreak />
    </TextBlock>
</Window>

上記例では改行を表すフローコンテンツのLineBreakクラスと、太字のフォントで表示するフローコンテンツのBoldクラスと、斜体のフォントで表示するフローコンテンツのItalicクラスを使用した例です。
フローコンテンツはそれ単体レベルにてフォントサイズや前景色や背景色など設定する事が出来ます。上記例のコードにフローコンテンツ単位でプロパティを設定した例を見てみましょう。

- XAML -

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <TextBlock>
        <Bold Foreground="Blue" FontSize="40" FontFamily="ＭＳ明朝">これは太字です。</Bold>
        <LineBreak />
        これは<Italic Foreground="Pink" FontSize="25" FontFamily="Tahoma">Italic Font</Italic>です。
        <LineBreak />
    </TextBlock>
</Window>

このように、TextBlockコントロールではフローコンテンツを使用して柔軟なテキストの表示を行うことが出来ます。
フローコンテンツは複数提供されていますので、その詳細はこちらを拝見してください。

TextBlockコントロールはMSDNでの説明でも書かれている通りに、少量のフローコンテンツを表示する為に設計されたコントロールです。
大量のフローコンテンツを使用したり、沢山の改行を行うようような場合にはTextBlockコントロールは向いていません。
そのような場合にはFlowDocumentクラスを使用するとTextBlockコントロールより優れたパフォーマンスが得られます。
また、コントロールラベルや装飾のないプレーンテキストを表示する場合であるならばTextBlockコントロールより少量のリソースで済むLabelコントロールを使用するのも良いでしょう。
TextBlockコントロールはWPFでは使用頻度の高いコントロールですので、是非使用できるようになりましょう。

今回は「TextBlock」コントロールでした。

to be continue・・・

[WPF] WPF入門～コントロール [RepeatButton]～

kazuto — Thu, 02 Apr 2009 01:09:00 GMT

今回はRepeatButton（System.Windows.Controls.RepeatButton）です。
まずはMSDNの説明を見てみましょう。

コントロールが押されてから離されるまで、その Click イベントを繰り返し発生させるコントロール

説明の通り、RepeatButtonコントロールはボタンを押下中に連続してClickイベントを発生させるコントロールです。
まずは実装例を見てみましょう。

- XAML -

- VB -

Class Window1
    Private Sub Down_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Sample_Slider.Value -= 1
    End Sub

    Private Sub Up_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Sample_Slider.Value += 1
    End Sub
End Class

- C# -

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }

    private void Down_Click(object sender, RoutedEventArgs e)
    {
        Sample_Slider.Value--;
    }

    private void Up_Click(object sender, RoutedEventArgs e)
    {
        Sample_Slider.Value++;
    }
}

RepeatButtonにはボタン押下後のClickイベントが発生するまでの時間（ミリ秒単位）を設定するDelayプロパティと、Clickイベントの繰り返し間隔の時間（ミリ秒単位）を設定するIntervalプロパティがあります。
上記例では２つのRepeatButtonにDelayプロパティとIntervalプロパティに１秒の時間を設定しています。簡単にその効果を出すために、Sliderコントロールを配置し、各RepeatButtonのClickイベントハンドラにてSliderコントロールの値を加減しています。実装例の画像では丁度５秒経過した時点でボタン押下を止めた画像です。

RepeatButtonコントロールは連続するClickイベントの特性を活かして、ボリュームコントロールのボタン等に使用される事があります。
実装例からも分かるとおり、とても簡単なコントロールです。

今回は「RepeatButton」コントロールでした。

to be continue・・・

WPF