WPF で画面遷移する方法 2

(2017/05/18 22:08:43 created.)

(2017/05/24 15:10:13 modified.)

前回までで画面遷移することはできましたが、View のインスタンスを誰も保持していなかったため、同じ画面に戻ってきたつもりでも、再びコンストラクタから再構築された別のインスタンスになってしまっていたため、チェックボックスの状態やスクロールバーの状態はすべて初期化されてしまうといった現象が起こってしまいました。今回は View のインスタンスを保持することでこのような現象を回避してみたいと思います。

というわけでさっそく View のインスタンスを App クラスで保持します。

App.xaml.cs

```
namespace WpfApplication1
```
```
{
```
```
    using System.Collections.Generic;
```
```
    using System.Windows;
```
```
    using System.Windows.Controls;
```
```
    using WpfApplication1.ViewModels;
```
```
    using WpfApplication1.Views;
```
```
 
```
```
    /// <summary>
```

    /// App.xaml の相互作用ロジック

```
    /// </summary>
```

    public partial class App : Application

```
    {
```

        protected override void OnStartup(StartupEventArgs e)

```
        {
```
```
            base.OnStartup(e);
```
```
 
```
```
            Instance = this;
```
```
 
```

            var w = new MainView() { DataContext = new MainViewModel() };

```
            w.Show();
```
```
        }
```
```
 
```

        private Dictionary<string, Control> _viewDictionary = new Dictionary<string, Control>()

```
        {
```

            { "Content01", new Content01View() { DataContext = new Content01ViewModel() } },

            { "Content02", new Content02View() { DataContext = new Content02ViewModel() } },

            { "Content03", new Content03View() { DataContext = new Content03ViewModel() } },

```
        };
```
```
 
```

        public static App Instance { get; private set; }

```
 
```

        public Control GetView(string key)

```
        {
```
```
            Control control;
```

            return this._viewDictionary.TryGetValue(key, out control) ? control : null;

```
        }
```
```
    }
```
```
}
```

View のインスタンスを扱うので同じく View で保持したくなりますが、これらに対する DataContext である ViewModel のインスタンスも登場してしまうため、必然的に View と ViewModel の両方を知り得る App クラスが保持することになります。

View は ViewModel に依存するが、そのインスタンスを知る必要はない、ということです。

保持した情報を外部から取得できるように GetView() メソッドを定義しています。このメソッドを利用してコンテンツを切り替えられるように TransitionPanel の内部実装を少し変更します。

TransitionPanel.xaml.cs

public static readonly DependencyProperty ContentSelectorProperty = DependencyProperty.Register("ContentSelector", typeof(string), typeof(TransitionPanel), new PropertyMetadata(null, OnContentSelectorPropertyChanged));

```
 
```
```
public string ContentSelector
```
```
{
```

    get { return (string)GetValue(ContentSelectorProperty); }

    set { SetValue(ContentSelectorProperty, value); }

```
}
```
```
 
```

private static void OnContentSelectorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

```
{
```
```
    var control = d as TransitionPanel;
```

    control.Content = App.Instance.GetView(control.ContentSelector);

```
}
```

変更箇所はただ一つ、ContentSelector 依存関係プロパティを追加定義します。ContentSelector プロパティ変更イベントハンドラで先ほど App クラスで定義した GetView() メソッドを使い、自身のコンテンツを自分で変更するようにします。

このように変更したため、コンテンツを指定するにはコンテンツの名前を渡すようにする必要があるため、MainViewModel と MainView を次のように変更します。

MainViewModel.cs

```
namespace WpfApplication1.ViewModels
```
```
{
```
```
    //using System.Collections.Generic;
```
```
    using YKToolkit.Bindings;
```
```
 
```

    internal class MainViewModel : NotificationObject

```
    {
```

        //private List _viewModels = new List()

```
        //{
```
```
        //    new Content01ViewModel(),
```
```
        //    new Content02ViewModel(),
```
```
        //    new Content03ViewModel(),
```
```
        //};
```
```
        //public List ViewModels
```
```
        //{
```

        //    get { return this._viewModels; }

```
        //}
```
```
 
```

        private DelegateCommand _changeContentCommand;

        public DelegateCommand ChangeContentCommand

```
        {
```
```
            get
```
```
            {
```

                return this._changeContentCommand ?? (this._changeContentCommand = new DelegateCommand(

```
                p =>
```
```
                {
```

                    this.ContentName = p as string;

```
                }));
```
```
            }
```
```
        }
```
```
 
```
```
        private string _contentName;
```
```
        public string ContentName
```
```
        {
```

            get { return this._contentName; }

            private set { SetProperty(ref this._contentName, value); }

```
        }
```
```
    }
```
```
}
```

MainView.xaml

<YK:Window x:Class="WpfApplication1.Views.MainView"

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

           xmlns:YK="clr-namespace:YKToolkit.Controls;assembly=YKToolkit.Controls"

           xmlns:vw="clr-namespace:WpfApplication1.Views"

```
           Title="MainView"
```
```
           Width="300" Height="200">
```
```
    <DockPanel>
```

        <UniformGrid DockPanel.Dock="Bottom" Columns="3">

            <Button Grid.Column="0" Content="Content01" Command="{Binding ChangeContentCommand}" CommandParameter="Content01" />

            <Button Grid.Column="1" Content="Content02" Command="{Binding ChangeContentCommand}" CommandParameter="Content02" />

            <Button Grid.Column="2" Content="Content03" Command="{Binding ChangeContentCommand}" CommandParameter="Content03" />

```
        </UniformGrid>
```

        <vw:TransitionPanel ContentSelector="{Binding ContentName}" />

```
    </DockPanel>
```
```
</YK:Window>
```

前回は MainViewModel がコンテンツを切り替える元となる ViewModel を持っていたので MainViewModel が主導権を握っているような印象でしたが、今回は MainViewModel はあくまでも View からの情報を橋渡しするだけで、ContentName に指定されるコンテンツの名前は View から渡されるパラメータを横流しするだけとなっています。ViewModel が View の名前を知り得るはずもないため、あえてこのような作りになります。ただし、ContentName プロパティを変更するかどうかは相変わらず MainViewModel が判定できるので、画面遷移できるかどうかは ViewModel で判断できるようになっています。

このように実装すると、Content01View、Content02View、Content03View のインスタンスは App クラスが保持しているため、コンストラクタは 1 回だけしか処理されなくなります。このことから、画面遷移後も View の表示状態が保持されるようになります。

画面遷移するために UserControl 派生の独自のコントロールを定義して仰々しく実装していましたが、次回は TabControl を触ってみます。

<< 古い記事へ
WPF で画面遷移する方法 1 ...

新しい記事へ >>
WPF で画面遷移する方法 3