読者です 読者をやめる 読者になる 読者になる

VB.NETで作る!

VB.NETに関するあれこれ

WPFデザインOSS Modern UI

2014/1/10 追記あり

Modern UI for WPF

f:id:mk3008net:20141022221843p:plain

見た目、挙動(ページ遷移可)ともにいい感じです。

MVVMで利用できるかは未確認。まぁ大丈夫でしょう。

Modern UI Icons

アイコンだけ使いたいならこっちの方がいいかも。XAMLファイルで提供されています。なおライセンスはCC。

2015/1/4 追記

Modern UI for WPF application by example ( NavigationService – MVVM ) | typeof(saramgsilva) こちらのサンプルが参考になります(といってもまだ理解しきれていない)。

後日まとめるとして、注意点

  • 初期設定が必要。C#はテンプレートがあるようですが、VB.NETはテンプレはないので「My first Modern UI app (manually)」を参考にして作業する。
    ちょっと手間ですが躓くところなし。
  • 起動はStartUpURIで指定しなければならない。StartUpイベントでModernWindowクラスをインスタンスしてShowとしてはダメらしい。
    ちなみに手動でShowをしてしまうと中身が何もないWindowだけが立ち上がってしまう。理由は不明。
    /// こうすればいいのかな…
    var wnd = new ModernWindow {
      Style = (Style)App.Current.Resources["BlankWindow"],
      Content = null    // your content here
    };
    wnd.Show();
  • 画面遷移(ページ遷移)は「xaml」ファイルを指定する。遷移したxamlではLocatorクラスを通じてDataContextのVMを埋める。具体的にはコレ「DataContext="{Binding StepsViewModel, Source={StaticResource Locator}}"」ね。
    <UserControl x:Class="ModernUIForWPFSample.Navigation.Views.StepsControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 d:DesignHeight="300"
                 d:DesignWidth="600"
                 DataContext="{Binding StepsViewModel, Source={StaticResource Locator}}"
                 mc:Ignorable="d">
    </UserControl>
  • Locater(ViewModelLocator)はApp.xamlで指定している。具体的にはコレ「<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:ModernUIForWPFSample.Navigation.ViewModel" />」ね。
    <Application x:Class="ModernUIForWPFSample.DefaultModernUI.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
      <Application.Resources>
        <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
            <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
          </ResourceDictionary.MergedDictionaries>
          <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:ModernUIForWPFSample.Navigation.ViewModel" />
        </ResourceDictionary>
      </Application.Resources>
    </Application>
  • ViewModelLocator にStepsViewModelプロパティがある。サンプルでは以下のコードで表現。

ServiceLocator.Current.GetInstance<StepsViewModel>();

  • ViewModelLocator に画面遷移を集約してやればよさそうなことはわかる。が、引数を渡したい場合もある。どうやってやるのかは未確認
    • メニュー遷移=空画面=引数なし=固定でいい=ViewModelLocator経由で遷移
    • 詳細遷移=親画面で選択された情報を引き継ぐ必要ある=引数あり=現在画面のコマンドで画面遷移?(Locaterを使わない)

2015/1/4 追記

KeyboardNavigation.TabNavigationが動作しない気がしたので利用はあきらめるという結論を下そう。

. .