Question

我有一组数据项应该在一行的页面上表示。

<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个项目，它们应该填满整行。如果少于4个项目，则应按比例显示：

我发现UniformGrid存在此类问题的解决方案，但不幸的是{8}在UWP中不再支持UniformGrid。

Answer 1

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

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

实际上还有更多其他自适应UI方式。但上述两个看起来更直接，更容易。

如果有任何不清楚的地方，请告诉我。

在ItemsControl中拉伸按钮

1 个答案: