0

I am developing an application for which the GUI is being written/ displayed using XAML. I have most of the desired elements displayed on the GUI at the moment, and am now working on the layout- positioning the various elements in particular places.

Most of the controls/ buttons, etc are aligned to the left, and stay 'bound' to the left hand side of the GUI even if I resize the window by dragging its left hand edge further to the left (the icons, etc move to stay their relative distance from the edge of the window).

However, I have one element which I want to align to the right, so that it will stay 'bound' to the right hand side of the GUI- if I resize the window by dragging its right hand edge further to the right, it should move to stay its relative distance from the edge of the window... at the moment, that element is staying at the position that I have drawn it (i.e. 900 pixels from the left), no matter what the size of the window is- so if I resize the width of the window to less than 900 pixels, that element cannot be seen.

The XAML markup I have used for the elements that I want bound to the left hand side of the GUI is, for example:

<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0, 0, 0, 0" HorizontalAlignment="Left" >
    <Image Source="C:\...\abc.png" Height="30" Width="40" />
</Button>

The XAML markup that I am trying to use for the element I want bound to the right hand side of the GUI is:

<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0, 0, 0, 0" HorizontalAlignment="Right" >
    <TextBlock>Button XYZ</TextBlock>
</Button>

However, setting the HorizontalAlignment to Right, doesn't actually move the text button to the right- it's still bound to the left hand side of the display... The only way I have found of moving it towards the right, is to set a large value for its 'x' position, i.e. Margin="900, 0, 0, 0", but then the position is not relative to the size of the window, so if I drag the right hand edge too far to the left, that button is outside the displayed area of the window, so I can't see it...

How I can I set the property of the button so that its position is relative to the right hand edge of the display window?

Edit

All of the elements in question are displayed inside the same <Grid> and <StackPanel> tags, i.e.

<StackPanel>
    <Grid ...>
        <Button ... HorizontalAlignment="Left">
        </Button>
        ...
        <Button ... HorizontalAlignment="Right">
        </button>
        ...
    </Grid>
    ...
</StackPanel>
Noble-Surfer
  • 3,052
  • 11
  • 73
  • 118

2 Answers2

1

It would be good to know the container including the button (grid, panel, others?):

Anyway If you put:

<Button HorizontalAlignment="Right"

in

<StackPanel Orientation="Horizontal">

It should work... Check too if there is no contradiction bring by the style...

Benoît
  • 87
  • 8
  • Thanks for your suggestion- the problem with that, as I understand, is that then everything in that `` tag would be aligned to the right... I have several elements inside that ``, and want some to be aligned to the right, and others aligned to the left.. I've updated my OP to show the structure of my XAML. – Noble-Surfer May 13 '16 at 11:00
  • I gave that a try, but if I put `Orientation="Horizontal"` inside my `` tag, it causes all of the buttons that I've already added to that `` to be displayed about half way down the page, rather than at the top, as they are at the moment... – Noble-Surfer May 13 '16 at 13:14
  • Actually I think it is a different purpose. You are talking about the VerticalAlignment Add VerticalAlignment="Top" in your button (and please provide us your code). – Benoît May 13 '16 at 13:30
  • I gave the `` tags a go too, but had no joy with those... I would expect it to be something to do with horizontal alignment though... I have outlined the structure of my XAML, showing what I'm trying to do, and where I'm trying to do it- was there any other code you wanted me to provide? – Noble-Surfer May 13 '16 at 14:15
1

The basic idea of the following solution is the Grid.

Create a ColumnDefinition with fixed width for each element you want aligned to the left, and a ColumnDefinition with fixed width for each element you want aligned to the right. On the middle, create a ColumnDefinition with a Width="*", so WPF first calculates the size of the other columns, based on their fixed length, and then it fills the remaining space with the middle-column. Remember that each button has to set the Grid.Column property correctly to declare the column it wants to belong to.

As you resize the Window, the Grid updates its layout and the flexible children. In this case, the only flexible child is the middle-column.

Here's a simple implementation:

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Grid.Resources>
      <Style TargetType="{x:Type Button}">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="10"/>
      </Style>
    </Grid.Resources>

    <Button Grid.Column="0" Content="Button1Left"/>
    <Button Grid.Column="1" Content="Button2Left"/>
    <Button Grid.Column="3" Content="Button1Right"/>
    <Button Grid.Column="4" Content="Button2Right"/>

  </Grid>

For more complete tutorials about the Grid control, check this, this and this.

Notice that I've set a simple style for the buttons with certain dimensions and margins only to make clear the result, but you can use your own style.

Massimiliano Kraus
  • 3,638
  • 5
  • 27
  • 47