初めてのWPF 3日目

2018/12/21 WPF::Material Design

MaterialDesignを適用する

WPF+Prism+MaterialDesign

NuGet

MaterialDesignThemesとMaterialDesignColors

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

MainWindow.xaml

<Window x:Class="TreasurerHelper.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="400" Width="650"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    <DockPanel>
        <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
                                    Mode="PrimaryMid" DockPanel.Dock="Top">
            <DockPanel>
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="22" Text="{Binding Title}"></TextBlock>
            </DockPanel>
        </materialDesign:ColorZone>
        <Grid>
            <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        </Grid>
    </DockPanel>
</Window>

Module側のView

…
         prism:ViewModelLocator.AutoWireViewModel="True"
         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<Grid  ShowGridLines="True">
    <materialDesign:Card Padding="32" Margin="16">
        <TextBlock Text="{Binding Message}" Style="{DynamicResource MaterialDesignTitleTextBlock}"></TextBlock>
    </materialDesign:Card>
</Grid>

初めてのWPF 2日目

2018/12/01 WPF::Prism

PrismモジュールにViewを追加する。

追加するViewのテンプレートはユーザーコントロール。
CashCalculator010.png

追加したViewにネームスペース等追加

ネームスペース http://prismlibrary.com/ を追加してViewModelLocator.AutoWireViewModelをTrueに。
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

ViewModelを作成

クラスを追加。publicに変更。
using Prism.Mvvm; を追加
BindableBaseを継承
モデルの中身はテンプレートでついてきたViewAViewModelを流用。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Prism.Mvvm;

namespace CashCalculator.ViewModels
{
    public class CashCalculatorViewModel : BindableBase
    {
        private string _message;
        public string Message
        {
            get { return _message; }
            set { SetProperty(ref _message, value); }
        }

        public CashCalculatorViewModel()
        {
            Message = "CashCalculator View from your Prism Module";
        }
    }
}

ViewにMessageの表示場所を追加

これもViewAのテキストボックスを流用
    <Grid>
        <TextBlock Text="{Binding Message}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />            
    </Grid>

リージョンに表示するViewを切り替える

regionManager.RegisterViewWithRegion("ContentRegion", typeof(Views.CashCalculator));

表示を確認

CashCalculator020.png

初めてのWPF

PrismとMaterialDesignを使って初めてのWPFアプリを作成中。
機能はエクセル使えよ!(実際に現在はエクセル使用中)なものですが、勉強のため。
独学でどこまでいけるでしょうか。
チュートリアル放置していた間に-Prismのバージョン上がってやる気が失せたので仕切りなおし。
1日目Prism Blank App(WPF)とPrism Module(WPF)を使ってプロジェクトを作成
2日目ModuleにViewを追加しApp側に表示
3日目MaterialDesign(MaterialDesignThemesとMaterialDesignColors)を適用する
4日目モジュール間の切り替えを行うメインメニュー追加
5日目モジュール間の切り替えをBasicRegionNavigationに変更
メインメニューをMaterialDesignのDrawerに変更
6日目モジュール間の切り替えをMenuServiceに変更
ItemTemplateを使ってViewの重複を除く
7日目トップページにMaterialDesignのCardを使ってモジュール一覧表示
8日目画像の表示
親ViewのViewModelのコマンドをモジュールのViewから呼び出す
9日目MaterialDesignToolBarでツールバーをつくる
DelegateCommandでボタンの活性/非活性を制御する
10日目PrismのCustomPopupを使う
CustomPopupの見た目をMaterialDesignのDialogっぽくする
11日目NavigationCallbackを使ってMainWindowにモジュールのタイトル追加
12日目MVVM1回目
DomainObjectを継承したModelのListをDataGridにバインド
13日目MVVM2回目
行合計(subtotal)の総合計(grandtotal)の取り方が分からない
結局決算に間に合わず中断中。GitHubに上げていますが初心者のためのチュートリアルではなく、WPF初心者が試行錯誤中のものですのでとんでもないバグが潜んでいるかも知れません。

Prism 7.1

2018/11/30 WPF::Prism
久しぶりにPrismでアプリ作ろうかと思って作り始めたら、なんか様子が違う。
Prismのテンプレートが勝手にアップデートしていてBootstrapper.csが消えている…。
Bootstrapperのある古いバージョンはこちら

親プロジェクト(アプリ本体)の作成

TreasurerHelper010.png

Prism Blank App(WPF)を選択したら、DIコンテナの選択画面が。
Unityを選択してプロジェクトを作成。
TreasurerHelper020.png

子プロジェクト(モジュール)の追加

上でできたソリューションに「追加」→「新しいプロジェクト」でPrism Module(WPF)テンプレートを選択。
TreasurerHelper030.png


追加後のソリューション。TreasurerHelperが親、CashCalculatorが子。
TreasurerHelper040.png

親から子への参照追加

「追加」→「参照」
TreasurerHelper050.png

App.xaml.csに下記を追加

protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
{
   // Addするモジュール名は作成したものに変更
   moduleCatalog.AddModule<CashCalculator.CashCalculatorModule>();
}

作成したモジュールの○○Module.csのOnInitializedを編集

public void OnInitialized(IContainerProvider containerProvider)
{
    var regionManager = containerProvider.Resolve<IRegionManager>();
    regionManager.RegisterViewWithRegion("ContentRegion", typeof(ViewA)); // View名は作成したものに変更のこと

}

親プロジェクトを実行

子プロジェクトのViewA.xamlが表示されることを確認。
TreasurerHelper060.png


続きはこちら

What’s New in Prism 7.1

こちらのページを斜め読み。
誤訳してたらすみません。

コンテナについて

MEFはサポート止めました。Autofacは今回が最後のサポートになる予定です。
Unityは新しいメンテナンス担当者によって完全に書き換えられのでPrism 6.X系からPrism 7.1にアップグレードする場合はUnityへの参照を削除し入れなおす必要があります。

IoCの一本化

Prism.IoC ネームスペースが追加され、依存性の注入を抽象化した。
コンテナを直接利用するのではなくPrismによって提供されるIContainerRegistry(タイプを登録する)とIContainerProvider(サービスを解決する)だけを使ってください。
それぞれのGetContainer()拡張メソッドを使えば実際のDIコンテナにアクセスすることも可能です。

Navigationの一本化

Prism.NavigationネームスペースがPrism.Core NuGet packageに含まれているがWPFでは未対応。WPFからも同じAPIを使えるようにするつもり。

Moduleの一本化

Prism.Modularity APIがWPF、Xamarin.Forms、Windows (UWP)間で共通化された。
それに伴いInitialize() を無くした。
新たに2つのインターフェイスを追加したので書き換えてください。
public interface IModule 
{ 
    void RegisterTypes(IContainerRegistry containerRegistry); 
    void OnInitialized(IContainerProvider containerProvider); 
} 

Prism.WPF

初期のコードを減らす為、PrismApplication base classを導入し Bootstrapper をObsoleteにしたが、Bootstrapperは今後も無くす予定は無い。
NavigationJournalにopt-outの機能が追加された。navigationに加えたくないViewがあればIJournalAwareを実装し、PersistInHistoryにfalseをセットする。

Prism.FormsとPrism.Windowsは割愛。
OK キャンセル 確認 その他