StackPanel 中的折叠网格更改 StackPanel 中其他控件的位置答案

【问题标题】：Collapsed Grid in StackPanel change position of other controls in StackPanelStackPanel 中的折叠网格更改 StackPanel 中其他控件的位置
【发布时间】：2015-06-01 09:32:01
【问题描述】：

我有这个Xaml页面：

            <StackPanel Orientation="Horizontal">
                <Grid x:Name="inkGrid0" Margin="0,0,0,0" HorizontalAlignment="Left" >
                    <Canvas x:Name="inkCanvas0" Width="570">
                        <Canvas.Background>
                            <ImageBrush x:Name="DImage0" ImageSource="{Binding}"/>
                        </Canvas.Background>
                    </Canvas>
                </Grid>
                <Grid x:Name="inkGrid1" Margin="0,0,0,0" HorizontalAlignment="Right" >
                    <Canvas x:Name="inkCanvas1" Width="570">
                        <Canvas.Background>
                            <ImageBrush x:Name="DImage1" ImageSource="{Binding}"/>
                        </Canvas.Background>
                    </Canvas>
                </Grid>
            </StackPanel>

将inkGrid0.Visibility = Visibility.Collapsed 添加到我的代码后，inkGrid1 将占据inkGrid0 的左侧位置，该inkGrid0 现在已折叠。

当inkGrid0被折叠时如何使inkGrid1在它的位置？

【问题讨论】：

标签： c# xaml windows-store-apps windows-8.1 visibility

【解决方案1】：

如果您不想处理大小调整等问题，只需将其不透明度设置为 0。但是您必须考虑点击或单击等交互。

设置不透明度而不是可见性在性能方面非常有用，而且很简单。

【讨论】：

不透明效果很好，但没有真正的解决方案吗？ @jerrynixon
您可以使用带有 MinWidth 属性的 Grid ColumnDefinitions。不要使用 Stackpanel ，而是使用 Grid 和 2 个 ColumnDefinitions ：

【解决方案2】：

您可以使用Visibility.Hidden。但是，我提出了一个更优雅的解决方案，即使用Grid 和ColumnDefinitions。

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

    <!-- Your Controls Here -->
    <Grid x:Name="inkGrid0" ... />

    <Grid x:Name="inkGrid1" Grid.Column="1" ... />
</Grid>

【讨论】：

Visibility下只有Visible和Collapse，不存在Hidden。我尝试添加Grid.ColumnDefinition，但没有成功。
我的错，没看到你是 Windows 8.1。 ColumnDefinitions 在StackPanel 中不可用，请确保您使用的是Grid。

【解决方案3】：

 <StackPanel Orientation="Horizontal">
        <Grid x:Name="inkGrid0" Margin="0,0,0,0" HorizontalAlignment="Left" Background="Black" Visibility="Hidden">
            <Canvas x:Name="inkCanvas0" Width="570">
                <Canvas.Background>
                    <ImageBrush x:Name="DImage0" />
                </Canvas.Background>
            </Canvas>
        </Grid>
        <Grid x:Name="inkGrid1" Margin="0,0,0,0" HorizontalAlignment="Right" Background="Blue"  >
            <Canvas x:Name="inkCanvas1" Width="570">
                <Canvas.Background>
                    <ImageBrush x:Name="DImage1" />
                </Canvas.Background>
            </Canvas>
        </Grid>
    </StackPanel>

您可以使用 Visibility.Hidden 或使用固定列宽

    <StackPanel Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="570" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid x:Name="inkGrid01" Margin="0,0,0,0" HorizontalAlignment="Left" Background="Black" Visibility="Collapsed">
                <Canvas x:Name="inkCanvas01" Width="570">
                    <Canvas.Background>
                        <ImageBrush x:Name="DImage111" />
                    </Canvas.Background>
                </Canvas>
            </Grid>
            <Grid x:Name="inkGrid11" Margin="0,0,0,0" HorizontalAlignment="Right" Background="Blue" Grid.Column="1">
                <Canvas x:Name="inkCanvas11" Width="570">
                    <Canvas.Background>
                        <ImageBrush x:Name="DImage11" />
                    </Canvas.Background>
                </Canvas>
            </Grid>

        </Grid>

    </StackPanel>

【讨论】：