CODEWITHSUNDEEP
c#.netwpf
Yuki Kutsuya
Yuki Kutsuya

Reputation: 4088

WPF controls do not align

NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.

How do I keep the button in place?

My XAML code: 

<Window x:Class="Plugin_Manager.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
    <Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
    <ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
        <ListView.View>
            <GridView>
                <GridViewColumn/>
            </GridView>
        </ListView.View>
    </ListView>

</Grid>

enter image description here enter image description here

Upvotes: 0

Views: 3013

Answers (3)

Nicholas Pappas
Nicholas Pappas

Reputation: 10624

If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!

Here is a Grid example that does what you are looking for.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <ListView Grid.Row="0" />

    <Button Grid.Row="1"  HorizontalAlignment="Right" Content="Push Me" />

</Grid>

I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.

Here is a DockPanel version.

<DockPanel>
    <Button DockPanel.Dock="Bottom"  HorizontalAlignment="Right" Content="Push Me" />
    <ListView />
</DockPanel>

To create your buffer between the button and the window chrome you could do a few different things:

  1. <Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
  2. <Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
  3. <Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).

  4. <Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).

    • Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.

A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).

So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.

(this ends my "usability and look-and-feel is important" side note) :)

Upvotes: 7

ZanderAdam
ZanderAdam

Reputation: 434

Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.

<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>

Looking at the sample code, it is your margins and the alignment you have that are probably causing that.

Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF! 

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
    <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
    <TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
    <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>

Upvotes: 0

Fede
Fede

Reputation: 44038

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>

Upvotes: 1

Related Questions