BottomAppBar 通用应用程序中的 2 个不同的堆栈面板
2 different stackpanels in a BottomAppBar Universal App
我正在尝试将元素放入我的 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>
感谢帮助:)
您只需将 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"
并在页面的第一个容器中添加以下代码段(对我来说,它是一个网格):
<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>
我正在尝试将元素放入我的 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>
感谢帮助:)
您只需将 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"
并在页面的第一个容器中添加以下代码段(对我来说,它是一个网格):
<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>