WPF positioning of control relative to parent

I have a window with a background image over which I need to position two buttons.

The window currently contains a grid - but it can be any panel as all I need are the buttons.

Because this will run on different screen sizes the background image will stretch to fill the screen so absolute positioning of the buttons is not going to work.

I am looking for something like the html

margin: 20% auto 0 auto; // 20% of screen height top margin and centering horizontally.

Is there something in XAML that natively supports this?

Currently I am writing code in the ContentRendered handler to get screen height and width and apply margins to the buttons with code.

Is this the only way?
LVL 65
Julian HansenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

If it's already a grid, and you don't have many other controls in the grid (which could interfere), you can use a combination of button alignment and grid rowdefinitions.

For the height in percentage, you can add two row definitions, one with height *, one with heigh 4* (equaling 20% and 80%).  Then set the buttons horizontal alignement to center, vertical alignment to top, and put it in the second row.

            <RowDefinition Height="*" />
            <RowDefinition Height="4*" />
        <Button HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >Button Text</Button>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Just to cover the base of your question though, if your requirements were more complex, using ContentRendered is generally a last resort, especially just for positioning.

Have a look at ValueConverters:

What you would do in this case, is bind the button's margin to the parent's ActualHeight, and implement a custom ValueConverter, which would translate the height value passed in, into a Thickness value to be returned with the top as the calculated percentage.
Note that it's important to use ActualHeight on the binding instead of Height.
Julian HansenAuthor Commented:
Thank you - both answers are equally useful as I will be using both in the project (not on the same window).

Selection of accepted solution was arbitary and based purley on chronological order of the posts.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.