WPFの初歩の初歩

Size: px

Start display at page:

Download "WPFの初歩の初歩"

さみらかなり
4 years ago
Views:

1 WPF の初歩の初歩うつせみ ( 虚蝉 )

2 本日のお品書き

3 XAML について XAML って? (Extensible Application Markup Language) XML をベースとしたマークアップ言語デザインとロジックが分離デザイナとコーダーの分業が可能に

4 XAML を見てみようどちらも同じものです (Button) XAML C# <Button Name= btna Content= ボタン Width= 200 Height= 25 /> Button btna = new Button(); btna.content = "Click!"; btna.width = 200; btna.height = 25; this.content = btna; 簡単になりましたよね?

5 ウィンドウコントロール Window コントロールアプリケーションのクライアントウィンドウを提供するホストコントロール Page コントロール IE でも表示可能でページナビゲーションが可能なコンテンツを表示するためのコンテナ NavigationWindow ブラウザのような機能を持ったクライアントウィンドウを提供

6 パネルパネルとはボタンやグラフィックス要素のコンポーネントを配置するためのベースパネル名 Canvas Grid DockPanel StackPanel() WrapPanel 説明シンプルなレイアウト明示的に配置できる領域を定義行列からなる柔軟なグリッド領域子要素を水平垂直に並べられる領域子要素を水平垂直に直列に並べる子要素を水平に並べボックスの終端で折り返す

7 Canvas もっともシンプルなレイアウトを実現 Canvas の原点からの相対座標を使って配置サンプルソース <Canvas> <Button Width="200" Height="25 Content="Click Canvas.Left="20 Canvas.Top="20"/> </Canvas>

8 Grid Grid 内に子要素を配置する何行何列を指定する (RowDefinitions, ColumnDefinitions) サンプルソース (2 行 1 列 ) <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> </Grid.RowDefinitions> <Button Width="200" Height="25" Content="Click" Grid.Row="1 /> </Grid>

9 DockPanel DockPanel の子要素は親 DockPanel の端にくっつきます ( ドッキング ) 注意点 : 空きスペースに子要素を詰めていくサンプルソース ( 子要素に TextBlock を追加 ) <DockPanel> <Button Height="25" DockPanel.Dock="Top"/> <TextBlock Text="TextBlock"/> </DockPanel>

10 StackPanel 子要素を縦もしくは横に順に並べるサンプルソース ( 子要素に TextBlock を追加 ) <StackPanel> <Button Width= 200 Height="25"/> </StackPanel>

11 WrapPanel 子要素が端に達すると折り返すテキストエディタ等で折り返すようなイメージサンプルソース <WrapPanel> <Button Width= 200 Height="25"/> <Button Width= 200 Height="25"/> <Button Width= 200 Height="25"/> </WrapPanel>

12 レイアウトに使用する主なプロパティ Width, Height 幅高さを指定 ( 説明不要な気が ) Alignment(HorizontalAlignment( 水平 ), VerticalAlignment( 垂直 )) 親要素のどこに配置するか Margin(Margin 左, 上, 右, 下, Margin= 10 ) 要素の外側の余白を指定 Padding 要素の内側の余白を指定等々

13 Button コントロールほんの一部だけご紹介 TextBox, TextBlock, Label, PasswordBox RickTextBox RadioButton, CheckBox, ComboBox ListBox Expander, TreeView Menu,TaskBar

14 リソース (Resources)-1 定義された要素等を共有再利用する定義された要素等を格納するオブジェクトリソースディクショナリ定義する際には通常は x:key を使って設定シンプルですがかなり便利で強力

サンプルソースリソース (Resources)-2 <Window x:class="wpfapplication1.window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Demo"> <Window.

15 サンプルソースリソース (Resources)-2 <Window x:class="wpfapplication1.window1" xmlns=" xmlns:x=" Title="Demo"> <Window.Resources> <SolidColorBrush x:key="bluebrush" Color="Blue"/> </Window.Resources> <StackPanel> <Label Content=" ラベル ~" Foreground="Blue"/> <Label Content=" ラベル ~" Foreground="{StaticResource bluebrush}"/> <Button Content=" ボタン ~" Foreground="{StaticResource bluebrush}"/> </StackPanel> </Window>

16 スタイル (Style) ー 1 ターゲット要素を指定してプロパティを設定使用するとコードの可読性が上がりメンテしやすくなる大量にコントロールがあると威力を発揮

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:class="wpfapplication1.window1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="Demo" xmlns:x="http://schemas.

17 <Window xmlns=" x:class="wpfapplication1.window1" xmlns:x=" xmlns=" Title="Demo" xmlns:x=" Width="600" Height="250"> Title="Demo" <StackPanel> Width="600" Height="250"> スタイル (Style) ー 2 <Window.Resources> <TextBlock Margin="30" HorizontalAlignment="Center" FontSize="30"> <TextBlock.Foreground> <Style TargetType="TextBlock"> <LinearGradientBrush <Setter Property="HorizontalAlignment" StartPoint="0,0" EndPoint="0, Value="Center"/> 2"> <Setter <LinearGradientBrush.GradientStops> Property="Foreground"> <Setter.Value> <GradientStop Offset="0.0" Color="Orange"/> <GradientStop <LinearGradientBrush Offset="2.0" StartPoint="0, Color="Yellow"/> 0" EndPoint="0, 2"> </LinearGradientBrush.GradientStops> <LinearGradientBrush.GradientStops> </LinearGradientBrush> <GradientStop Offset="0.0" Color="Orange"/> </TextBlock.Foreground> <GradientStop Offset="2.0" Color="Red"/> スタイルはどうでしょ </LinearGradientBrush.GradientStops>? </TextBlock> </LinearGradientBrush> <TextBlock </Setter.Value> Margin="30" HorizontalAlignment="Center" FontSize="40"> <TextBlock.Foreground> </Setter> </Style> <LinearGradientBrush StartPoint="0,0" EndPoint="0, 2"> </Window.Resources> <LinearGradientBrush.GradientStops> <StackPanel> <GradientStop Offset="0.0" Color="Orange"/> <TextBlock <GradientStop Margin="30" Offset="2.0" FontSize="30"> Color="Yellow"/> スタイルはどうでしょ </LinearGradientBrush.GradientStops>? </TextBlock> </LinearGradientBrush> </TextBlock.Foreground> <TextBlock Margin="30" FontSize="40"> スタイルはどうでしょ? </TextBlock> </StackPanel> </Window>

18 コントロールテンプレートスタイルとは違い見え方自体を変えます例えばボタンを丸や四角にしちゃうオリジナルのリストボックスを作る ( ソースは割愛 )

19 終わりに多少は使ってみようかな? と思っていただけたでしょうか

20 ちょっとだけ頼まれたので来る 12/02( 火 ) にマイクロソフト福岡支社 ( 中洲川端駅辺り ) で Tech Fielders セミナー福岡が開催されますふるってご参加くださいでそこで LT が開催されるのですがスピーカー大募集ちなみに正規の締め切りが過ぎていますので虚蝉宛までご連絡を ^^;

XAMLDo-It-Yourself 第 2 回. レゕウト今回は XAML でウゖンドウにパネルやボタンメニューなどの基本的なコントロールを配置する方法を学びますここでは次のことを学習します XAML におけるレゕウトの基本主要なパネルとその記述方法 XAML (WPF) で利用可能な

XAML Do-It-Yourself シリーズ第 2 回レゕウト -1- XAMLDo-It-Yourself 第 2 回. レゕウト今回は XAML でウゖンドウにパネルやボタンメニューなどの基本的なコントロールを配置する方法を学びますここでは次のことを学習します XAML におけるレゕウトの基本主要なパネルとその記述方法 XAML (WPF) で利用可能なコントロール典型的なコントロールの記述方法