Collapsed Grid in StackPanel change position of other controls in StackPanel

Question

I have this Xaml Page:

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

Once I add inkGrid0.Visibility = Visibility.Collapsed to my code, the inkGrid1 take the left position of the inkGrid0 which is now collapsed.

How to make inkGrid1 at its place when inkGrid0 is collapsed?

Answer 1

Simply set it's opacity to 0 if you don't want to deal with resizing etc.However you must consider interactions like tapping or clicking.

Setting an opacity instead of Visibility is much usefull in terms of performance and it's easy.