Search code examples
c#xamluwp-xamlwinui-3winui

How to keep StackPanel up, when resizing window?


I would like that when I minimize the window, the StackPanel stays on its position (Stay on top, don't go under) while the window is minimized.

I'm not looking for a direct answer, I just want to find some direction, some help on where to start.

Problem (GIF Format)

GIF Of The Problem

XAML Code

<Grid Padding="25">
    <NavigationView PaneDisplayMode="Top">
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Test" IsSelected="False" Icon="PreviewLink" />
        </NavigationView.MenuItems>

        <Viewbox StretchDirection="Both" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="1111">
            <StackPanel Width="1400" Height="1000" Margin="85, 0, 0, 150">

                <Border CornerRadius="25" Background="#1D1D1D" Height="180" Width="300" Margin="-1099, 50, 10, 10">

                    <Canvas Background="#1D1D1D" Width="250" Height="200" HorizontalAlignment="Left">
                        <TextBlock FontSize="40" Padding="0, 35, 300, 0" Margin="115, 35, 0, 0" Text="Test"
                                   Foreground="#1D1D1D"
                                    />
                    </Canvas>
                </Border>

                <Border CornerRadius="25" Background="#1D1D1D" Height="180" Width="300" Margin="-420, -190, 10, 10">


                    <Canvas Opacity="50" Background="#1D1D1D" Width="250" Height="200" HorizontalAlignment="Left">
                        <TextBlock FontSize="40" Padding="0, 35, 300, 0" Margin="115, 35, 0, 0" Text="Test"
                                   Foreground="#1D1D1D"
                                    />
                    </Canvas>
                </Border>


                <Border CornerRadius="25" Background="#1D1D1D" Height="180" Width="300" Margin="260, -190, 10, 10">

                    <Canvas Background="#1D1D1D" Width="250" Height="200" HorizontalAlignment="Left">
                        <TextBlock FontSize="40" Padding="0, 35, 300, 0" Margin="115, 35, 0, 0" Text="Test"
                                   Foreground="#1D1D1D"
                                    />
                    </Canvas>
                </Border>


                <Border CornerRadius="25" Background="#1D1D1D" Height="180" Width="300" Margin="940, -190, 10, 10">

                    <Canvas Background="#1D1D1D" Width="250" Height="200" HorizontalAlignment="Left">

                        <TextBlock FontSize="35" Padding="0, 35, 300, 0" Margin="60, 35, 0, 0" Text="Test"
                                   Foreground="#1D1D1D"
                                    />
                    </Canvas>
                </Border>
            </StackPanel>
        </Viewbox>

    </NavigationView>

</Grid>

Solution

  • the StackPanel stays on its position (Stay on top, don't go under) while the window is minimized.

    The problem looks ViewBox auto resize cause, you could try to set Stretch property as Fill to make StackPanel stays on the top, but it will make Canvas item shape change when resize the window.

    The other way is fix ViewBox on the top of parent container by setting up VerticalAlignment as top.