Xaml 在TopAppBar中拉伸我的按钮

我正在Visual Studio 2015社区中开发一个通用应用程序，但当我在本地PC或Windows phone emulator上测试我的应用程序时，我在拉伸我的3个按钮时遇到了一个问题，我的代码就是这样得到的：

<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>

这就是我想要的：

---

这会让你达到目的：

<!--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>

---

首先，您将问题标记在几个不同的区域内，因此我们很难判断您在哪个平台上。它是WinRT 8.1应用程序还是UWP windows 10应用程序

但作为参考，如果它是UWP Win10应用程序，首先尝试使用以下XAML，它会创建一个带有1个主命令的CommandBar。在UWP平台上，将图标定位在屏幕右侧

<CommandBar IsOpen="True" IsSticky="True">
   <CommandBar.PrimaryCommands>
      <AppBarButton Icon="Add" />
   </CommandBar.PrimaryCommands>
</CommandBar>

您的尝试存在一些问题


您拥有的XAML比需要的更复杂
您试图通过设置页边距来对齐控件-这对
可变大小的容器
您没有使用CommandBar的任何功能，因此可能不需要它

相反，您可以使用简单的网格来制作所需的布局：

    <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>


真是一团糟。。。为什么所有的StackPanel，为什么所有的负利润率？请先考虑找一些XAML课程，然后再继续使用你的应用程序。Microsoft Virtual Academy可能有一些东西要给你。感谢Depchie的回复我在UWP windows 10应用程序上工作：）感谢Matt Lacey的回复和所有注释：）