ItemsControl中的拉伸按钮

我有一组数据项，应该在一行中的页面上表示。ItemsControl中的拉伸按钮

<ItemsControl ItemsSource="{x:Bind ViewModel.PresetsSecondLine, Mode=OneWay}" 
       Visibility="{x:Bind ViewModel.IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" 
       VerticalAlignment="Stretch" 
       HorizontalAlignment="Stretch" 
       Margin="0 5"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapGrid Orientation="Horizontal" 
         HorizontalChildrenAlignment="Stretch" 
         MaximumRowsOrColumns="4" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate x:DataType="entities:Preset"> 
      <controls:PresetButtonControl Preset="{x:Bind}" 
              VerticalAlignment="Stretch" 
              Width="290" 
              Margin="5" 
              Style="{StaticResource DashboardButtonStyle}" 
              HorizontalAlignment="Stretch" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 

    <ItemsControl.ItemContainerStyle> 
     <Style TargetType="ContentPresenter"> 
      <Setter Property="HorizontalAlignment" Value="Stretch"/> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
</ItemsControl>

该集合可能包含从零到四个项目显示在一行中。如果有4个项目，它们应该填满整行。当有少于4项就应该按比例显示：

，我发现这样的问题的解决与UniformGrid，可惜UniformGrid不是不再UWP支持。

来源

2015-10-26 Valentine

您可以使用与此相同的概念显示在此处（http://stackoverflow.com/questions/22871767/how-can-i-achieve-this-mix-of-stackpanel-and-uniformgrid-behavior）项目容器，这是提供我正确理解您的预期结果。 –

1）第一个简单的解决方案是使用ViewBox，它非常像UniformGrid。您可以如下使用：

<Viewbox Stretch="Uniform" MaxHeight="60" MaxWidth="200"> 
    <StackPanel Orientation="Horizontal"> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
      <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
    </StackPanel> 
</Viewbox>

2），或者你可以选择VariableSizedWrapGrid，这是支持安排行和列的子元素的布局面板。每个子元素可以跨越多行和多列。你可以在MSDN上找到详细信息。下面是一个简单的例子。

<VariableSizedWrapGrid Orientation="Horizontal" MaxWidth="150" > 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
     <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/> 
</VariableSizedWrapGrid >

其实自适应用户界面还有更多的其他方法。但上述两个看起来更直接简单。

让我知道，如果有什么不清楚。

来源

2015-10-28 09:44:35

ItemsControl中的拉伸按钮

回答

相关问题