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

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

参考Link

お行儀のよいモノを読んでいてもよく分からないのでとにかく手を動かす。
一応もう本格的な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>

DockPanel でコントロールを配置する

新規ストック記念で追加。
DockPanelを使うと、空いている部分を埋めるように要素を配置できます。
こんな風にしてみたんですが、面白いんじゃないでしょうか
Gridの中にさらにGridを入れることで分割してみました。

実用的なのはこっちかも

参考
C#WPFの道#29！DockPanelの書き方と使い方をわかりやすく解説！

         <Grid Grid.Row="2">
          

            <DockPanel  LastChildFill="True">

                <Button DockPanel.Dock="Top" Content="上"/>
                <Button DockPanel.Dock="Left" Content="左"/>
                <Button DockPanel.Dock="Right" Content="右"/>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <GroupBox Grid.Column="1" Background="Azure" Header="sheepGroup2">
                        <StackPanel>
                            <TextBlock Text="Sheep is lady"/>
                            <TextBlock Text="She is Sheep"/>
                        </StackPanel>

                    </GroupBox>
                    <GroupBox  Background="Azure" Header="sheepGroup3">
                        <StackPanel>
                            <RadioButton x:Name="sheepradio5" Content="Southdown"/>
                            <RadioButton x:Name="sheepradio6" Content="Cheviot"/>
                            <RadioButton x:Name="sheepradio7" Content="Lincoln"/>
                            <RadioButton x:Name="sheepradio8" Content="Romney"/>

                        </StackPanel>
                    </GroupBox>

                    <GroupBox Grid.Column="3" Background="Azure" Header="sheepGroup4">
                        <StackPanel>
                            <TextBlock FontWeight="Bold" FontStyle="Oblique" TextWrapping="Wrap" >
                            "Psalm 23:1-2 (KJV)  <LineBreak />The Lord is my shepherd; I shall not want.

He maketh me to lie down in green pastures: he leadeth me beside the still waters."/>


                            </TextBlock>
                        </StackPanel>
                    </GroupBox>

                </Grid>
            </DockPanel>
        </Grid>

あとがき

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