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

本文关键字：StackPanel 位置 其他 控件 折叠 网格 | 更新日期: 2023-09-27 17:51:17

我有这个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处于其位置？

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

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

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

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

 <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>
相关文章：