WPF TabControlのTabItem内での複数画像の表示について

Question

お世話になります。
現在WPFにて画像表示用の画面を作成しております。
画面の表示につきましては、５つのタブを設け、各タブに予め複数の画像を準備しておき、
条件ごとに貼り付けてある画像の表示を切り替えるというシンプルなものです。
各画像はImageコントロールに表示させます。

今回お聞きしたいのは、各タブに予め複数の画像を準備しておく方法です。
例えば「あああ」タブ内に3枚の画像を貼り付けたいと思い、
以下のようにしてみると、「プロパティ　’Content’が複数回設定されています。」という
エラーメッセージが表示されます。

<TabControl Margin="0,0,0,60.012" Name="TabControl1">
            <TabItem Header="あああ" Margin="0" Width="70">
                <Image Margin="0,22.864,0,60.012" Name="Image1" Stretch="Fill" Source="C:\test\Resources/AAA.png" />
　　　　　　　　　<Image Margin="0,22.864,0,60.012" Name="Image2" Stretch="Fill" Source="C:\test\Resources/BBB.png" />
        　 　　　<Image Margin="0,22.864,0,60.012" Name="Image3" Stretch="Fill" Source="C:\test\Resources/CCC.png" />
            </TabItem>
</TabControl>

以下のように<TabItem></TabItem>内にImageを一つだけにすると問題はありませんでした。

<TabControl Margin="0,0,0,60.012" Name="TabControl1">
            <TabItem Header="あああ" Margin="0" Width="70">
                <Image Margin="0,22.864,0,60.012" Name="Image1" Stretch="Fill" Source="C:\test\Resources/AAA.png" />
　　　　　　　</TabItem>
</TabControl>

また、以下のように<TabControl></TabControl>外だとImageを複数個設けても問題はありませんでした。

<TabControl Margin="0,0,0,60.012" Name="TabControl1">
            <TabItem Header="あああ" Margin="0" Width="70">
            </TabItem>
</TabControl>
                <Image Margin="0,22.864,0,60.012" Name="Image1" Stretch="Fill" Source="C:\test\Resources/AAA.png" />
　　　　　　　　　<Image Margin="0,22.864,0,60.012" Name="Image2" Stretch="Fill" Source="C:\test\Resources/BBB.png" />
        　 　　　<Image Margin="0,22.864,0,60.012" Name="Image3" Stretch="Fill" Source="C:\test\Resources/CCC.png" />

尚、全体のコードは以下となります。

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="702" Width="820" Name="Window1">
    <Grid>
        <Button Background="SkyBlue" FontFamily="MSゴシック" FontSize="16" Height="50" Margin="0,0,98.353,5.001" Name="btnSave" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="79.523">保存</Button>
        <Button FontSize="16" Height="50" Margin="0,0,15.003,5.001" Name="btnClose" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="79.523">閉じる</Button>
        <Button Background="SkyBlue" FontFamily="MSゴシック" FontSize="16" Height="50" HorizontalAlignment="Left" Margin="300.06,0,0,5.001" Name="btnClear" VerticalAlignment="Bottom" Width="80">クリア</Button>
        <Button Background="Tomato" FontFamily="MSゴシック" FontSize="16" Height="50" HorizontalAlignment="Right" Margin="0,0,223.378,5.001" Name="btnDelete" VerticalAlignment="Bottom" Visibility="Hidden" Width="80">削除</Button>
        <Button Background="SkyBlue" FontFamily="MSゴシック" FontSize="16" Height="50" HorizontalAlignment="Right" Margin="0,0,306.728,5.001" Name="btnMode" VerticalAlignment="Bottom" Width="80">ペン</Button>
        <TabControl Margin="0,0,0,60.012" Name="TabControl1">
            <TabItem Header="あああ" Margin="0" Width="70">
                <Image Margin="0,22.864,0,60.012" Name="Image1" Stretch="Fill" Source="C:\test\Resources/AAA.png" />
　　　　　　　　　<Image Margin="0,22.864,0,60.012" Name="Image2" Stretch="Fill" Source="C:\test\Resources/BBB.png" />
        　 　　　<Image Margin="0,22.864,0,60.012" Name="Image3" Stretch="Fill" Source="C:\test\Resources/CCC.png" />
        
            </TabItem>
            <TabItem Header="いいい" Width="70">
            </TabItem>
            <TabItem Header="ううう" Width="70">
            </TabItem>
            <TabItem Header="えええ" Width="70">
            </TabItem>
            <TabItem Header="おおお" Width="70">
            </TabItem>
        </TabControl>
        <Image Margin="0,22.864,0,60.012" Name="Image4" Stretch="Fill" Source="C:\test\Resources/DDD.png" />
        <Image Margin="0,22.864,0,60.012" Name="Image5" Stretch="Fill" Source="C:\test\Resources/EEE.png" />
        <InkCanvas EditingMode="Ink" Margin="0,22.864,0,60.012" Background = "Transparent" Name="InkCanvas1" />
      </Grid>
</Window>

以上となります。
１つのタブに複数枚のImageを貼り付け、条件によって画像の表示を切り替える方法をご教授して頂きたく、
宜しくお願い致します。

Answer 1

TabItemの中に1つのImageしか入らないのは、TabItemは1つのContentしか入れられないためです。TabItemの中に複数のImageを入れたいのであれば、複数のContentを設定できるStackPanelなどを間に入れる必要があります。

<TabItem Header="あああ" Width="70">
   <StackPanel>
       <Image Stretch="Fill" Source="C:\test\Resources/AAA.png" />
　　　　<Image Stretch="Fill" Source="C:\test\Resources/BBB.png" />
       <Image Stretch="Fill" Source="C:\test\Resources/CCC.png" />
   </StackPanel>
</TabItem>

Comments

[matsutake]

早々のご回答、ありがとうございました。
教えて頂きました通り、<StackPanel></StackPanel>を入れた結果、エラーが表示されることなく動作いたしました。
ありがとうございました。