CODEWITHSUNDEEP
wpf
Dennis R
Dennis R

Reputation: 67

How to place a button correctly on the bottom/right?

I try to place a button 10px from the right and bottom corner. In the Designer the button is about 10px from the corner, but not in the program (it is only 1px from the corner which looks a bit bad). Is this a bug in WPF?

<Window x:Class="wpftest.test"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:local="clr-namespace:wpftest" mc:Ignorable="d" Title="test"               
        Height="300" Width="300">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="207,239,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.133,-0.75"/>
    </Grid>
</Window>

this is how it looks in the program this is how it looks in the Designer

Upvotes: 4

Views: 13721

Answers (3)

Mark W
Mark W

Reputation: 1050

You will definitely want to be able to understand xaml markup if you intend on using WPF or UWP. Drag and drop in the designer rarely gives you what you really want, in my experience. However, the designer and the properties tell you exactly what is going on. Did you see what happens if you maximize your window at runtime? The button will be nowhere near the bottom, right corner. It will always be 207px from the left and 239px from the top, as defined. See below for a quick explanation.

  • Blue - the object is constrained a distance from this edge.
  • Red - the value by which the object is constrained.
  • Green - the object is not constrained to this edge.

enter image description here

If you requirement be that the button be 10px from the right edge and 10px from the bottom, you can define that by clicking the "links" for the constraints to make the intended edges the reference edges (clicking them toggles them, so "turn off" the left and top), and adjust the values. You'll probably want to get rid of that transform that the designer put in for you as well.

enter image description here

Upvotes: 8

maulik kansara
maulik kansara

Reputation: 1107

when working with the margins, always preferred nearest side. here for your "right side" as HorizontalAlignment and "Bottom Side" as VerticalAlignment as nearest.

Upvotes: 0

AVK
AVK

Reputation: 3923

You are setting your button based on Margin. Try Changing your button to below.

<Button x:Name="button" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Margin="10"/>

Upvotes: 4

Related Questions