BottomAppBar 通用应用程序中的 2 个不同的堆栈面板答案

【问题标题】：2 different stackpanels in a BottomAppBar Universal AppBottomAppBar 通用应用程序中的 2 个不同的堆栈面板
【发布时间】：2015-12-17 12:57:31
【问题描述】：

我正在尝试像这样将元素放在我的 BottomAppBar 中：

使用此代码，我得到了左侧的两个堆栈面板，您能否更正我的代码：

<Page.BottomAppBar>
        <CommandBar Background="#eff0f2">
            <CommandBar.Content>
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch">
                        <Image Source="images/1.png" Height="35" Width="35" />
                        <ComboBox Margin="2" BorderThickness="0" SelectedItem="Français">
                            <ComboBoxItem Content="Français" />
                            <ComboBoxItem Content="Anglais" />
                        </ComboBox>
                        <Button VerticalAlignment="Stretch" Background="#eff0f2" >
                            <Button.Content>
                                <TextBlock Text="Conditions des données" Foreground="#336699"></TextBlock>
                            </Button.Content>
                        </Button>
                        <Button VerticalAlignment="Stretch" Background="#eff0f2" Margin="0">
                            <TextBlock Text="-Mentions légales" Foreground="#336699"></TextBlock>
                        </Button>
                        <Button VerticalAlignment="Stretch" Background="#eff0f2" Margin="0">
                            <TextBlock Text="-Impressum" Foreground="#336699"></TextBlock>
                        </Button>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"  Grid.Row="0" Grid.Column="1" >
                        <Image Source="images/marque.png" Height="35" Width="35"  />
                        <TextBlock Text="2015 OAASE Corporation|All Right Reserved." Foreground="#666666" Margin="10" />
                    </StackPanel>
                </Grid>
            </CommandBar.Content>
        </CommandBar>
    </Page.BottomAppBar>

感谢您的帮助:)

【问题讨论】：

当我在中使用 AppBar 时这可能吗

标签： xaml windows-10 win-universal-app windows-10-universal

【解决方案1】：

您只需将 Stretch HorizontalContentAlignment 添加到 CommandBar ：

<CommandBar HorizontalContentAlignment="Stretch">

编辑： @user3821206，快速解决您的响应问题的方法是为第一列设置最小宽度，并将第二列的宽度设置为自动。当屏幕太小时，右边部分被裁剪：

<Grid.ColumnDefinitions>
    <ColumnDefinition MinWidth="550" Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

更好的补充解决方法是使用 VisualStateManager 和 AdaptiveTrigger。例如，如果屏幕尺寸小于 720，您可以隐藏右侧面板。为此，请为您的右侧 Stackpanel 命名：

<StackPanel x:Name="RightPanel"

并在页面的第一个容器中添加以下 sn-p（对我来说，它是一个网格）：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!-- Start of snippet -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <!-- Edit style for small screen -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="RightPanel.Visibility"
                            Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <!-- Disable previous changes for large screen -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <!-- End of snippet -->
</Grid>

【讨论】：