是否可以使用VariableSizedGridView进行虚拟化?

时间:2016-03-02 13:53:49

标签: c# gridview windows-runtime windows-phone-8.1

我正在创建一个Windows Phone 8.1(WinRT)应用程序。主页模板是两个GridView(每行2个网格),网格高度不同(一个项可能占用一行而另一个可能占用两行)。该设计类似于pinterest应用程序(pin.it),除了pinterest应用程序中的不同高度。我能够使用VariableSizedGridView实现它,我也做了延迟加载。但我发现没有虚拟化,因为在向下滚动时内存不断增加。您能否建议我如何使用像pinterest app这样的虚拟化实现可变大小的网格?

请检查以下代码:

<local:VariableSizedGridView x:Name="samples"
                        ItemsSource="{Binding listofData}"
                        Margin="0,0,-24,0">
        <local:VariableSizedGridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid ItemHeight="190" 
                                       ItemWidth="{Binding Converter={StaticResource ScreenWidthMultiplier}, ConverterParameter=1}"
                                                       Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </local:VariableSizedGridView.ItemsPanel>
        <local:VariableSizedGridView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <local:MainPageTemplateSelector Content="{Binding}">
                        <local:MainPageTemplateSelector.BigTemplate>
                            <DataTemplate>
                                <Grid Height="380" Background="White"
                                                      Margin="0,3,6,3">
                                    <Grid Margin="12" Background="Pink">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="250"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Image Source="{Binding ImagePath}"
                                                           Stretch="Fill"/>
                                    <Grid Grid.Row="1" Background="Black">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="35"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Text="{Binding Name}"  Foreground="Red"                                                                   
                                                                   Margin="12 3 12 5"/>
                                        </Grid>
                                    </Grid>                                      
                                </Grid>
                            </DataTemplate>
                        </local:MainPageTemplateSelector.BigTemplate>

                        <local:MainPageTemplateSelector.SmallTemplate>
                            <DataTemplate>
                                <Grid Height="190" Width="{Binding Converter={StaticResource ScreenWidthMultiplier}, ConverterParameter=1}"
                                        Background="Blue"              Margin="0,3,6,3">
                                    <Grid Margin="12" Background="Green">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="100"/>
                                        <RowDefinition />
                                    </Grid.RowDefinitions>                                        
                                    <Image Height="150"
                                                           Stretch="Fill"
                                                           Source="{Binding ImagePath}"/>
                                    <Grid Grid.Row="1" Background="Black">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="30"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Foreground="Red"
                                                               Text="{Binding Name}"
                                                                   TextWrapping="Wrap"
                                                                   Margin="12 5 12 5"/>                                            
                                    </Grid>
                                    </Grid>
                                </Grid>
                            </DataTemplate>
                        </local:MainPageTemplateSelector.SmallTemplate>
                    </local:MainPageTemplateSelector>
                </Grid>
            </DataTemplate>
        </local:VariableSizedGridView.ItemTemplate>
    </local:VariableSizedGridView>

和VariableSizedGridView

public class VariableSizedGridView : GridView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        dynamic model = item;
        try
        {
            element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, model.ColSpan);
            element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, model.RowSpan);
        }
        catch
        {
            element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 1);
        }
        finally
        {
            element.SetValue(VerticalContentAlignmentProperty, VerticalAlignment.Stretch);
            element.SetValue(HorizontalContentAlignmentProperty, HorizontalAlignment.Stretch);
            base.PrepareContainerForItemOverride(element, item);
        }
    }

谢谢你, Neenu

0 个答案:

没有答案