Question

我正在Visual Studio 2015社区中开发一个通用应用程序，但是当我在本地PC或Windows手机模拟器上测试我的应用程序时，我在伸展我的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中拉伸我的按钮

3 个答案: