Question

我想在WP7上实现ListBox分组。我发现这个article非常有用。实际上我做了分组工作。但是我遇到了ListItem水平拉伸的问题。我想我需要设置ItemContainerStyle并将HorizontalContentAlignment更改为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

ListBox分组？您应该考虑使用Silverlight Toolkit中的LongListSelector。为了简化绑定，您可以使用LongListCollection集合类型（查看entire example，了解详细信息）。

然后，您只需创建对值进行分组的应用，例如：

longlistselector grouping

WP7中具有分组的水平拉伸列表项

1 个答案: