提督業プラグインを作ってみよう（３）デザインをカッコよくしよう
1.リソースディクショナリを追加しよう
プロジェクトのViewsフォルダにリソースディクショナリを追加して、
ここの真ん中あたりにある
画面系プラグインのデザイナ表示に必要な Stylesをコピーしましょう。
ここではファイル名をKanColleResource.xamlとしています。
- KanColleResource.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.Button.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.CheckBox.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.Expander.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.FocusVisualStyle.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.PasswordBox.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.RadioButton.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.Scrollbar.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Controls.Tooltip.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Styles/Icons.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Themes/Dark.xaml" /> <ResourceDictionary Source="pack://application:,,,/MetroRadiance;component/Themes/Accents/Purple.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.HorizontalFlatListBox.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.ListView.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.PinButton.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.TabControl.xaml" /> <ResourceDictionary Source="pack://application:,,,/KanColleViewer.Controls;component/Styles/Controls.Text.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
2.WindowクラスをMetroWindowクラスに差し替えてデザインを変えよう
上のほうにキャプションバーをつけて、ピン止めボタンと最小化ボタンをつけました。 情報表示ユーザーコントロールをスクロールできるようにするため、ContentをStackPanelではなく、DockPanelにしてあります。
変更分を以下に記載します
- InformationWindow.xaml
<metro:MetroWindow x:Class="プロジェクト名.Views.InformationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:metro="http://schemes.grabacr.net/winfx/2014/controls" 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:プロジェクト名.Views" mc:Ignorable="d" Background="{DynamicResource ThemeBrushKey}" Foreground="{DynamicResource ActiveForegroundBrushKey}" Title="InformationWindow" Height="600" Width="400"> <metro:MetroWindow.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="KanColleResource.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </metro:MetroWindow.Resources> <DockPanel> <!-- キャプションバー ここから --> <DockPanel metro:MetroWindow.IsCaptionBar="True" DockPanel.Dock="Top"> <Border DockPanel.Dock="Bottom" Height="4" /> <StackPanel Orientation="Horizontal" DockPanel.Dock="Right"> <metro:CaptionButton Style="{DynamicResource PinButtonStyleKey}" VerticalAlignment="Top" IsChecked="{Binding Topmost, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:MetroWindow}}}" /> <metro:CaptionButton WindowAction="Minimize" VerticalAlignment="Top" > <Path Style="{DynamicResource MinimizeIconKey}"/> </metro:CaptionButton> </StackPanel> <TextBlock Text="艦隊情報 - プラグインテスト" HorizontalAlignment="Left" Style="{DynamicResource CaptionTextStyleKey}" Margin="2,0,8,0" /> </DockPanel> <!-- キャプションバー ここまで --> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <local:Information/> </ScrollViewer> </DockPanel> </metro:MetroWindow>
- InformationWindow.xaml.cs
//継承元は削除する public partial class InformationWindow { public InformationWindow() { InitializeComponent(); } }
- Information.xaml
<UserControl x:Class="プロジェクト名.Views.Information" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:プロジェクト名.ViewModels" mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="400"> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="KanColleResource.xaml"/> </ResourceDictionary.MergedDictionaries> <!-- 艦隊データテンプレート --> <DataTemplate x:Key="Fleet" DataType="{x:Type vm:ShipViewModel}"> <StackPanel Orientation="Horizontal" DataContext="{Binding Ship}"> <TextBlock TextWrapping="Wrap"> <Run Text="{Binding Info.Name, Mode=OneWay}"/> <Run Text="{Binding Level, Mode=OneWay, StringFormat=Lv.\{0:D\}}" /> <Run Text="{Binding Condition, Mode=OneWay, StringFormat=(\{0:D\})}"/> </TextBlock> </StackPanel> </DataTemplate> </ResourceDictionary> </UserControl.Resources> <StackPanel> <ItemsControl ItemsSource="{Binding Fleets}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel> <Border BorderBrush="{DynamicResource ActiveForegroundBrushKey}" BorderThickness="2"> <TextBlock> <Run Text="{Binding Name}" /> </TextBlock> </Border> <ItemsControl ItemsSource="{Binding Ships}" ItemTemplate="{DynamicResource Fleet}" > </ItemsControl> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </UserControl>
3.表示を確認しよう
ビルドして出来たdllをKancolleViewerのPluginsフォルダにコピーしてexeを起動してみると、 下の画像のような画面が出るようになります。
KancolleViewerのデザインに合わせた色合いでとても見やすいですね。ついでに閉じるボタンがなくなってKancolleViewer本体を消さない限りウインドウが消えなくなって、ピン止めボタンで最前面に固定できるようになりました。
起動するたびにウインドウサイズや位置などがリセットされてしまうので、次回はそれらをファイルに保存して使用できるようにします。
