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

Question

我有这个 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 折叠时让 inkGrid1 回到原来的位置？

Answer 1

您可以使用 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>

Answer 2

 <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>

Answer 3

如果您不想调整大小，只需将其不透明度设置为 0 etc.However您必须考虑点击或点击等交互。

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

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

Collapsed Grid in StackPanel change position of other controls in StackPanel

c#

xaml

visibility

windows-store-apps

windows-8.1