Stretch my buttons in a TopAppBar - xaml

Question

I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:
<CommandBar Height="51" >
<CommandBar.Content>
<Grid>
<StackPanel>
<Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
<Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Button.Content>
<Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
This what I want to get:

Answer 1

This is going to get you there:
<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid>
<!--Left element-->
<Rectangle Margin="10" Height="35" Width="35" Fill="Red"
HorizontalAlignment="Left"/>
<!--Right elements together in a horizontal StackPanel-->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>

Answer 2

First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?
But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.
<CommandBar IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add" />
</CommandBar.PrimaryCommands>
</CommandBar>
More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx

Answer 3

There are a few issues with what you're trying.
The XAML you have is more complicated than it needs to be.
You've tried to align controls by setting margins - this doesn't work with
variable sized containers.
You're not using any of the functionality of the CommandBar so you probably don't need it.
Instead you can make the layout you desire with a simple grid.:
<Grid VerticalAlignment="Top" Height="51">
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image1" Source="images/name.png" />
<Image x:Name="image" Source="images/icon.png"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button >
<Image Source="images/home.png" />
</Button>
<Button>
<Image Source="images/search.png" />
</Button>
<Button >
<Image Source="images/profil.png" />
</Button>
</StackPanel>
</Grid>