Silverlight

[WPF][Silverlight]コントロール間に程よい幅をあけよう

kazuki@wankuma.com (かずき) — Tue, 01 Jul 2008 17:04:00 GMT

タイトルの通りです。要はマージンの話。
WPFは、レイアウトを指定すると、そのレイアウトの通りにコントロールを配置してくれる。
恐らくお世話になる率が高いGridレイアウトは、大体のレイアウトをこれだけで記述できちゃうくらいパワフルな代物です。

たとえば、下のようなコードを書くと絵のような画面になります。

<UserControl x:Class="SilverlightTest2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Text="何か入れてね" />
        <TextBox Grid.Row="1" AcceptsReturn="True" />
        <StackPanel Grid.Row="2" 
                    Orientation="Horizontal" 
                    HorizontalAlignment="Right">
            <Button Content="決定" />
            <Button Content="キャンセル" />
        </StackPanel>
    </Grid>
</UserControl>

割とありがちな、画面の説明のためのテキストと入力欄とOKなのかNGなのかを選択するためのボタンがあるタイプの画面です。なんというか、敷き詰められた感があって手抜き感たっぷりに感じてしまう。
何かの番組（今もしてるのかな？）に出てきそうな「ゆとりの空間魔術師」とまでは行かなくても、普通にそれっぽい隙間は入れたいと思うのは人間の性。そういうときに、マージンを使います。

マージンを指定するのは簡単で、Marginプロパティに値を設定するだけ。四方に同じマージンを指定する場合は、単純に値を１つ設定するだけでいいようになってる。

たとえば、ボタンやテキストボックスの周りに幅５のマージンが欲しかったら下のようにすればいい。

        <TextBlock Grid.Row="0" Text="何か入れてね" />
        <TextBox Grid.Row="1" AcceptsReturn="True" />
        <StackPanel Grid.Row="2" 
                    Margin="5"
                    Orientation="Horizontal" 
                    HorizontalAlignment="Right">
            <Button Margin="5" Content="決定" />
            <Button Margin="5" Content="キャンセル" />
        </StackPanel>

一律に５とったもんだから、若干不自然な感じもするけど、隙間は開いた。こんな風に調整していけばピッチピチに詰まった画面じゃなくなる。後はセンスの問題だ！

ちなみに、マージンの指定方法には知ってるだけだと下のような指定方法がある。
多分これで全部じゃないかな…？

Margin="5"：上下左右に5
Margin="5,10"：左右に5、上下に10
Margin="10,20,30,40"：左に10、上に20、右に30、下に40

ここら辺の変換は、Marginプロパティにコンバータがしかけてあるのだろう。実際のMarginプロパティの型はLeft,Top,Right,Bottomというdouble型のプロパティを持つThickness構造体であらわされてる。
C#からマージンを指定する場合は、この型を使うことになる。

[Silverlight]Silverlight2にはCommandがないのかな？

kazuki@wankuma.com (かずき) — Mon, 30 Jun 2008 18:15:00 GMT

ぱっと見た感じ見当たらない。
CommandBindingsとかがコードエディタで補完されない！！

う～ん。無いのか
参考URL：http://d.hatena.ne.jp/Yamaki/20080324/1206341328

結構好きな機能だったのに残念です。

[C#][Silverlight]Silverlight2にはDockPanelって無いのね

kazuki@wankuma.com (かずき) — Mon, 30 Jun 2008 00:35:00 GMT

c303さんが自作のDockPanelをSilverlightで使ってるので、何でだろ？って思ってSilverlightを弄くってみたら、DockPanel無かったのかorz
コンボボックスも無かったり、地味に使うものが無いSilverlight2！

まったく持ってけしからん！！
といっても、Silverlightも結構強力なもので「XXXXが無ければ作ればいいじゃない？」ということが平気で言える。
DockPanelに至っては、WPFで一番強力なレイアウトのGridが使えるので、そいつでまかなえたりする。

ということで、レッツトライ！
構造としては、縦方向にはTop,Center,Bottomにあたる3行をおく。横方向にもLeft,Center,Rightにあたる3列をおく。後は、RowSpanとColumnSpanを適当に設定してコントロールを置くと完成。

<UserControl x:Class="DockPanelModoki.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <!-- 
                Top, Center, Bottom 
                TopとBottomに必要なだけ幅を指定して、Centerの部分は残り全部。
            -->
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- 
                Left Center Right 
                LeftとRightに必要なだけ幅を指定して、Centerの部分は残り全部。
            -->
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" 
                Content="Top"/>
        <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
                Content="Left"/>
        <Button Grid.Row="1" Grid.Column="2" 
                Content="Right"/>
        <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" 
                Content="Bottom"/>
        <Button Grid.Row="1" Grid.Column="1"
                Content="Centerにあたるボタン"/>
    </Grid>
</UserControl>

実行してみると、DockPanelっぽくなってる。

小さくしても大丈夫