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现在已折叠的inkGrid1的左侧位置。

如何使inkGrid1在它的地方，当inkGrid0被倒塌？

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

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

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

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