「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
XAMLの書き方(1)の続き。
WPF / Silverlightは、Windows Formsとは全く異なるUIサブシステムであるが、
類似のビルティング ブロック クラスが使用されているため、よく似たコードでプログラムを記述することができる。
WPF / SilverlightにはWindows フォームと同様に Applicationオブジェクトが存在する。
<Application x:Class="WpfApplication1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml"> <Application.Resources></Application.Resources> </Application>
Applicationオブジェクトには様々なイベント処理を実装することができる。
<Application x:Class="WpfApplication1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml" Startup="Application_Startup" Exit="Application_Exit" DispatcherUnhandledException="Application_DispatcherUnhandledException"> <Application.Resources></Application.Resources> </Application>
private void Application_Startup(object sender, StartupEventArgs e) { System.Diagnostics.Debug.WriteLine("開始処理"); } private void Application_DispatcherUnhandledException( object sender, System.Windows.Threading.DispatcherUnhandledExceptionEventArgs e) { System.Diagnostics.Debug.WriteLine("エラー処理"); } private void Application_Exit(object sender, ExitEventArgs e) { System.Diagnostics.Debug.WriteLine("終了処理"); }
private void Application_Startup(object sender, StartupEventArgs e) { Application.Current.Properties["Key"] = "Value1"; }
<Window x:Class="WpfApplication1.Window1" ・・・ Loaded="Window_Loaded"> <Grid> <Button Click="Button_Click">ボタン</Button> </Grid>
private void Window_Loaded(object sender, RoutedEventArgs e) { MessageBox.Show((string)Application.Current.Properties["Key"]); Application.Current.Properties["Key"] = "Value2"; } private void Button_Click(object sender, RoutedEventArgs e) { Window2 w2 = new Window2(); w2.Show(); }
private void Window_Loaded(object sender, RoutedEventArgs e) { MessageBox.Show((string)Application.Current.Properties["Key"]); }
WPFではWindows Formsと同様にWindow 画面を、以下のように起動できる(「XBAP」を除く)。
Window2 win2 = new Window2(); win2.Show();
Window2 win2 = new Window2(); win2.Owner = this; win2.ShowDialog();
Windowには、以下のようなプロパティを設定できる。
<NavigationWindow x:Class="WpfApplication1.NavWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="NavWindow" Height="300" Width="300"> </NavigationWindow>
public partial class NavWindow : NavigationWindow { public NavWindow() { InitializeComponent(); } }
WPFでNavigationWindow?画面を起動する方法について説明する。
NavWindow normalWindow = new NavWindow(); normalWindow.Show();
NavWindow dialogWindow = new NavWindow(); dialogWindow.Owner = this; bool returnValue = dialogWindow.ShowDialog() ?? false;
<NavigationWindow x:Class="WpfApplication1.NavWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="NavWindow" Height="300" Width="300" Loaded="NavigationWindow_Loaded"> </NavigationWindow>
public partial class NavWindow : NavigationWindow { public NavWindow() { InitializeComponent(); } private void NavigationWindow_Loaded(object sender, RoutedEventArgs e) { // Page1 を表示します。 this.Navigate(new Page1()); } }
<NavigationWindow x:Class="WpfApplication1.NavWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="NavWindow" Height="300" Width="300" Source="Page1.xaml"> </NavigationWindow>
<StackPanel Orientation="Vertical"> <Frame Source="Page2.xaml" Navigated="Frame1_Navigated"/> <Frame Source="Page3.xaml" Navigated="Frame2_Navigated"/> </StackPanel>
「XBAP」、「Silverlight」では、WindowNavigation? / Windowが使用出来ないため、以下の方法で、直接Page画面をロードする。
<Application x:Class="WpfBrowserApplication1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Page1.xaml"> <Application.Resources> </Application.Resources> </Application>
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.App"> <Application.Resources> </Application.Resources> </Application>
public App(){ this.Startup += this.Application_Startup; this.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException; InitializeComponent(); } private void Application_Startup(object sender, StartupEventArgs e) { // this.RootVisual = new MainPage(); デフォルトは、ユーザコントロール this.RootVisual = new Page1(); }
なお、「Silverlight」では、
デフォルトの初期画面(Application.RootVisual?)が、ユーザ コントロールとなっているため、
通常、ユーザ コントロールにFrameを追加し、Frameでページ遷移させる方法を取る。
WPF / SilverlightにおけるPage画面の画面遷移方法について説明する。
<HyperlinkButton NavigateUri="/Page2.xaml">次のページへ移動します。</HyperlinkButton> <HyperlinkButton NavigateUri="/Page1.xaml">前のページへ移動します。</HyperlinkButton>
this.NavigationService.Navigate(new Page2());
this.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
this.NavigationService.Navigate( new Uri("pack://application:,,,/Page2.xaml", UriKind.Absolute));
this.NavigationService.GoForward();
this.NavigationService.GoBack();
this.NavigationService.RemoveBackEntry();
private void NavigationWindow_Navigated(object sender, NavigationEventArgs e) { this.NavigationService.RemoveBackEntry(); }
private void Frame1_Navigated(object sender, NavigationEventArgs e) { if (NavigationService !=null) { if (NavigationService.CanGoBack) { this.NavigationService.RemoveBackEntry(); } } } private void Frame2_Navigated(object sender, NavigationEventArgs e) { if (NavigationService != null) { if (NavigationService.CanGoBack) { this.NavigationService.RemoveBackEntry(); } } }
<Page x:Class="WpfApplication1.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" ShowsNavigationUI="false">
<Page x:Class="WpfApplication1.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" ShowsNavigationUI="false" Loaded="Page_Loaded" KeyDown="Page_KeyDown"> <StackPanel> <TextBlock> <Hyperlink NavigateUri="Page2.xaml">Page2</Hyperlink> </TextBlock> <TextBox Name="textBox1"/> </StackPanel> </Page>
public partial class Page1 : Page { public Page1() { InitializeComponent(); } private void Page_Loaded(object sender, RoutedEventArgs e) { this.textBox1.Focus(); } private void Page_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Back) e.Handled = true; } }
NavigationWindow? / Pageのその他のトピック
ChildWindow1 childWindow = new ChildWindow1(); childWindow.Show();
下記のMessageBox?クラスの名前空間は、Windows FormsではなくWPFのものだが、
このMessageBox?クラスのクラス階層を確認するとWPFのアーキテクチャに基づいていないことが確認できる。
入力支援機能に関する技術要素について説明する。
<Window.CommandBindings> <!--ApplicationCommands.Saveのカスタム動作(実行可否、イベント処理)を実装する--> <CommandBinding x:Name="SaveCommand" Command="ApplicationCommands.Save" CanExecute="SaveCommand_CanExecute" Executed="SaveCommand_Executed"/> <!--ApplicationCommands.Closeのカスタム動作(実行可否、イベント処理)を実装する--> <CommandBinding x:Name="CloseCommand" Command="ApplicationCommands.Close" CanExecute="CloseCommand_CanExecute" Executed="CloseCommand_Executed"/> </Window.CommandBindings> <DockPanel> <Menu DockPanel.Dock="Top"> <MenuItem Header="ファイル(_F)"> <!--ApplicationCommands.Save → カスタム動作 → CommandBinding--> <MenuItem Header="保存(_S)" Command="ApplicationCommands.Save"> <MenuItem.Icon><Image Source=".\icons\save.png"/></MenuItem.Icon> </MenuItem> <Separator/> <!--ApplicationCommands.Close → カスタム動作 → CommandBinding--> <!--MenuItem Header="終了(_X)" Command="ApplicationCommands.Close"--> <!--ApplicationCommands.Close → カスタム動作 → カスタムイベント--> <MenuItem Name="Exit" Click="Exit_Click" Header="終了(_X)"> <MenuItem.Icon><Image Source=".\icons\exit.png"/></MenuItem.Icon> </MenuItem> </MenuItem> <MenuItem Header="編集(_E)"> <!--ApplicationCommands.Undo → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="元に戻す(_U)" Command="ApplicationCommands.Undo"> <MenuItem.Icon><Image Source=".\icons\undo.png"/></MenuItem.Icon> </MenuItem> <!--ApplicationCommands.Redo → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="やり直し(_R)" Command="ApplicationCommands.Redo"> <MenuItem.Icon><Image Source=".\icons\redo.png"/></MenuItem.Icon> </MenuItem> <Separator/> <!--ApplicationCommands.Cut → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="切り取り(_T)" Command="ApplicationCommands.Cut"> <MenuItem.Icon><Image Source=".\icons\cut.png"/></MenuItem.Icon> </MenuItem> <!--ApplicationCommands.Copy → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="コピー(_C)" Command="ApplicationCommands.Copy"> <MenuItem.Icon><Image Source=".\icons\copy.png"/></MenuItem.Icon> </MenuItem> <!--ApplicationCommands.Paste → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="貼り付け(_P)" Command="ApplicationCommands.Paste"> <MenuItem.Icon><Image Source=".\icons\paste.png"/></MenuItem.Icon> </MenuItem> <!--ApplicationCommands.Delete → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="削除(_D)" Command="ApplicationCommands.Delete"> <MenuItem.Icon><Image Source=".\icons\delete.png"/></MenuItem.Icon> </MenuItem> <MenuItem Header="配置(_A)"> <!--EditingCommands.AlignLeft → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="左揃え" Command="EditingCommands.AlignLeft"> <MenuItem.Icon><Image Source=".\icons\text_align_left.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.AlignCenter → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="中央揃え" Command="EditingCommands.AlignCenter"> <MenuItem.Icon><Image Source=".\icons\text_align_center.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.AlignRight → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="右揃え" Command="EditingCommands.AlignRight"> <MenuItem.Icon><Image Source=".\icons\text_align_right.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.AlignJustify → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="両端揃え" Command="EditingCommands.AlignJustify"> <MenuItem.Icon><Image Source=".\icons\text_align_justify.png"/></MenuItem.Icon> </MenuItem> </MenuItem> <MenuItem Header="スタイル(_S)"> <!--EditingCommands.ToggleBold → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="太字" Command="EditingCommands.ToggleBold"> <MenuItem.Icon><Image Source=".\icons\text_bold.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.ToggleItalic → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="斜体" Command="EditingCommands.ToggleItalic"> <MenuItem.Icon><Image Source=".\icons\text_italic.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.ToggleUnderline → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="下線" Command="EditingCommands.ToggleUnderline"> <MenuItem.Icon><Image Source=".\icons\text_underline.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.ToggleBullets → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="箇条書き" Command="EditingCommands.ToggleBullets"> <MenuItem.Icon><Image Source=".\icons\text_list_bullets.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.ToggleNumbering → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="段落番号" Command="EditingCommands.ToggleNumbering"> <MenuItem.Icon><Image Source=".\icons\text_list_numbers.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.IncreaseIndentation → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="インデントを増やす" Command="EditingCommands.IncreaseIndentation"> <MenuItem.Icon><Image Source=".\icons\text_indent.png"/></MenuItem.Icon> </MenuItem> <!--EditingCommands.DecreaseIndentation → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="インデントを減らす" Command="EditingCommands.DecreaseIndentation"> <MenuItem.Icon><Image Source=".\icons\text_indent_remove.png"/></MenuItem.Icon> </MenuItem> </MenuItem> <MenuItem Header="テキスト(_T)"> <!--EditingCommands.IncreaseFontSize → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="フォントの拡大" Command="EditingCommands.IncreaseFontSize"/> <!--EditingCommands.DecreaseFontSize → フォーカスのあるコントロール(RichTextBox)の既定の動作を実行--> <MenuItem Header="フォントの縮小" Command="EditingCommands.DecreaseFontSize"/> </MenuItem> </MenuItem> <MenuItem Header="ヘルプ(_H)"> <!--RoutedCommandをコードビハインドから自作しカスタム動作(実行可否、イベント処理)を実装する--> <MenuItem Header="バージョン情報(_A)" Name="About"> <MenuItem.Icon><Image Source=".\icons\about.png"/></MenuItem.Icon> </MenuItem> </MenuItem> </Menu> <ToolBarTray DockPanel.Dock="Top"> <ToolBar Header="編集:"> <Button ToolTip="元に戻す" Command="ApplicationCommands.Undo"> <Image Source=".\icons\undo.png" Stretch="Fill"/></Button> <Button ToolTip="やり直し" Command="ApplicationCommands.Redo"> <Image Source=".\icons\redo.png" Stretch="Fill"/></Button> <Button ToolTip="切り取り" Command="ApplicationCommands.Cut"> <Image Source=".\icons\cut.png" Stretch="Fill"/></Button> <Button ToolTip="コピー" Command="ApplicationCommands.Copy"> <Image Source=".\icons\copy.png" Stretch="Fill"/></Button> <Button ToolTip="貼り付け" Command="ApplicationCommands.Paste"> <Image Source=".\icons\paste.png" Stretch="Fill"/></Button> <Button ToolTip="削除" Command="ApplicationCommands.Delete"> <Image Source=".\icons\delete.png" Stretch="Fill"/> </Button> </ToolBar> <ToolBar Header="配置:"> <Button ToolTip="左揃え" Command="EditingCommands.AlignLeft"> <Image Source=".\icons\text_align_left.png" Stretch="Fill"/></Button> <Button ToolTip="中央揃え" Command="EditingCommands.AlignCenter"> <Image Source=".\icons\text_align_center.png" Stretch="Fill"/></Button> <Button ToolTip="右揃え" Command="EditingCommands.AlignRight"> <Image Source=".\icons\text_align_right.png" Stretch="Fill"/></Button> <Button ToolTip="両端揃え" Command="EditingCommands.AlignJustify"> <Image Source=".\icons\text_align_justify.png" Stretch="Fill"/></Button> </ToolBar> <ToolBar Header="スタイル:"> <Button ToolTip="太字" Command="EditingCommands.ToggleBold"> <Image Source=".\icons\text_bold.png" Stretch="Fill"/></Button> <Button ToolTip="斜体" Command="EditingCommands.ToggleItalic"> <Image Source=".\icons\text_italic.png" Stretch="Fill"/></Button> <Button ToolTip="下線" Command="EditingCommands.ToggleUnderline"> <Image Source=".\icons\text_underline.png" Stretch="Fill"/></Button> <Button ToolTip="箇条書き" Command="EditingCommands.ToggleBullets"> <Image Source=".\icons\text_list_bullets.png" Stretch="Fill"/></Button> <Button ToolTip="段落番号" Command="EditingCommands.ToggleNumbering"> <Image Source=".\icons\text_list_numbers.png" Stretch="fill"/></Button> <Button ToolTip="インデントを増やす" Command="EditingCommands.IncreaseIndentation"> <Image Source=".\icons\text_indent.png" Stretch="Fill"/></Button> <Button ToolTip="インデントを減らす" Command="EditingCommands.DecreaseIndentation"> <Image Source=".\icons\text_indent_remove.png" Stretch="Fill"/></Button> </ToolBar> </ToolBarTray> <RichTextBox DockPanel.Dock="Top" Width="Auto" Height="100" IsDocumentEnabled="True" AcceptsTab="True" FontSize="24"/> <RichTextBox DockPanel.Dock="Top" Width="Auto" Height="100" IsDocumentEnabled="True" AcceptsTab="True" FontSize="24"/> </DockPanel>
/// <summary>Window1.xaml の相互作用ロジック</summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); // UIElementにRoutedCommandをバインドし、メニューに関連付ける。 InitRoutedCommands_about(); } // AboutCommand(カスタムのRoutedCommand) public static readonly RoutedCommand AboutCommand = new RoutedCommand(); private void InitRoutedCommands_about() { // CommandBindingの生成 CommandBinding binding = new CommandBinding(AboutCommand, AboutCommand_Executed, AboutCommand_CanExecute); // UIElementにRoutedCommandをバインド this.CommandBindings.Add(binding); // メニューに関連付け About.Command = AboutCommand; } // 【情報メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(実行可否) private void AboutCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } // 【情報メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(実行可否) private void AboutCommand_Executed(object sender, ExecutedRoutedEventArgs e) { // 情報表示処理 } // 【保存メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(実行可否) private void SaveCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } // 【保存メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(イベント処理) private void SaveCommand_Executed(object sender, ExecutedRoutedEventArgs e) { // 保存処理 } // 【終了メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(実行可否) private void CloseCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) { e.CanExecute = true; } // 【終了メニュー+コマンド】UIElementにRoutedCommandをバインド:カスタム動作(イベント処理) private void CloseCommand_Executed(object sender, ExecutedRoutedEventArgs e) { this.Close(); } // 【終了メニュー】メニューのクリックイベントのみの実装で済ます場合。 private void Exit_Click(object sender, RoutedEventArgs e) { this.Close(); } }
<UserControl x:Class="WpfApplication1.UserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="250" Height="120"> <StackPanel> <TextBlock Margin="4,4,4,4" Text="タイトル" TextWrapping="Wrap" FontWeight="Bold" FontSize="14"/> <Path Width="Auto" Height="1" Fill="Black" Stretch="Fill" Stroke="Black" Data="M20,45 L250,45" Margin="4,4,4,4"/> <TextBlock Margin="4,4,4,4" Text="説明文" TextWrapping="Wrap"/> </StackPanel> </UserControl>
<Window x:Class="WpfApplication1.Window1" ・・・ xmlns:my="clr-namespace:WpfApplication1" ・・・> ・・・ <RichTextBox DockPanel.Dock="Top" Width="Auto" Height="100" IsDocumentEnabled="True" AcceptsTab="True" FontSize="24"> <RichTextBox.ToolTip> <ToolTip> <my:UserControl1/> </ToolTip> </RichTextBox.ToolTip> </RichTextBox>
このToolTip?プロパティには、ToolTip?属性に直接文字列で説明文を記述することも可能であるが、
「プロパティ要素構文」を使用して、説明文などの文字列だけではなく、(imageなどの)任意のUI要素も設定可能である。
例えば、以下は、ユーザ コントロールを使用してToolTip?を表示した例である。
以下は、IME制御のサンプルである。
<StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="制御なし:"/> <TextBox Name="textBox0" Height="23" Width="120"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Text="以下、イベントで制御"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="OFF:"/> <TextBox Name="textBox1" Height="23" Width="120" GotFocus="textBox1_GotFocus" LostFocus="textBox1_LostFocus"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="ON:"/> <TextBox Name="textBox2" Height="23" Width="120" GotFocus="textBox2_GotFocus" LostFocus="textBox2_LostFocus"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="全角片仮名:"/> <TextBox Name="textBox3" Height="23" Width="120" GotFocus="textBox3_GotFocus" LostFocus="textBox3_LostFocus"/> </StackPanel>
<StackPanel Orientation="Horizontal"> <TextBlock Height="23" Text="以下、XAMLで制御"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="OFF:"/> <TextBox Name="textBox4" Height="23" Width="120" InputMethod.PreferredImeState="Off"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="ON:"/> <TextBox Name="textBox5" Height="23" Width="120" InputMethod.PreferredImeState="On"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Height="23" Width="80" Text="半角片仮名:"/> <TextBox Name="textBox6" Height="23" Width="120" InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="Native,Fixed,Katakana"/> </StackPanel> </StackPanel>
/// <summary>Window1.xaml の相互作用ロジック</summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); } InputMethodState ims = InputMethodState.DoNotCare; ImeConversionModeValues imc = ImeConversionModeValues.DoNotCare; private void textBox1_GotFocus(object sender, RoutedEventArgs e) { ims = InputMethod.Current.ImeState; InputMethod.Current.ImeState = InputMethodState.Off; } private void textBox1_LostFocus(object sender, RoutedEventArgs e) { InputMethod.Current.ImeState = ims; } private void textBox2_GotFocus(object sender, RoutedEventArgs e) { ims = InputMethod.Current.ImeState; InputMethod.Current.ImeState = InputMethodState.On; } private void textBox2_LostFocus(object sender, RoutedEventArgs e) { InputMethod.Current.ImeState = ims; } private void textBox3_GotFocus(object sender, RoutedEventArgs e) { ims = InputMethod.Current.ImeState; imc = InputMethod.Current.ImeConversionMode; InputMethod.Current.ImeState = InputMethodState.On; InputMethod.Current.ImeConversionMode = ImeConversionModeValues.Native | ImeConversionModeValues.FullShape | ImeConversionModeValues.Katakana; } private void textBox3_LostFocus(object sender, RoutedEventArgs e) { InputMethod.Current.ImeState = ims; InputMethod.Current.ImeConversionMode = imc; } }
イベント ハンドラでのIME制御の動作は、
以下の点が、XAMLによるIME制御の場合と異なる。
デザイナ向けの技術要素について説明する。
<Grid> <Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="5" Data="M208,68 C182.37169,68 155.97712,69 131,69 ・・・"/> <Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="5" Margin="50" Data="M88,132 C88,132 87.5,250.5 120.5,234.5 ・・・"/> </Grid>
<Grid> <Viewbox Height="400" Width="400"> <Grid> <Ellipse Stroke="Black" StrokeThickness="5" Height="400" Width="400"/> <TextBlock Text="WPF" FontSize="150" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Viewbox> </Grid>
<Grid> <Path Data="M397.5,200 C397.5,309.07624 309.07624,397.5 200,397.5 C90.923762,397.5 2.5,309.07624 2.5,200 C2.5,90.923762 90.923762,2.5 200,2.5 C309.07624,2.5 397.5,90.923762 397.5,200 z M59.0835,149.3165 L71.974126,149.3165 L87.794437,223.73042 L107.13037,149.3165 L120.021,149.3165 L139.35694,223.73042 L155.17725,149.3165 L168.06787,149.3165 L145.80225,250.6835 L134.0835,250.6835 L113.57569,169.23834 L93.067874,250.6835 L81.349124,250.6835 z M192.08984,160.44929 L192.08984,199.1211 L222.55859,199.1211 C228.02734,199.1211 232.32422,197.5586 235.44922,194.4336 C238.96484,190.91799 240.72266,186.23049 240.72266,180.37113 C240.72266,173.73052 239.16016,168.84771 236.03516,165.72272 C232.51953,162.2071 228.02734,160.44929 222.55859,160.44929 z M178.61329,149.3165 L225.48828,149.3165 C234.08203,149.31651 241.11328,152.05088 246.58203,157.51961 C252.05078,162.98835 254.78515,170.60552 254.78515,180.37113 C254.78515,190.13674 252.24609,197.5586 247.16797,202.63671 C242.08984,207.71483 234.86328,210.25389 225.48828,210.25389 L192.08984,210.25389 L192.08984,249.51163 L178.61329,249.51163 z M273.5337,149.3165 L340.9165,149.3165 L340.9165,160.44929 L287.01027,160.44929 L287.01027,193.26173 L329.19775,193.26173 L329.19775,204.39452 L287.01027,204.39452 L287.01027,249.51163 L273.5337,249.51163 z" Stretch="Fill" Stroke="Black" StrokeThickness="5"/> </Grid>
WPF / Silverlightでは、様々なグラデーションをデザイン可能。
<Window.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Window.Background>
<Window.Background> <RadialGradientBrush GradientOrigin="0.3,0.3"> <GradientStop Color="Aqua" Offset="0.1"/> <GradientStop Color="Black" Offset="0.2"/> <GradientStop Color="Aqua" Offset="0.3"/> <GradientStop Color="Black" Offset="0.4"/> <GradientStop Color="Aqua" Offset="0.5"/> <GradientStop Color="Black" Offset="0.6"/> <GradientStop Color="Aqua" Offset="0.7"/> <GradientStop Color="Black" Offset="0.8"/> <GradientStop Color="Aqua" Offset="0.9"/> </RadialGradientBrush> </Window.Background>
<Grid> <Border Height="100" Width="100" BorderBrush="Black" BorderThickness="1" > <Rectangle Height="100" Width="100" Fill="Blue"/> </Border> </Grid>
<Grid> <Border Height="100" Width="100" BorderBrush="Black" BorderThickness="1" > <Rectangle Height="100" Width="100" Fill="Blue"> <Rectangle.LayoutTransform> <RotateTransform CenterX="50" CenterY="50" Angle="45"/> </Rectangle.LayoutTransform> </Rectangle> </Border> </Grid>
<Grid> <Border Height="100" Width="100" BorderBrush="Black" BorderThickness="1" > <Rectangle Height="100" Width="100" Fill="Blue"> <Rectangle.RenderTransform> <RotateTransform CenterX="50" CenterY="50" Angle="45"/> </Rectangle.RenderTransform> </Rectangle> </Border> </Grid>
※ なお、こちらの「トランスフォーム処理」は「Silverlight」でもサポートされる。
MVVM(Model - View - View Model)モデルとは、
前述の「データ バインディング」の仕組みを活用したデザイン パターンであり、
従来の3層デザイン パターンの「モデル オブジェクト」、「ビュー オブジェクト」に加えて、
「バインディング ソース」である「ビュー・モデル オブジェクト」を新設するデザイン パターンである。
このデザイン パターンのメリットは、
「モデル オブジェクト」、「ビュー オブジェクト」間の結合部を、
「データ バインディング」による「ビュー・モデル オブジェクト」に限定し、疎結合を実現できる点である。
なお、MVVMデザイン パターンのためのガイドライン には、以下のものがある。
Tags: :.NET開発, :UIサブシステム, :WPF/Silverlight, XAML