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中的拉伸按鈕

回答

相關問題