C#,WPF,メモ,開発環境

よく使う初期環境 のMaterialDesignThemes 3.1.3 対応版

  • ControlzEx 4.3.2
  • LivetCask 3.2.3.1
  • LivetCask.Behaviors 3.2.3.1
  • LivetCask.Collections 3.2.3.1
  • LivetCask.Converters 3.2.3.1
  • LivetCask.Core 3.2.3.1
  • LivetCask.EventListeners 3.2.3.1
  • LivetCask.Messaging 3.2.3.1
  • LivetCask.Mvvm 3.2.3.1
  • MahApps.Metro 2.2.0
  • MaterialDesignColors 1.2.6
  • MaterialDesignThemes 3.1.3
  • MaterialDesignThemes.MahApps 0.1.4
  • Microsoft.Xaml.Behaviors.Wpf 1.1.19

C#,WPF

MainView.xaml

<Controls:MetroWindow 
        x:Class="WpfApp12.View.MainView"
        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"
        xmlns:local="clr-namespace:WpfApp12.View"
        mc:Ignorable="d"
        
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:ei="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:vm="clr-namespace:WpfApp12.ViewModel"
        
        xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
        Dialog:DialogParticipation.Register="{Binding}"
        
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        ResizeMode="CanResizeWithGrip"
        WindowStartupLocation="CenterScreen"
        GlowBrush="{DynamicResource AccentColorBrush}"
        WindowTransitionsEnabled="False"
        TitleCharacterCasing="Normal"
        ShowIconOnTitleBar="True"
        
        Title="MainView" Height="450" Width="800">

    <Window.DataContext>
        <vm:MainViewModel>
            <vm:MainViewModel.MahAppsDialogCoordinator>
                <Dialog:DialogCoordinator/>
            </vm:MainViewModel.MahAppsDialogCoordinator>
        </vm:MainViewModel>
    </Window.DataContext>

    <Grid>

        <Button Content="MessageBox" Margin="10,10,657,359" Height="Auto">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ShowMessageBox" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        
        <Button Content="Progress" Margin="155,10,512,359" Height="Auto">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ShowProgress" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

    </Grid>
</Controls:MetroWindow>

C#,WPF,ソフトウェア開発

初期のMainWindow.xaml

<Controls:MetroWindow x:Class="WpfApp6.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp6"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">

C#,WPF,ソフトウェア開発

Material Design In XAML ToolkitとMahApps.Metroを用いたマテリアルデザイン風Window の続き)

Material Design In XAML Toolkitのデザイン設定は、モードとカラーがある

●モード
( Light / Dark )

・App.xaml

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />

・プログラム内から動的変更

// Lightの場合はfalse、Darkの場合はtrue
new PaletteHelper().SetLightDark(true);

●カラー
( Amber / Blue / BlueGrey / Brown / Cyan / DeepOrange / DeepPurple /
Green / Grey / Indigo / LightBlue / LightGreen / Lime / Orange / Pink /
Purple / Red / Teal / Yellow )

・App.xaml

<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />

・プログラム内から動的変更

new PaletteHelper().ReplacePrimaryColor("Amber");
new PaletteHelper().ReplaceAccentColor("LightGreen");

なお、名前の一覧は MaterialDesignColors.SwatchesProvider にて取得可能。

MahApps.Metroにもモードとカラーがある

●モード
( BaseLight / BaseDark )
●カラー
( Red / Green / Blue / Purple / Orange / Lime / Emerald / Teal / Cyan /
Cobalt / Indigo / Violet / Pink / Magenta / Crimson / Amber / Yellow /
Brown / Olive / Steel / Mauve / Taupe / Sienna )

        public MainWindow()
        {
            InitializeComponent();

            ThemeManager.ChangeAppStyle(
                Application.Current,
                ThemeManager.GetAccent("Sienna"),
                ThemeManager.GetAppTheme("BaseLight")
                );
        }

MahApps.Metroのスタイルの詳細はこちらを参照

C#,WPF,ソフトウェア開発

Material Design In XAML Toolkitを用いることで、簡単にWindowをマテリアルデザイン風にすることができる。
さらにMahApps.Metroを導入することで、細かいカスタマイズや拡張コントロールを利用できる。