【WPF超入門】XAML要素の基本的な書き方を整理してみる記事

新規ストック記念で全面的に書き直し。

お行儀のよいモノを読んでいてもよく分からないのでとにかく手を動かす。
一応もう本格的なWPFを一つ仕上げてるんだけど一から書こうとすると未だによく分からん💧
分かりやすくBackGroudプロパティで色を付ける。

Grid要素直下に<StackPanel>を置いて、コントロール毎にグルーピングする使い方が基本になる。

視にくい場合はWindowを外に出すといい。縦方向に切り替えも可能。

StackPanelを子要素に置く

並列に並べればいいように思えますが、そうすると上手くいかない。

           <Grid>
    <StackPanel Grid.Row="0" Background="Red">
        <Button Width="200" Height="50" Click="Button1_Click"></Button>
        <Button Width="200" Height="50" Click="Button1_Click"></Button>

        <StackPanel 
            Grid.Row="1" Background="Aqua" Orientation="Vertical" HorizontalAlignment="Center">
            <TextBox x:Name="InputFilePathControl"/>
            <TextBox Width="200" x:Name="OutputFilePathControl"/>
        </StackPanel>
    </StackPanel>
</Grid>
          

　　　　　　

各コントロールの高さ（Height）を合わせる

この辺は自分でもまだ押さえてなかったので。

Buttonに名前を付けてHeightプロパティでBindingします。
同様にして幅(Width)も統一出来ます。

     <StackPanel Grid.Row="0" Background="Red">
         <Button Width="200" x:Name="button1" Content="sheep1" Margin="0,0,0,0"  Height="25" />
   <Button Width="200"  Content="sheep2" Height="{Binding Height, ElementName=button1}"></Button>

        <StackPanel 
            Grid.Row="1" Background="Aqua" Orientation="Vertical" HorizontalAlignment="Center">
            <TextBox x:Name="InputFilePathControl"/>
            <TextBox Width="200" x:Name="OutputFilePathControl"/>
        </StackPanel>

ある程度まで自動補完で出るようになっているのでかなり楽です。

縦方向表示の場合

RowDefiniationで行を3分割してみる

ColumnDefiniationで列。

Grid要素の直下に起きます。

　　　　<Grid>
        <Grid.RowDefinitions >
            <RowDefinition Height = "*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height ="3*"/>
        </Grid.RowDefinitions>
       .
       .
       .
       .
       </Grid>

こんな感じで綺麗に分かれる。

結局これが尤も優れているだろうという事でまずはこのピーコック・アンダーソンの記事を推しておきます。

ちなみにWPFの仕様上、必ず一つの<Grid>要素を親要素にしますのでこれが暗黙的にGrid.Row=0という事になります。

GroupBoxに要素を追加してみる

  <Grid Grid.Row="1">

      <GroupBox Background="AliceBlue" Header="sheepGroup">
          <StackPanel>
             <RadioButton x:Name="sheepradio1" Content="safoak"/>
             <RadioButton x:Name="sheepradio2" Content="Corideal"/>
          </StackPanel>
      </GroupBox>
      
  </Grid>
  <Grid Grid.Row="2">
      <GroupBox Background="Azure" Header="sheepGroup2">
          <StackPanel>
              <TextBlock Text="Sheep is lady"/>
              <TextBlock Text="She is Sheep"/>
          </StackPanel>
          
      </GroupBox>
  </Grid>

色も付けてこんな感じに

ここまでのXML全文

<Window x:Class="WpfApp10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp10"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions >
            <RowDefinition Height = "*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height ="3*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Background="Red">
            <Button Width="200"  x:Name="button1" Content="sheep1" Margin="0,0,0,0"  Height="25" />
            <Button Width="200"  Content="sheep2" Height="{Binding Height, ElementName=button1}"></Button>

            <StackPanel 
                Grid.Row="1" Background="Aqua" Orientation="Vertical" HorizontalAlignment="Center">
                <TextBox x:Name="InputFilePathControl"/>
                <TextBox Width="200" x:Name="OutputFilePathControl"/>
            </StackPanel>
        </StackPanel>

        <Grid Grid.Row="1">

            <GroupBox Background="AliceBlue" Header="sheepGroup">
                <StackPanel>
                   <RadioButton x:Name="sheepradio1" Content="safoak"/>
                   <RadioButton x:Name="sheepradio2" Content="Corideal"/>
                </StackPanel>
            </GroupBox>
            
        </Grid>
        <Grid Grid.Row="2">
            <GroupBox Background="Azure" Header="sheepGroup2">
                <StackPanel>
                    <TextBlock Text="Sheep is lady"/>
                    <TextBlock Text="She is Sheep"/>
                </StackPanel>
                
            </GroupBox>
        </Grid>


    </Grid>
</Window>

あとがき

当初は慣れてなくて酷い代物でしたが、ストックして頂きありがとうございます。
書き直したので使いやすくなってるはず。
編集履歴に以前のバージョンがあります。