View-Switching Navigation

Prism5.0のQuickstarts View-Switching NavigationをVS2017でMaterial Design In XAML Toolkitを使って最後までたどり着けるかな?

ソリューション&親プロジェクト作成

  • テンプレート:Prism Unity App(WPF)(QuickstartsではMEFが使われてました…。ここからUnity版を選んでダウンロードしたはずなのですが。とりあえずこのままUnityで続けます)
  • プロジェクト名:ViewSwitchingNavigation
※Prismのテンプレートが見つからない場合は、Hello World(2017版)を参照してテンプレートをインストールしてください。
viewswich010.png

共有コード用プロジェクト追加

  • テンプレート:通常のクラスライブラリ
  • プロジェクト名:ViewSwitchingNavigation.Infrastructure
viewswich020.png

ユーザーコントロール用プロジェクト追加

  • テンプレート:WPFユーザーコントロールライブラリ(.NET Framework)…なんと「Windowsクラシック デスクトップ」の下に。始めたばかりだと言うのにクラシック扱いされてます。
  • プロジェクト名:ViewSwitchingNavigation.Controls
viewswich025.png

モジュール側プロジェクト追加

  • テンプレート:Prism Module(WPF)
  • プロジェクト名:ViewSwitchingNavigation.Calendar,ViewSwitchingNavigation.Contacts,ViewSwitchingNavigation.Emailの3つ(実際に仕事で使う場合は一つだけ作ってテンプレート化した方が楽でしょう。練習兼ねて3回同じこと繰り返します(まだそのつもり段階ですが)
viewswich030.png

NuGetでパッケージ追加

パッケージ管理画面起動

viewswich035.png

MaterialDesignThemesを追加

XAMLのViewを追加しそうなプロジェクトにはチェックを入れる。
viewswich036.png

Prism関連を追加

不要かもしれませんが、ついでに。
viewswich037.png

モジュール側View追加

ViewSwitchingNavigation.CalendarプロジェクトのViewsフォルダにCalendarView.xamlを追加
Prism UserControlのテンプレートを使うとxamlにPrism関連のネームスペースが追加されています。
viewswich040.png

親プロジェクトから他のプロジェクトへ参照追加

ViewSwitchingNavigationプロジェクトの「参照」を右クリックして「参照の追加」を選択。
viewswich060.png

プロジェクトの下のソリューションを選択して一応全てにチェックを入れる(自信なし)。
viewswich050.png

Hello Woldのおさらい

Hello World(2017版)のViewSwitchingNavigation.Calendar版。
これまで順調に進んでいることを確認。
viewswich070.png

親プロジェクトのMainWindow.xamlを修正

タイトル追加、MainNavigationRegionを追加。
ユーザーコントロール(カスタムコントロール?まだ違いが分かりません)が使われていてエラーになる部分はカット。
viewswich080.png

ユーザーコントロールの追加

ViewSwitchingNavigation.ControlsプロジェクトにユーザーコントロールInfoTipToggleButton.xamlを追加。
追加→既存項目でダウンロードしたものそのまま移植するかコードをコピペ。
新規追加してコードを追加する場合は赤枠あたりに注意。InfoTipToggleButton.xaml.csファイルの修正も忘れずに。
viewswich090.png

親プロジェクトのMainWindow.xamlの上でカットした部分を追加
viewswich100.png

実行してInfoTipToggleButtonの動作確認。
viewswich110.png

Material Designを組み込む

InfoTipToggleButtonが動かない…。画像をButtonに変えたらボタンのクリックイベントが先に走る…。状態が取れない…。標準のボタンでいいような気がして今は無視。
viewswich120.png

親プロジェクトの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="ViewSwitchingNavigation.Views.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"
        mc:Ignorable="d"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:controls="clr-namespace:ViewSwitchingNavigation.Controls;assembly=ViewSwitchingNavigation.Controls"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
        Title="{Binding Title}"
        d:DesignHeight="300" d:DesignWidth="400">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <DockPanel>
        <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
                                    Mode="PrimaryMid" DockPanel.Dock="Top">
            <DockPanel>
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="22">View-Switching Navigation</TextBlock>
                <controls:InfoTipToggleButton DockPanel.Dock="Right">
                    <controls:InfoTipToggleButton.Popup>
                        <Popup>
                            <StackPanel MinWidth="100" MinHeight="24" MaxWidth="500" Background="White">
                                <TextBlock TextWrapping="Wrap" Style="{StaticResource MaterialDesignBody2TextBlock}" Padding="6">This Navigation Quickstart demonstrates navigation within Prism's Regions to show new views, move between existing views, and how to pass context to views during navigaton.</TextBlock>
                            </StackPanel>
                        </Popup>
                    </controls:InfoTipToggleButton.Popup>
                </controls:InfoTipToggleButton>
            </DockPanel>
        </materialDesign:ColorZone>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Grid.Row="2" MinWidth="250" Margin="5,0,0,5">
                <ItemsControl x:Name="NavigationItemsControl" prism:RegionManager.RegionName="MainNavigationRegion" Grid.Column="0" Margin="5" Padding="5" />
            </Border>
            <ContentControl prism:RegionManager.RegionName="MainContentRegion" 
                Grid.Column="1" Grid.Row="2" Margin="5,0,5,5" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

        </Grid>
    </DockPanel>
</Window>
OK キャンセル 確認 その他