ItemsControl 中的拉伸按钮 [英] Stretching buttons in ItemsControl

问题描述

我收集了应连续显示在页面上的数据项.

I have collection of data items that should be represented on a page in a row.

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

该集合可能包含连续显示的 0 到 4 个项目.如果有 4 个项目，它们应该填满整行.当少于 4 个项目时，它们应按比例显示:

The collection might contain from zero to 4 items displayed in a row. If there are 4 items, they should fill whole row. When there are less than 4 items they should be displayed proportionally:

我通过UniformGrid 找到了解决此类问题的方法，不幸的是，UWP 不再支持UniformGrid.

I found the solution of such issue with UniformGrid, unfortunately UniformGrid is not longer supported in UWP.

推荐答案

1) 第一个简单的解决方案是使用 ViewBox，它很像 UniformGrid.您可以使用如下:

1) The first easy solution is to use ViewBox which is much like UniformGrid. You can use as below:

<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 上找到详细信息.下面是一个简单的例子.

2) Or you can choose VariableSizedWrapGrid, which is a layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns. You can find detail info on MSDN. Below is a simple example.

<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 还有更多其他方法.但以上两个似乎更直接和容易.

Actually there are still more other ways for adaptive UI. But the above two seem more straight forward and easy.

如果有什么不清楚的，请告诉我.

Let me know if anything unclear.

这篇关于ItemsControl 中的拉伸按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！