Question

I have a page like this:

<Grid>
   <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
       here are contents
       they are forever absolutely in the center of the screen
       no matter of the resolution/size
   </StackPanel>
</Grid>

Everything is working fine. But now I want to add a back button in the top-left corner.

And I don’t want to split the grid into 2 columns and 2 rows like this:

the contents are no longer absolutely centered, even we can split the grid by percent, because the contents are sometimes very wide and sometimes very narrow.

I want to know how can I keep the contents horizontal/vertical aligned “Center”, and then set the back button’s position relatively to the content.

Answer 1

slightly hacky ansewer

You might be able to achieve by positioning your stackpanel in the center, and then set a negative left margin the width of the button to shift everything left by the required amount…

<Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-45,0,0,0">
        <button with width and padding totalling 45px />
        here are contents
        they are forever absolutely in the center of the screen
        no matter of the resolution/size
    </StackPanel>
</Grid>