スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: スポンサー広告

GridというPanel

Grid。格子状のパネル。行の数、列の数を指定でき、好きな位置にコントロールを配置できるパネル。
色々な事ができる為、StackPanelに比べればやや重い。
同じ行、列に設定されるコントロールは、上に重ねられていく。
重ねられないようにするために、マージン設定や、直下にStackPanel等を配置する。
今までのWindows.FormsライクなUIは、DockPanelの方が実装しやすい感じ。
Gridで使い出があるのは、GridSplitterとの連携で、サイズ変更したい時。

<Window x:Class="TawamureDays.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:nfc="http://nichia.jp/sys/foundation/component/gui"
xmlns:local="clr-namespace:TawamureDays"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="Aqua"></Grid>
<GridSplitter Width="5" VerticalAlignment="Stretch"/>
<Grid Grid.Column="1" Background="Chartreuse"></Grid>
</Grid>
</DockPanel>
</TabItem>
</TabControl>
</Grid>
</Window>

20120605_1

縦にスプリッタがあり、幅を自由に設定できる。ここでキモなのは、GridSplitterには、GridのColumn設定をしない事かな。
GridSplitterの為の列を設ける必要もない。下手に設定すると、思うように動かない。
次。

<Window x:Class="TawamureDays.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:nfc="http://nichia.jp/sys/foundation/component/gui"
xmlns:local="clr-namespace:TawamureDays"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="Aqua"></Grid>
<GridSplitter Width="5" VerticalAlignment="Stretch"/>
<Grid Grid.Column="1" Background="Chartreuse"></Grid>
</Grid>
</DockPanel>
</TabItem>
<TabItem Header="Tab2">
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Aqua"></Grid>
<GridSplitter Grid.Row="1"
Height="5"
HorizontalAlignment="Stretch"/>
<Grid Grid.Row="2" Background="Chartreuse"></Grid>
</Grid>
</DockPanel>
</TabItem>
</TabControl>
</Grid>
</Window>

20120605_2

横にスプリッタがあり、高さを自由に設定できる。
キモなのは、
・縦の時と違い、GridSplitter用にGridの行を用意する事。
・あと、GridSplitterには、HorizontalAlignment="Stretch"設定が必要な事。
最後はおまけ。
そして、両方を混ぜてみる。

<Window x:Class="TawamureDays.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:nfc="http://nichia.jp/sys/foundation/component/gui"
xmlns:local="clr-namespace:TawamureDays"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="Aqua"></Grid>
<GridSplitter Width="5" VerticalAlignment="Stretch"/>
<Grid Grid.Column="1" Background="Chartreuse"></Grid>
</Grid>
</DockPanel>
</TabItem>
<TabItem Header="Tab2">
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Aqua"></Grid>
<GridSplitter Grid.Row="1"
Height="5"
HorizontalAlignment="Stretch"/>
<Grid Grid.Row="2" Background="Chartreuse"></Grid>
</Grid>
</DockPanel>
</TabItem>
<TabItem Header="Tab3">
<DockPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button>Button1</Button>
<GridSplitter Width="5"/>
<Button Grid.Column="1">
Button2
</Button>
</Grid>
<GridSplitter Grid.Row="1"
Height="5"
HorizontalAlignment="Stretch"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Button HorizontalAlignment="Stretch">
Button3
</Button>
</Grid>
<GridSplitter Width="5"/>
<Button Grid.Column="1">
Button4
</Button>
</Grid>
</Grid>
</DockPanel>
</TabItem>
</TabControl>
</Grid>
</Window>

20120605_3
画面起動時、4つのボタンは同じサイズ。スプリッタにより、サイズを変更できる。
可変サイズ型を書きたい時のひな形って事で。
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


サイドバー背後固定表示サンプル

当ブログに書かれたソースコードは流用自由です。

バグ、スペルミス等はありうる事です。

ご利用の際は自己責任でお願いしますm(_ _)m

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。