6.ユーザーコントロール
ユーザーコントロール
ユーザーコントロールは、複数のコントロールを組み合わせて作成します。WPFでは、画面を作るのと同様な方法でユーザーコントロールを作成できます。
また、既存のUIをユーザコントロールとしてカプセル化できます。
例えば、幾つもの画面で同じような画面を作る必要がある時、共通して利用するユーザーコントロールを1つ作成して、個々の画面は、このユーザーコントロールをバインドして利用します。
下の画像は、画面の下に配置するButtonをViewsフォルダの内にUserControlFooterN1という名前のユーザーコントロールを作成した例です。
これを汎用的にしたものが下のリンクにあります。
Windowの代わりにUserControlとなる
<UserControl x:Class="LivetWPFApplication100.Views.UserControlFooterN1"
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:i="http://schemas.microsoft.com/expression/2010/interactivity"
mc:Ignorable="d"
d:DesignHeight="75" d:DesignWidth="1035">
<!-- 上のUserControl.ResourcesをStyles.xamlに書いてResourceDictionaryを記述 -->
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Styles.xaml"/>
<ResourceDictionary Source="/Resources/StylesBG.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Width="1025" Height="84">
<Button Style="{StaticResource ButtonStyle1}"
Content="" Height="40" HorizontalAlignment="Left" Margin="9,12,0,0"
Name="button14" VerticalAlignment="Top" Width="8" IsEnabled="False">
</Button>
<Button Style="{StaticResource ButtonStyle1}" Content="" Height="40"
HorizontalAlignment="Right" Margin="0,12,98,0" Name="button12"
VerticalAlignment="Top" Width="80" IsEnabled="False" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="12,58,0,0"
Name="txtMessage" Text="{Binding Path=txtMessage}"
VerticalAlignment="Top" Width="917"/>
<TextBox Text="{Binding Path=txt本日}" TextAlignment="Center" Height="20"
HorizontalAlignment="Center" Margin="929,58,15,0" Name="txt本日"
VerticalAlignment="Top" Width="81" />
</Grid>
</UserControl>
Viewでのユーザーコントロールの指定
画面(例えばMainWindow.xaml)ではユーザーコントロールは下記のように指定します。
View<Window x:Class="LivetWPFApplication100.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
xmlns:v="clr-namespace:LivetWPFApplication100.Views"
xmlns:vm="clr-namespace:LivetWPFApplication100.ViewModels"
xmlns:b="clr-namespace:LivetWPFApplication100.Behaviors"
Title="MainWindow" Height="714" Width="1035"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Styles.xaml"/>
<ResourceDictionary Source="/Resources/Styles2.xaml"/>
<ResourceDictionary Source="/Resources/StylesBG.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>
</i:Interaction.Triggers>
<i:Interaction.Behaviors>
<b:CloseButtonBehavior IsWindowCloseEnable=
"{Binding ElementName=CloseCheck, Path=IsChecked}"/>
</i:Interaction.Behaviors>
<Grid Background="#FFE6E6FA">
<Label Background="AliceBlue" Content="ユーザーID" Height="22"
HorizontalAlignment="Left" Margin="381,259,0,0" Name="label1"
VerticalAlignment="Top" Width="70" />
<Label Background="AliceBlue" Content="パスワード" Height="22"
HorizontalAlignment="Left" Margin="381,287,0,0" Name="label2"
VerticalAlignment="Top" Width="70" />
<TextBox Style="{StaticResource HighlightTextBox}" Height="22"
HorizontalAlignment="Left" Margin="450,259,429,0"
Name="txtユーザーID" Text="{Binding Path=txtユーザーID}"
VerticalAlignment="Top" Width="134" />
<PasswordBox MaxLength="10" Height="22"
HorizontalAlignment="Left" Margin="450,287,0,0"
VerticalAlignment="Top" Width="134">
<i:Interaction.Behaviors>
<b:PasswordBindBehavior Password="{Binding txtパスワード,
Mode=TwoWay}" />
</i:Interaction.Behaviors>
</PasswordBox>
<Button Style="{StaticResource CommandTemplate}" Content="ログイン"
Width="130" Height="30"
Command="{Binding GotoCommand22}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="450,322,433,323"
Foreground="White" />
<v:UserControlFooterN1 Margin="0,0,0,0" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
</Grid>
</Window>
ここのサンプルのダウンロード(UserControlFooterN1.lzh)