18

Is it possible to set my StackPanel or Grid to be position absolute like CSS. In CSS is have property Position of the elements and can set to be relative, absolute and is working good.

In XAML can make Grid, StackPanel to use position absolute.

somePeaple
  • 199
  • 1
  • 1
  • 11
  • can you elaborate on what you mean with "absolute". Do you mean absolute with respect to the window? Otherwise the `Margin` in combination with `HorizontalAlignment` and `VerticalAlignment` should be able to accomplish what you want. – Geoffrey Jan 28 '16 at 15:06
  • Yeah absolute with respect to the window. – somePeaple Jan 28 '16 at 15:21

3 Answers3

29

You have to use Canvas in order to set absolute position in WPF.

In case of buttons in a window, here is a sample : 

<Window x:Class="tobedeleted.MainWindow"
        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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
     <Canvas>
        <Button Canvas.Left="10" Canvas.Bottom="20">Bottom left</Button>
    </Canvas>
</Window>

The output is :

enter image description here

Feel free to ask if help is needed.

Vasilievski
  • 773
  • 6
  • 13
4

Absolute positioning defeats the purpose of WPF, but I agree, sometimes there is no other way so you have two basic options.

  1. Elements under the root grid
  2. Elements in a canvas that is the same size as the window (as Vasilievski pointed out)

Code example:

<Window x:Class="WpfApplication1.Window3"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="Window3" Height="300" Width="300">
    <Grid>

        <Rectangle Fill="Red" Width="100" Height="120"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Panel.ZIndex="13"
                   Margin="12,34"
                   />
        <Rectangle Fill="Green" Width="100" Height="120"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Margin="24,54"
                   />

        <Canvas>
            <Rectangle Canvas.Left="5" Canvas.Top="5" Panel.ZIndex="2" Fill="Yellow" Width="120" Height="30" />
            <Rectangle Canvas.Left="25" Canvas.Top="17" Panel.ZIndex="0" Fill="Blue" Width="120" Height="30" />
        </Canvas>

    </Grid>
</Window>
Geoffrey
  • 956
  • 1
  • 10
  • 16
  • 8
    Absolute positioning doesn't defeat the purpose of WPF, I think you're confused about the term. – Ryan Apr 18 '18 at 20:27
  • @Ryan I agree particularly graphically rich scenarios – StayOnTarget Apr 02 '19 at 15:07
  • Yes, Absolute positioning is the way to go. Finally I can put the controls where I want, rather that having them jump around to stupid places. See also this question for how to set in the code behind. https://stackoverflow.com/questions/21515135/change-propety-canvas-left-and-canvas-top-in-codebehind-winrt – Paul McCarthy Dec 16 '19 at 16:40
0

try this.

<StackPanel>
   <Canvas>
      <TextBlock Canvas.Left="10" Canvas.Top="6" Text="Choose a value from combobox:" Width="180"/>
      <ComboBox Canvas.Left="190" Canvas.Top="4" Width="180"></ComboBox>
   </Canvas>
</StackPanel>

RESULT:

enter image description here

Haseeb
  • 746
  • 7
  • 22