http://w.atwiki.jp/axis-tec/ axis-tech @ ウィキ ja 2009-05-18T12:06:37+09:00 1242615997 https://w.atwiki.jp/axis-tec/pages/24.html WPFでの画面遷移方法とページ間で値を受け渡す方法について紹介します。 WPFではNavigationServiceクラスを利用して画面遷移を実現します。 画面１⇒画面２という感じに画面遷移するサンプルを作ってみたいと思います。 画面１では画面２に渡す文字列と文字色を入力し、ハイパーリンクをクリックすることで画面２に遷移します。 XAMLはこんな感じです。 #highlight(xml,linenumber){{ <Page x:Class="TestApplication.NavigationTest1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="NavigationTest1" Loaded="Page_Loaded"> <StackPanel> <TextBox Name="txtTest" Width="150" Height="24" HorizontalAlignment="Left" Margin="5"></TextBox> <ComboBox Height="24" Name="cboColors" Width="120" HorizontalAlignment="Left" Margin="5" /> <TextBlock Margin="5"> 次のページに移動するには<Hyperlink Name="hlTest" Click="hlTest_Click">ここ</Hyperlink>をクリックしてください。 </TextBlock> </StackPanel> </Page> }} 画面２では画面１より渡された文字列、文字色をTextBlockに設定します。 XAMLはこんな感じ。 #highlight(xml,linenumber){{ <Page x:Class="TestApplication.NavigationTest2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="NavigationTest2" Loaded="Page_Loaded"> <Page.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="DarkGray" Offset="1"/> </LinearGradientBrush> </Page.Background> <StackPanel> <TextBlock Name="tbApplication" Margin="10" FontSize="30" /> </StackPanel> </Page> }} ではC#コードのほうを見ていきましょう。 画面１のC#コードです。 #highlight(java,linenumber){{ using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Navigation; using System.Reflection; namespace TestApplication { /// <summary> /// NavigationTest1.xaml の相互作用ロジック /// </summary> public partial class NavigationTest1 : Page { public NavigationTest1() { InitializeComponent(); } private void Page_Loaded(object sender, RoutedEventArgs e) { // コンボボックスにColorsクラスの一覧を設定 foreach (PropertyInfo info in typeof(Colors).GetProperties()) { cboColors.Items.Add(info.Name); } cboColors.SelectedIndex = 0; } private void hlTest_Click(object sender, RoutedEventArgs e) { // Applicationオブジェクトにテキストボックスの値を格納 Application.Current.Properties["input"] = txtTest.Text; // 画面２を生成 NavigationTest2 next = new NavigationTest2(); // 画面２のプロパティに値を設定 next.TextBlockForeground = new SolidColorBrush((Color)ColorConverter.ConvertFromString(cboColors.SelectedItem.ToString())); // 画面２に遷移 NavigationService.Navigate(next); } } } }} 画面２のC#コードです。 #highlight(java,linenumber){{ using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace TestApplication { /// <summary> /// NavigationTest2.xaml の相互作用ロジック /// </summary> public partial class NavigationTest2 : Page { private SolidColorBrush _textBlockForeground = new SolidColorBrush(); public SolidColorBrush TextBlockForeground { get; set; } public NavigationTest2() { InitializeComponent(); } private void Page_Loaded(object sender, RoutedEventArgs e) { tbApplication.Text = Application.Current.Properties["input"].ToString(); tbApplication.Foreground = this.TextBlockForeground; } } } }} 画面１のPage_LoadedでコンボボックスにColorsクラスの一覧を設定しています。 この処理に関しての詳しい説明は[[クラスのプロパティの一覧をComboBoxに設定する]]を参照してください。 ページ間での値の受け渡し方法には以下の2通りがあります。 -ApplicationオブジェクトのPropertiesを使用する。 -遷移先ページにプロパティを用意し、そこに値を設定する。 今回は画面２のTextBlockのテキストにApplicationオブジェクトから値を設定し、文字色は画面２のプロパティより設定しています。 両方とも紹介するためにこのようにしましたが、本来はちゃんと使い分けをしなくてはなりませんね。 ApplicationオブジェクトのPropertiesの値は明示的にクリアしない限り、アプリが実行されている間ずっと存在し続けるので気をつけなければいけません。 たくさんのページで共通で使用する値等を渡すときに採用するのが良さそうですね。 むしろ、そういった場合しか使わないほうがよいでしょう。 次に画面遷移方法ですが、前述したとおりNavigationServiceクラスを利用します。 画面２のインスタンスを生成してNavigationServiceクラスのNavigateメソッドに渡すことによって画面遷移を実現します。 では実行してみます。 #image(画面１.jpg) で、リンクをクリックしてみると・・・ #image(画面２.jpg) うまく行きました！ ちゃんとブラウザの戻るボタンも使えます～。 画面の色はなんとなく変えてみました♪ ---- 2009-05-18T12:06:37+09:00 1242615997 https://w.atwiki.jp/axis-tec/pages/23.html いろいろなコントロールのCursorプロパティを動的に変更させたいと思い、Cursorsクラスのプロパティ一覧をコンボボックスに設定しようと考えました。 で、コンボボックスの選択を変更することによりCursorプロパティが動的に変更されたらいいなと思っていたのですが・・・。 思ったより手こずったので、方法をこちらで紹介します。 最終的にできるようになったこととして -静的クラスの全プロパティを取得し、オブジェクトとして生成できる。 -列挙体の全列挙値を取得できる。 -コンボボックスにプロパティ・列挙値の一覧を設定し、その値から対象のコントロールのプロパティを変更することができる。 -特殊なパターンとして、StringからBrushオブジェクトを生成することができる。 です。 まずはComboBoxに引数のTypeのプロパティをすべて設定するメソッドです。 #highlight(java,linenumber){{ private void SetObjectFromType(ComboBox combo, Type t) { foreach (PropertyInfo info in t.GetProperties()) { combo.Items.Add(info.GetValue(null, null)); } } }} TypeのGetPropertiesメソッドでそのTypeのすべてのプロパティがPropertyInfoオブジェクトとして取得できます。 PropertyInfoオブジェクトのGetValueメソッドでプロパティのオブジェクトが取得できるので、それをComboBoxのアイテムとして設定しています。 ポイントとして、GetValueメソッドの引数ですが、 |第1引数|プロパティ値が返されるオブジェクト| |第2引数|インデックス付きプロパティのインデックス値 (省略可能)| |戻り値|第1引数のプロパティ値| となっており、実は静的クラスのPropertyInfoからGetValueを呼び出す場合は第1引数はnullでOKなんです。 ここ、気づくのに結構かかっちゃいました・・・。 そうすると晴れて、静的クラスのプロパティが取得できるわけです。 動的クラスの場合はクラスのインスタンスを作成し、それを渡してあげるんですけどね。 次に上のメソッドを呼び出す部分。 これはCursorsクラスのプロパティ一覧を設定するのに特化したメソッドになります。 #highlight(java,linenumber){{ private void SetComboFromCursor(ComboBox combo) { SetObjectFromType(combo, typeof(Cursors)); } }} typeofメソッドでCursorsクラスのType型オブジェクトを取得してそれを渡しています。 ここで渡しているCursorsを別の静的クラスに変えればそのクラスのプロパティ一覧をComboBoxに設定することができます。 あとはComboBoxのSelectionChangedイベントで、選択されたアイテムを対象のコントロールのCursorプロパティに設定してあげればOKです。 #highlight(java,linenumber){{ private void cboCursor_SelectionChanged(object sender, SelectionChangedEventArgs e) { target.Cursor = (Cursor)cboCursor.SelectedItem; } }} ↓こんな感じ #image(Cursor2.jpg) 同様に、列挙体の一覧をComboBoxに設定するには、 #highlight(java,linenumber){{ private void SetEnumFromType(ComboBox combo, Type t) { foreach (FieldInfo info in t.GetFields(BindingFlags.Static | BindingFlags.Public)) { combo.Items.Add(info.GetValue(null)); } } }} このようにTypeのGetFieldsメソッドで列挙体の全列挙値が取得できます。 StaticとPublicに絞らないといらないものも取れちゃいますが。 ↓こんな感じ #image(HorizontalAlignment2.jpg) 特殊なパターンとして、Brushの設定についても紹介します。 #highlight(java,linenumber){{ private void cboBackground_SelectionChanged(object sender, SelectionChangedEventArgs e) { dgTarget.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString(cboBackground.SelectedItem.ToString()); } }} このように、BackGround等に設定するSolidColorBrushは文字列を基にColorConverterクラスのConvertFromStringメソッドにより Colorオブジェクトが取得できるので、それを基に作成することができます。 なので、 #highlight(java,linenumber){{ private void SetNameFromType(ComboBox combo, Type t) { foreach (PropertyInfo info in t.GetProperties()) { combo.Items.Add(info.Name); } } }} のようにPropertyInfoのNameプロパティをComboBoxに設定しておけばOKとなります。 ↓こんな感じ #image(Brush2.jpg) 以上です。 どれだけ需要があるか分かりませんが、かなり自己満足しました（笑） ---- 2009-05-18T12:05:48+09:00 1242615948 https://w.atwiki.jp/axis-tec/pages/22.html 道路標識の｢駐停車禁止｣っぽいボタンを作ってみた。 Grid部分をTemplate化すれば、いろんなところで使えるかも。 ボタンのサイズは17×17と小さ目を考えているので、大きくして使う人はStrokeThicknessプロパティを大きくする必要があります。 さらに、縦横比1：1という制限つき（＾～＾） 使えないか。。。。？ #highlight(xml,linenumber){{ <Button Name="Button2" Height="17" Width="17"> <Button.Template> <ControlTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="100*" /> <ColumnDefinition Width="20*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="20*" /> <RowDefinition Height="100*" /> <RowDefinition Height="20*" /> </Grid.RowDefinitions> <Ellipse Grid.ColumnSpan="3" Grid.Column="0" Grid.RowSpan="3" Grid.Row="0" Stroke="Red" StrokeThickness="3" Fill="Blue" /> <Line Grid.Column="1" Grid.Row="1" X1="0" Y1="0" X2="20" Y2="20" Stroke="Red" StrokeThickness="3" Stretch="Uniform"></Line> <Line Grid.Column="1" Grid.Row="1" X1="0" Y1="20" X2="20" Y2="0" Stroke="Red" StrokeThickness="3" Stretch="Uniform"></Line> </Grid> </ControlTemplate> </Button.Template> </Button> }} 2009-04-27T16:44:10+09:00 1240818250 https://w.atwiki.jp/axis-tec/pages/21.html #ls3 よく使うショートカットキーをまとめました。 |BGCOLOR(blue):COLOR(white):CENTER:ショートカットキー|BGCOLOR(blue):COLOR(white):CENTER:説明| |Ctrl + Shift + B|ビルド| |Ctrl + F5|デバッグなしで実行| |F5|デバッグありで実行| |Ctrl + K, Ctrl + C|コメントアウト| |Ctrl + K, Ctrl + U|コメント解除| |Ctrl + K, Ctrl + D|フォーマット| |F12|定義へ移動| |Ctrl + -|１つ前へ戻る| |F7|デザイナ⇒コードデザイナ（エディタ）の切り替え| |Shift + F7|コードデザイナ（エディタ）⇒デザイナの切り替え| |Shift + Alt + Enter|全画面表示| |Ctrl + Shift + F3|ソリューション全体を検索して結果一覧を表示| ---- 2009-04-25T13:24:30+09:00 1240633470 https://w.atwiki.jp/axis-tec/pages/20.html #ls3 ---- 2009-04-25T13:04:46+09:00 1240632286 https://w.atwiki.jp/axis-tec/pages/19.html #highlight(vb.net,linenumber){{ Class UserControl1 Public Event CntDrag(ByVal sender As Object, ByVal e As System.Windows.Controls. Primitives.DragDeltaEventArgs) Private Sub Thumb_DragDelta(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragDeltaEventArgs) RaiseEvent CntDrag(Me, e) End Sub Private Sub Thumb_DragStarted(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragStartedEventArgs) Cursor = Cursors.Hand End Sub Private Sub Thumb_DragCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragCompletedEventArgs) Cursor = Cursors.Arrow End Sub Private Sub Thumb2_DragStarted(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragStartedEventArgs) Cursor = Cursors.SizeNWSE End Sub Private Sub Thumb2_DragDelta(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragDeltaEventArgs) If (Me.Height + e.VerticalChange > Thumb1.Height + DockPanel2.Height) Then Me.Height += e.VerticalChange End If If (Me.Width + e.HorizontalChange > Thumb2.Width) Then Me.Width += e.HorizontalChange End If End Sub Private Sub Thumb2_DragCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Controls. Primitives.DragCompletedEventArgs) Cursor = Cursors.Arrow End Sub End Class }} 2009-04-21T17:53:49+09:00 1240304029 https://w.atwiki.jp/axis-tec/pages/17.html ガジェットっぽいコントロールを作ってみた。 サンプルなので、コントロール名、見た目はまったく考慮してません。。。（´д｀）ヾ このコントロールは、Canvasに配置しドラッグによる表示位置の変更，およびサイズの変更ができる ようにしています。（Canvasが置されているページで、このコントロールが通知するイベント をハンドリングし配表示位置の変更を行います。） まずは、画面部分。 ---- &u(){&italic(){&bold(){UserControl1.xaml}}} #include(開発部/技術/Visual Studio 2008/WPF/ガジェットっぽいコントロール/UserControl1.xaml) ---- 2009-04-21T16:40:56+09:00 1240299656 https://w.atwiki.jp/axis-tec/pages/18.html #highlight(xml,linenumber){{ <UserControl x:Class="UserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="321" Width="336" > <Grid> <DockPanel Margin="0" Name="DockPanel1"> <Thumb Height="23" Name="Thumb1" DockPanel.Dock="Top" DragDelta="Thumb_DragDelta" DragStarted="Thumb_DragStarted" DragCompleted="Thumb_DragCompleted" > <Thumb.Template> <ControlTemplate> <Border Height="23" CornerRadius="10,10,0,0" Padding="0" Background="Turquoise" BorderBrush="AliceBlue" BorderThickness="1"> </Border> </ControlTemplate> </Thumb.Template> </Thumb> <Border Name="Border2" Height="17" DockPanel.Dock="Bottom" CornerRadius="0" Padding="0" BorderBrush="AliceBlue" BorderThickness="1"> <DockPanel Name="DockPanel2" Height="15" DockPanel.Dock="Bottom" Margin="0"> <Thumb Name="Thumb2" Height="15" Width="15" DockPanel.Dock="Right" Background="Beige" DragStarted="Thumb2_DragStarted" DragDelta="Thumb2_DragDelta" DragCompleted="Thumb2_DragCompleted"> <Thumb.Template> <ControlTemplate> <ResizeGrip Height="15" Width="15" Background="Beige"/> </ControlTemplate> </Thumb.Template> </Thumb> <StatusBar Name="StatusBar1" Height="16" DockPanel.Dock="Left" Background="Beige"/> </DockPanel> </Border> <Frame Name="Frame1" DockPanel.Dock="Top" Background="WhiteSmoke" BorderBrush="AliceBlue" BorderThickness="1" OpacityMask="WhiteSmoke"/> </DockPanel> </Grid> </UserControl> }} 2009-04-21T16:40:11+09:00 1240299611 https://w.atwiki.jp/axis-tec/pages/14.html #ls3 ---- 2009-04-21T13:16:40+09:00 1240287400 https://w.atwiki.jp/axis-tec/pages/13.html #ls3 ---- 2009-04-21T13:16:06+09:00 1240287366