WP7水平拉伸列表項與分組

Question

我想在WP7上實現ListBox分組。我發現這個article是非常有用的。其實我做了分組作品。但是我遇到了ListItem橫向拉伸的問題。我想我需要設置ItemContainerStyle並將Horizo​​ntalContentAlignment更改爲Stretch。但它不適用於這種情況（如果直接設置ItemTemplate，它將起作用）。有什麼建議麼？非常感謝！

這裏是代碼，ListItem應該被拉伸，但它居中。

C＃：

public class GroupingItemsControlConverter : IValueConverter 
{ 
    public object Convert(object value, Type tagetType, object parameter, CultureInfo culture) 
    { 
     var valueAsIEnumerable = value as IEnumerable; 
     if (null == valueAsIEnumerable) 
     { 
      throw new ArgumentException("GroupingItemsControlConverter works for only IEnumerable inputs.", "value"); 
     } 
     var parameterAsGroupingItemsControlConverterParameter = parameter as GroupingItemsControlConverterParameters; 
     if (null == parameterAsGroupingItemsControlConverterParameter) 
     { 
      throw new ArgumentException("Missing required GroupingItemsControlConverterParameter.", "parameter"); 
     } 
     var groupSelectorAsIGroupingItemsControlConverterSelector = parameterAsGroupingItemsControlConverterParameter.GroupSelector as IGroupingItemsControlConverterSelector; 
     if (null == groupSelectorAsIGroupingItemsControlConverterSelector) 
     { 
      throw new ArgumentException("GroupingItemsControlConverterParameter.GroupSelector must be non-null and implement IGroupingItemsControlConverterSelector.", "parameter"); 
     } 

     // Return the grouped results 
     return ConvertAndGroupSequence(valueAsIEnumerable.Cast<object>(), parameterAsGroupingItemsControlConverterParameter); 
    } 

    private IEnumerable<object> ConvertAndGroupSequence(IEnumerable<object> sequence, GroupingItemsControlConverterParameters parameters) 
    { 
     // Validate parameters 
     var groupKeySelector = ((IGroupingItemsControlConverterSelector)(parameters.GroupSelector)).GetGroupKeySelector(); 
     var orderKeySelector = ((IGroupingItemsControlConverterSelector)(parameters.GroupSelector)).GetOrderKeySelector(); 
     if (null == groupKeySelector) 
     { 
      throw new NotSupportedException("IGroupingItemsControlConverterSelector.GetGroupSelector must return a non-null value."); 
     } 

     // Do the grouping and ordering 
     var groupedOrderedSequence = sequence.GroupBy(groupKeySelector).OrderBy(orderKeySelector); 

     // Return the wrapped results 
     foreach (var group in groupedOrderedSequence) 
     { 
      yield return new ContentControl { Content = group.Key, ContentTemplate = parameters.GroupStyle }; 
      foreach (var item in group) 
      { 
       yield return new ContentControl { Content = item, ContentTemplate = parameters.ItemStyle }; 
      } 
     } 
    } 

    public object ConvertBack(object value, Type tagetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException("GroupingItemsControlConverter does not support ConvertBack."); 
    } 
} 

public class GroupingItemsControlConverterParameters 
{ 
    public DataTemplate GroupStyle { get; set; } 
    public DataTemplate ItemStyle { get; set; } 
    public IGroupingItemsControlConverterSelector GroupSelector { get; set; } 
}; 

public abstract class IGroupingItemsControlConverterSelector 
{ 
    public abstract Func<object, IComparable> GetGroupKeySelector(); 
    public virtual Func<IGrouping<IComparable, object>, IComparable> GetOrderKeySelector() { return g => g.Key; } 
} 

public class GroupingItemsControlConverterSelector : IGroupingItemsControlConverterSelector 
{ 
    public override Func<object, IComparable> GetGroupKeySelector() 
    { 
     return (o) => (o as ItemViewModel).Group; 
    } 
} 

XAML：

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.Resources> 
     <DataTemplate x:Key="GroupHeaderTemplate"> 
      <Border BorderBrush="Yellow" BorderThickness="1" Margin="12,3,12,12" Padding="6" VerticalAlignment="Center"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Grid.Column="0" Text="{Binding Number}" HorizontalAlignment="Left" Margin="6,0,0,0" FontSize="22" Foreground="White"/> 
        <TextBlock Grid.Column="1" Text="{Binding Name}" HorizontalAlignment="Right" Margin="0,0,6,0" FontSize="22" Foreground="White"/> 
       </Grid> 
      </Border> 
     </DataTemplate> 

     <DataTemplate x:Key="CustomItemTemplate"> 
      <Grid Margin="12,3,12,12" VerticalAlignment="Center"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Number}" HorizontalAlignment="Left" Margin="6,0,0,0" FontSize="22" Foreground="White"/> 
       <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Right" Margin="0,0,6,0" FontSize="22" Foreground="White"/> 
      </Grid> 
     </DataTemplate> 

     <local:GroupingItemsControlConverter x:Key="GroupingItemsConverter" /> 
     <local:GroupingItemsControlConverterSelector x:Key="GroupingItemsSelector" /> 
     <local:GroupingItemsControlConverterParameters x:Key="GroupingItemParameters" 
                 GroupStyle="{StaticResource GroupHeaderTemplate}" 
                 ItemStyle="{StaticResource CustomItemTemplate}" 
                 GroupSelector="{StaticResource GroupingItemsSelector}" 
                 /> 

     <Style TargetType="ListBoxItem" x:Key="CustomItemContainerStyle"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </Grid.Resources> 

    <ListBox x:Name="TheListBox" 
      ItemsSource="{Binding Items, Converter={StaticResource GroupingItemsConverter}, ConverterParameter={StaticResource GroupingItemParameters}}" 
      ItemContainerStyle="{StaticResource CustomItemContainerStyle}" /> 
</Grid> 

Answer 1

列表框分組？您應該考慮使用Silverlight Toolkit中的LongListSelector。爲了簡化綁定，您可以使用LongListCollection集合類型（有關詳細信息，請參閱entire example）。

然後，你可以簡單地創建應用程序，組值，例如像這樣：