在 TopAppBar 中拉伸我的按钮

Question

我正在 Visual Studio 2015 社区开发一个通用应用程序，但是当我在本地 PC 或 Windows phone 上测试我的应用程序时，我无法拉伸我的 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>

这是我想要得到的：

Answer 1

这会让你到达那里：

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

首先，您在几个不同的区域中标记了您的问题，因此我们很难判断您在哪个平台上。它是 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>

可以在 MSDN 此处找到有关命令栏中显示的内容和方式的更多信息 https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx

Answer 3

您的尝试存在一些问题。

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

在 TopAppBar 中拉伸我的按钮

Stretch my buttons in a TopAppBar

xaml

windows-10

uwp