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

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

VB
1If intMode = 0 then
2   image1.Visibility = Windows.Visibility.Visible
3   image2.Visibility = Windows.Visibility.Hidden
4Else
5   image1.Visibility = Windows.Visibility.Hidden
6   image2.Visibility = Windows.Visibility.Visible
7End If

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

xml
1<Window
2  x:Class="Questions363405.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Window.Resources>
8    <BitmapImage x:Key="image1" UriSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
9    <BitmapImage x:Key="image2" UriSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u6/61616/KsOkZfql_thumbnail.jpg" />
10  </Window.Resources>
11  <Grid>
12    <Grid.ColumnDefinitions>
13      <ColumnDefinition />
14      <ColumnDefinition />
15      <ColumnDefinition />
16      <ColumnDefinition />
17      <ColumnDefinition />
18    </Grid.ColumnDefinitions>
19
20    <!--  StackPanelは（デフォルトでは）縦に並んでいる  -->
21    <StackPanel>
22      <Image Source="{StaticResource image1}" />
23      <Image Source="{StaticResource image2}" />
24    </StackPanel>
25
26    <!--  Hiddenは隙間が空く  -->
27    <StackPanel Grid.Column="1">
28      <Image Source="{StaticResource image1}" Visibility="Hidden" />
29      <Image Source="{StaticResource image2}" />
30    </StackPanel>
31
32    <!--  Collapsedは詰められる  -->
33    <StackPanel Grid.Column="2">
34      <Image Source="{StaticResource image1}" Visibility="Collapsed" />
35      <Image Source="{StaticResource image2}" />
36    </StackPanel>
37
38    <!--  Gridは何もしなければ重なる  -->
39    <Grid Grid.Column="3" VerticalAlignment="Top">
40      <Image Source="{StaticResource image1}" />
41      <Image Source="{StaticResource image2}" />
42    </Grid>
43
44    <!--  重なっているのでHiddenでもよい（サイズが違う場合はHidden・Collapsedの意味が違うことに注意）  -->
45    <Grid Grid.Column="4" VerticalAlignment="Top">
46      <Image Source="{StaticResource image1}" />
47      <Image Source="{StaticResource image2}" Visibility="Hidden" />
48    </Grid>
49  </Grid>
50</Window>