WP7でグループ化された横方向のストレッチリスト項目

Question

WP7でリストボックスのグループ化を実装したい。私はこれが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を確認してください）。