WPF StackPanel内での複数のコントロールの表示順の切り替えについて

Question

お世話になります。
昨日、TabItemの中に複数のImageを入れたいということで、複数のContentを設定できるStackPanelについて教えて頂き、無事に複数のImageを設置することができましたが、その流れで複数のImageの表示をを条件によって切り替えてみようと思い以下のように書いてみました。

If intMode = 0 then
   image1.Visibility = Windows.Visibility.Visible
   image2.Visibility = Windows.Visibility.Hidden
Else
   image1.Visibility = Windows.Visibility.Hidden
   image2.Visibility = Windows.Visibility.Visible
End If     

結果的に各Imageについては、Visibilityで指定した通りの動きで表示/非表示の切り替えは出来たようなのですが、Image1のVisibilityをHiddenとし、Image2のVisibilityをVisibleにした場合（上記のElseを通った場合）、画面には何も表示されませんでした。
これは恐らくimage1の下にimage2があるので、image2のVisibilityをVisibleにしてもimage1の下に隠れてしまっているのではないかと思っておりますが、コントロールの順番を動的に変更する方法は何かありますでしょうか。
宜しくお願いします。

Answer 1

StackPanelはアイテムを並べていくコントロールです（デフォルトでは下に並んでいきます）

Hiddenではそれぞれの位置は変わらずに表示だけ消えます。
Collapsedにするとそのアイテムがなかったように詰められます。

xamlをいじらないのであれば、VBコードのHiddenをCollapsedに変えてください。
VBコードをいじらないのであれば、xamlのStackPanelをGridに変えてください（VerticalAlignment等をいじる必要があるかもしれません）

StackPanelやGridの違いや特性は、レイアウトの基本ですのでしっかり確認しておいてください。
パネルの概要 - WPF .NET Framework | Microsoft Docs

<Window
  x:Class="Questions363405.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450">
  <Window.Resources>
    <BitmapImage x:Key="image1" UriSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
    <BitmapImage x:Key="image2" UriSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u6/61616/KsOkZfql_thumbnail.jpg" />
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <!--  StackPanelは（デフォルトでは）縦に並んでいる  -->
    <StackPanel>
      <Image Source="{StaticResource image1}" />
      <Image Source="{StaticResource image2}" />
    </StackPanel>

    <!--  Hiddenは隙間が空く  -->
    <StackPanel Grid.Column="1">
      <Image Source="{StaticResource image1}" Visibility="Hidden" />
      <Image Source="{StaticResource image2}" />
    </StackPanel>

    <!--  Collapsedは詰められる  -->
    <StackPanel Grid.Column="2">
      <Image Source="{StaticResource image1}" Visibility="Collapsed" />
      <Image Source="{StaticResource image2}" />
    </StackPanel>

    <!--  Gridは何もしなければ重なる  -->
    <Grid Grid.Column="3" VerticalAlignment="Top">
      <Image Source="{StaticResource image1}" />
      <Image Source="{StaticResource image2}" />
    </Grid>

    <!--  重なっているのでHiddenでもよい（サイズが違う場合はHidden・Collapsedの意味が違うことに注意）  -->
    <Grid Grid.Column="4" VerticalAlignment="Top">
      <Image Source="{StaticResource image1}" />
      <Image Source="{StaticResource image2}" Visibility="Hidden" />
    </Grid>
  </Grid>
</Window>

Comments

[matsutake]

ご回答、ありがとうございました。
教えて頂きました通り、HiddenからCollapsedに変更した結果、思い通り画面が切り替わり表示されました。
ありがとうございました。