'How can set absolute position on stackpanel or grid in xaml WPF

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.

c++sharpcsswpfxamlposition


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Geoffrey
Solution 3 Haseeb

Related Questions