1.DashboardSampleの移植
DashboardSample
WPFのサンプルは、Googleで、「WPF Sample Download」と入力して検索するいろいろと表示されます。
その中で見つけたのが、下記のサイトのDashboardSampleです。
「Building Dashboards With WPF Elements Part 3: Getting Started」
DashboardSample (クリックすると拡大)下の方のYou can download the Visual Studio 2010 solution of where we are at so far from here.をクリックしますとDashboardSample_Part3.zipのダウンロードが開始されます。
解凍するとDashboardSampleというファイル(ソリューション)が出来ます。
移植
Caliburnという開発者のライブラリ(dll)を使用しますが、これはDashboardView.xamlというZAMLのみが使用可能になっています。
これを汎用化する為に、1.WindowCromeのプロジェクトにWindow3.xamlを作って、DashboardView.xamlのコードを一部修正してコピーしました。
又、DashboardViewModel.csとPropertyChangedBase.csはコピーしました。
Window3.xamlは下記の通りです。116~304行がCopyです。但し、129行目のtxtTitleへの変更や296~299のtxt本日の追加は修正箇所です。
View
<ccl:CustomChromeWindow
x:Class="LivetWPFApplicationChrome1.Views.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
xmlns:ccl="clr-namespace:CustomChromeLibrary;assembly=CustomChromeLibrary"
xmlns:local="clr-namespace:LivetWPFApplicationChrome1"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
xmlns:core="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=
Microsoft.Expression.Interactions"
xmlns:v="clr-namespace:LivetWPFApplicationChrome1.Views"
xmlns:vm="clr-namespace:LivetWPFApplicationChrome1.ViewModels"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d"
d:DesignHeight="714" d:DesignWidth="1035" Background="Black"
Height="714" Width="1035"
Title="Window3" >
<Window.DataContext>
<vm:ViewModel3/>
</Window.DataContext>
<shell:WindowChrome.WindowChrome>
<shell:WindowChrome
ResizeBorderThickness="6"
CaptionHeight="43"
CornerRadius="0,0,0,0"
GlassFrameThickness="0">
</shell:WindowChrome>
</shell:WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary>
<vm:CaptionButtonRectToMarginConverter x:Key=
"CaptionButtonMarginConverter"/>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources\GlassButton.xaml"/>
<ResourceDictionary Source="../Resources\GlassIcon.xaml"/>
<ResourceDictionary Source="/Resources/Styles.xaml"/>
<ResourceDictionary Source="/Resources/Styles2.xaml"/>
<ResourceDictionary Source="/Resources/StylesBG.xaml"/>
<ResourceDictionary Source="/Resources/FilterButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<i:Interaction.Triggers>
<!--WindowのContentRenderedイベントのタイミングでViewModelのInitialize
呼ばれます-->
<i:EventTrigger EventName="ContentRendered">
<l:LivetCallMethodAction MethodTarget="{Binding}" MethodName=
"Initialize"/>
</i:EventTrigger>
<l:InteractionMessageTrigger
MessageKey="MessageKey2" Messenger="{Binding Messenger}">
<l:TransitionInteractionMessageAction
WindowType="{x:Type v:Window2}" Mode="Modal"/>
</l:InteractionMessageTrigger>
<!-- 下記がないと、タスクバーが1つにならない -->
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding Path=Loaded}"
CommandParameter="{Binding Mode=OneTime,
RelativeSource={RelativeSource Mode=
FindAncestor,AncestorType={x:Type Window}}}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Closing">
<i:InvokeCommandAction Command="{Binding Path=Closing}"
CommandParameter="{Binding Mode=OneTime,
RelativeSource={RelativeSource Mode=
FindAncestor,AncestorType={x:Type Window}}}"/>
</i:EventTrigger>
<l:InteractionMessageTrigger MessageKey="Close" Messenger=
"{Binding Messenger}">
<l:WindowInteractionMessageAction/>
</l:InteractionMessageTrigger>
</i:Interaction.Triggers>
<Grid>
<!-- WindowChrome Start -->
<Border Grid.RowSpan="2" BorderThickness="3" BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<!--title bar-->
<Border BorderThickness="3,3,3,1" BorderBrush="Black" Margin=
"{Binding Path=CaptionButtonMargin}">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<!--Window Icon and Title-->
<StackPanel Orientation="Horizontal" Margin="0" VerticalAlignment="Top">
<TextBlock Text="" FontFamily="Calibri" FontWeight="Bold"
FontSize="26" Foreground="Blue" />
</StackPanel>
</Border>
<ccl:CaptionButtons />
<!-- WindowChrome End -->
<Grid Margin="20,0,20,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="649*" />
<ColumnDefinition Width="92*" />
<ColumnDefinition Width="232*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.ColumnSpan="3">
<TextBlock Text="{Binding Path=txtTitle}"
Style="{StaticResource MainTitleStyle}"
HorizontalAlignment="Left" Margin="0,0,0,8" />
<Button Style="{StaticResource FilterButtonStyle}"
Margin="40,0,0,5">
<StackPanel Orientation="Horizontal">
<Border Width="20" Height="20" Background=
"{StaticResource ProductColor1}"
VerticalAlignment="Center" />
<TextBlock Text="{x:Static vm:DashboardViewModel.ProductName1}"
Style="{StaticResource LegendTextStyle}"
VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Button>
<Button Style="{StaticResource FilterButtonStyle}" Margin="40,0,0,5">
<StackPanel Orientation="Horizontal">
<Border Width="20" Height="20" Background=
"{StaticResource ProductColor2}"
VerticalAlignment="Center" />
<TextBlock Text="{x:Static vm:DashboardViewModel.ProductName2}"
Style="{StaticResource LegendTextStyle}" VerticalAlignment=
"Center" Margin="10,0,0,0" />
</StackPanel>
</Button>
<Button Style="{StaticResource FilterButtonStyle}"
Margin="40,0,0,5">
<StackPanel Orientation="Horizontal">
<Border Width="20" Height="20" Background=
"{StaticResource ProductColor3}"
VerticalAlignment="Center" />
<TextBlock Text=
"{x:Static vm:DashboardViewModel.ProductName3}"
Style="{StaticResource LegendTextStyle}"
VerticalAlignment="Center"
Margin="10,0,0,0" />
</StackPanel>
</Button>
</StackPanel>
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="#0F6FC6">
<TextBlock Text="Time Explorer" VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
<Grid Grid.Row="2" SnapsToDevicePixels="True" Margin="0,10,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate=
"{StaticResource GroupBoxHeaderTemplate}"
Content="Product Sales Breakdown" />
<Border CornerRadius="0,0,10,10" Background=
"{StaticResource GroupBoxBackground}" Grid.Row="1">
<Border Margin="10" Background="#009DD9">
<TextBlock Text="Product Breakdown Chart"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</Border>
</Grid>
<Border Grid.Row="3" Background="#10CF9B">
<TextBlock Text="Data Grid" VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
<Border Background="{StaticResource GroupBoxBackground}"
CornerRadius="10,10,0,0" Grid.Column="1" Grid.Row="2"
Margin="10,10,0,0" SnapsToDevicePixels="True" Grid.ColumnSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{StaticResource
GroupBoxHeaderTemplate}" Content="Statistics" />
<Border Grid.Row="1" Margin="10,10,10,20" Background="#0BD0D9">
<TextBlock Text="Country chart" VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
</Grid>
</Border>
<Grid Grid.Column="1" Grid.Row="3" Margin="10,0,0,0" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Background="{StaticResource GroupBoxBackground}"
CornerRadius="0,0,10,10" SnapsToDevicePixels="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Total Sales" Style=
"{StaticResource MainTitleStyle}"
Margin="10,0,20,0" Grid.RowSpan="2" />
<TextBlock Text="From"
Style="{StaticResource SecondaryTitleStyle}"
VerticalAlignment="Bottom" Grid.Column="1"
Margin="0,0,0,2" />
<TextBlock Style="{StaticResource SecondaryTitleStyle}"
VerticalAlignment="Bottom" Grid.Column="2"
Margin="10,0,20,2" />
<TextBlock Text="To" Style=
"{StaticResource SecondaryTitleStyle}"
VerticalAlignment="Bottom" Grid.Row="1" Grid.Column="1"
Margin="0,0,0,2" />
<TextBlock Style="{StaticResource SecondaryTitleStyle}"
VerticalAlignment="Bottom" Grid.Row="1" Grid.Column="2"
Margin="10,0,10,2" />
</StackPanel>
<Border Grid.Row="1" Margin="10" Height="40" Background=
"#0B9B74">
<TextBlock Text="Total Sales Display"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<Grid Grid.Row="2" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Year on Year"
Style="{StaticResource SecondaryTitleStyle}"
HorizontalAlignment="Center" />
<TextBlock Text="Budgeted"
Style="{StaticResource SecondaryTitleStyle}"
Grid.Column="1" HorizontalAlignment="Center" />
<Border Grid.Row="1" Margin="0,0,5,0"
Background="#7CCA62">
<TextBlock Text="Radial Gauge"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1"
Margin="5,0,0,0" Background="#A5C249">
<TextBlock Text="Radial Gauge"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
</Grid>
</Grid>
</Border>
<Button Name="VisitWebsite" Grid.Row="1"
Style="{StaticResource LinkButtonStyle}"
HorizontalAlignment="Left" ToolTip="Visit the Mindscape website">
<TextBlock Text="Built with Mindscape WPF" FontSize="16"
FontFamily="Segoe UI" Foreground="DarkGray" Height="21"
Width="203" />
</Button>
<TextBox Grid.Row="1" Text="{Binding Path=txt本日}"
TextAlignment="Center"
Foreground="White" Background="Black"
Height="17" HorizontalAlignment="Center" Name="txt本日2"
VerticalAlignment="Top" Width="81" Margin="226,4,6,0" />
</Grid>
</Grid>
</Grid>
</ccl:CustomChromeWindow>
PropertyChangedBase.csはLivet用に変更しました。具体的には、8行目のusing Livet;の追加ト19行目を、20行目にの変更しています。
PropertyChangedBase.cs
using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using Livet;
//using Livet.Commands;
//using Livet.Messaging;
//CloseCommand
//using Livet.Messaging.Windows;
using LivetWPFApplicationChrome1.ViewModels;
using LivetWPFApplicationChrome1.Views;
namespace LivetWPFApplicationChrome1.ViewModels
{
// public class PropertyChangedBase : INotifyPropertyChanged
public class PropertyChangedBase : ViewModel
{
#region RaisePropertyChanged
internal void RaisePropertyChanged(string prop)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
}
