I have a stack panel which has a Geometry button , text block and two Flat Buttons .. Even though I have given each of these elements individual horizontal alignments they seem to be all stacked from my Left hand side ...
I want my Geometry button and Text block to be aligned towards the Left hand side and the Flat Button Aligned towards the Right hand Side of the stack panel .
As of now they are all lined up from the left hand side in their respective order
Why hasn't XAML picked up my alignements? Anything I can do about it?
Appreciate your help
Here is my code
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,10,0,0">
<GeometryButton Command="{}"
Geometry="{StaticResource {}"
ToolTip="{}"
HorizontalAlignment="Left"/>
<TextBlock
Text="{}"
Style="{}"
Margin="0,10,10,10"
Foreground="Black"
HorizontalAlignment="Left"/>
<FlatButton Command="{}"
Content="{}"
Style="{}"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
IsDefault="True"
Margin="0"
MinWidth="80"
HorizontalAlignment="Right"
/>
<FlatButton Command="{}"
Content="{}"
Style="{}"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
MinWidth="80"
Margin="10,0,0,0"
HorizontalAlignment="Right"
/>
</StackPanel>
EDIT :- My Expected output is something like the Below ...
Also using Grid is not an Option for me
-------------------------------------------------------------------
| [Geo Button] [Text Block] [Flat Button][Flat Button]|
| |
| |
| |
-------------------------------------------------------------------
Instead of StackPanel
you can use Grid
with column definitions. Example:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
Margin="8"
VerticalAlignment="Center"
Content="Button1"/>
<TextBlock
Grid.Column="1"
Margin="8"
Text="TextBlock"
Style="{Binding}"
Foreground="Black"
VerticalAlignment="Center"/>
<Button
Grid.Column="3"
Margin="8"
Content="Button2"
VerticalAlignment="Center"/>
<Button
Grid.Column="4"
Margin="8"
Content="Button3"
VerticalAlignment="Center"/>
</Grid>
EDITED
Another solution:
<DockPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button Content="Geo Button" VerticalAlignment="Center" Margin="6"/>
<Button Content="Text Block" VerticalAlignment="Center" Margin="6"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
<Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
</StackPanel>
</DockPanel>