WP8中ItemPanelTemplate上的VariableSizedWrapGrid

Question

在WP8上我想在这样的页面上显示一个列表：

我知道我可以使用WP8.1和VariableSizedWrapGrid控件轻松完成此操作。但我需要让它在WP8.0上运行。所以我尝试了Kinnara的工具包：https://www.nuget.org/packages/WPtoolkit.Kinnara/ 其中包含一个VariableSizedWrapGrid。

我可以进行我想要的显示（请参见屏幕截图）但我无法在LongListSelector或ListBox中将其用作ItemPanelTemplate。

以下是我尝试过的代码（它受到一种适用于Windows 8的方法的启发，但遗憾的是它似乎无法在WP8上运行）以及此博客帖子：http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2012/09/14/windows-8-xaml-and-displaying-multiple-sized-items.aspx。

           <local:SpecificListBox x:Name="LB_Wings" ItemTemplate="{StaticResource IT_Wings}" >
                <local:SpecificListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:VariableSizedWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"></toolkit:VariableSizedWrapGrid>
                    </ItemsPanelTemplate>
                </local:SpecificListBox.ItemsPanel>
                <local:SpecificListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                    <Setter Property="toolkit:VariableSizedWrapGrid.RowSpan"   Value="{Binding ItemSize}" />
                        <Setter Property="toolkit:VariableSizedWrapGrid.ColumnSpan"  Value="{Binding ItemSize}" />
                    </Style>
                </local:SpecificListBox.ItemContainerStyle>
            </local:SpecificListBox>

数据模板：

  <DataTemplate x:Key="IT_Wings">          
            <Grid Margin="0,0,12,12" >
                <Image Source="{Binding BI_List}" Stretch="UniformToFill" </Image>
            </Grid>
    </DataTemplate>

SpecificListBox只是一个继承ListBox并覆盖PrepareContainerForItemOverride方法的类：

class SpecificListBox : ListBox
{
    public SpecificListBox() { }
    protected override void PrepareContainerForItemOverride(System.Windows.DependencyObject element, object item)
    {    
        dynamic lateBoundItem = item;

        int sizeFactor = (int)lateBoundItem.ItemSize;

        element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, sizeFactor);
        element.SetValue(VariableSizedWrapGrid.RowSpanProperty, sizeFactor);  
        base.PrepareContainerForItemOverride(element, item);
    }
}

现在在后面的代码中，我只用一个项目列表（具有ItemSize属性）填充LB_Wings：

LB_Wings.ItemsSource = listOfItems; //a list of items that have the ItemSize property.

不幸的是我得到了错误：＆＃34;无法创建类型的实例：SpecificListBox＆＃34;当我初始化我的页面时。

我认为我接近解决方案。任何人都可以帮我做这种diplay（在WP8上看起来很自然）但是有一个ListBox和一个ItemPanelTemplate吗？

非常感谢

Answer 1

您只需将SpecificListBox设为 public 类即可。 ：）

public class SpecificListBox : ListBox

修改

此外，您不需要SpecificListBox的ItemContainerStyle中的绑定。我用Horizo​​ntal / VerticalContentAlignment = Stretch改变了那些，因为我觉得这样看起来更好。如果没有这个，DataTemplate中的控件就不会占用该项目的所有位置。这是改变的xaml：

<local:SpecificListBox x:Name="LB_Wings" ItemTemplate="{StaticResource IT_Wings}" >
    <local:SpecificListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:VariableSizedWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"></toolkit:VariableSizedWrapGrid>
        </ItemsPanelTemplate>
    </local:SpecificListBox.ItemsPanel>
    <local:SpecificListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </local:SpecificListBox.ItemContainerStyle>
</local:SpecificListBox>