設置控件在堆棧面板中的位置

Question

我有一個ListBox具有多個ListBoxItem ，我使用了一個StackPanel我里面ListBoxItem有一個Image和一個TextBlock控制。 我正在基於TextBlock的選擇以編程方式設置Image的可見性。

我面臨一個問題，當圖像Collapsed ，TextBlock向左移動，這不是預期的。

<ListBoxItem Tag="ATCListBox">

    <StackPanel x:Name="ATCPanel" Orientation="Horizontal">

        <Image
            x:Name="atcTick"
            Visibility="Collapsed"
            Height="45" Width="45"
            Source="ms-appx:///Assets/greentick.png"
        />

        <TextBlock
            Text="ATC"
            Foreground="#0078D7"
            Margin="45,0,0,0"
            FontSize="32"
            FontFamily="{ThemeResource Bold}"
            FontWeight="Normal"
            SelectionHighlightColor="Blue"
        />

    </StackPanel>
</ListBoxItem>

Answer 1

Visiblity="Collapsed"表示<Image />元素將不占用任何空間-等同於CSS的display: none; -如果要保留空間，則應使用Visibility="Hidden" ，它等效於CSS的opacity: 0或visiblity: hidden 。

Answer 2

這是人們所期望的行為。 如果要保留空間，應將“可見性”設置為“隱藏”。

可見：顯示元素。
隱藏：不顯示元素，但在布局中為元素保留空間。
折疊：不顯示元素，也不在布局中為其保留空間。

。

Answer 3

您用WPF標記了您的問題，但是在回復中您說您正在使用UWP。

在UWP中，刪除了WPF Visibility="Hidden"選項，而可以使用Opacity="0"隱藏元素，同時仍確保其空間被占用。

請參閱此處： Visibilty的解決方法。隱藏狀態-Windows Phone 8.1 App開發

<Image
    x:Name="atcTick"
    Opacity="0"
    Height="45" Width="45"
    Source="ms-appx:///Assets/greentick.png"
/>