晴耕雨プログラミング

MaterialDesignを適用する

NuGet

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>

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

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

xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

ViewModelを作成

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の表示場所を追加

    <Grid>
        <TextBlock Text="{Binding Message}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />            
    </Grid>

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

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

表示を確認

Link

WPF

• WPFの概要
• Getting Started (WPF)

Prism Library

• ソース
• ドキュメント
• サンプル
• MSDN

テーマ

• Material Design In XAML Toolkit
• MahApps.Metro