0

私は自分のアプリケーションを可能な限り効率的にしようと取り組んでおり、Windows Phone 8 でデータを自動的に仮想化する ListBox について読んだことがありますItemContainerStyle。ListBox 内で使用するスタイルを実装しましたが、これが仮想化に影響するかどうかはわかりませんListBox にバインドされたアイテムの。私のアイテムは画像であり、MainPage が初期化されると、IsolatedStorage から ObservableCollection に読み込まれます。この解決策は大丈夫ですか?そうでない場合、より良い推奨事項はありますか?

スタイル

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="MyStyle" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property ="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" 
            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalAlignment}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>                              
                                <VisualState x:Name="MouseOver">
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd" Storyboard.TargetProperty="BorderThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>                                
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd" Storyboard.TargetProperty="BorderThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                </VisualState>
                                <VisualState x:Name="Unfocused">
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}">
                            <Viewbox MaxHeight="128" MaxWidth="128" >
                                <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
                            </Viewbox>
                        </Border>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">                                    
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>                                    
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

リストボックス

<ListBox x:Name="Recent" Margin="8"
                     SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
                     ItemContainerStyle="{StaticResource MyStyle}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>

MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        Recent.ItemsSource = App.PictureList.Pictures;
    }

App.xaml.cs

public static PictureRepository PictureList
    {
        get
        {
            return PictureRepository.Instance;
        }
    }

PictureRepository.cs

#region Constants

    public const string IsolatedStoragePath = "Pictures";

    #endregion

    #region Fields

    private readonly ObservableCollection<Picture> _pictures = new ObservableCollection<Picture>();

    #endregion

    #region Properties

    public ObservableCollection<Picture> Pictures
    {
        //get { return _pictures; }
        get;
        private set;
    }

    #endregion

    #region Singleton Pattern

    private PictureRepository()
    {
        LoadAllPicturesFromIsolatedStorage();
    }

    public static readonly PictureRepository Instance = new PictureRepository();

    #endregion

    /// <summary>        
    /// Saves to local storage
    /// This method gets two parameters: the captured picture instance and the name of the pictures folder in the isolated storage
    /// </summary>
    /// <param name="capturedPicture"></param>
    /// <param name="directory"></param>
    public void SaveToLocalStorage(CapturedPicture capturedPicture, string directory)
    {
        //call IsolatedStorageFile.GetUserStoreForApplication to get an isolated storage file
        var isoFile = IsolatedStorageFile.GetUserStoreForApplication();
        //Call the IsolatedStorageFile.EnsureDirectory extension method located in the Common IsolatedStorageFileExtensions class to confirm that the pictures folder exists.
        isoFile.EnsureDirectory(directory);

        //Combine the pictures folder and captured picture file name and use this path to create a new file 
        string filePath = Path.Combine(directory, capturedPicture.FileName);
        using (var fileStream = isoFile.CreateFile(filePath))
        {
            using (var writer = new BinaryWriter(fileStream))
            {
                capturedPicture.Serialize(writer);
            }
        }
    }

    /// <summary>
    /// To load all saved pictures and add them to the pictures list page
    /// </summary>
    public CapturedPicture LoadFromLocalStorage(string fileName, string directory)
    {
        //To open the file, add a call to the IsolatedStorageFile.GetUserStoreForApplication
        var isoFile = IsolatedStorageFile.GetUserStoreForApplication();

        //Combine the directory and file name
        string filePath = Path.Combine(directory, fileName);
        //use the path to open the picture file from the isolated storage by using the IsolatedStorageFile.OpenFile method
        using (var fileStream = isoFile.OpenFile(filePath, FileMode.Open, FileAccess.Read))
        {
            //create a BinaryReader instance for deserializing the CapturedPicture instance
            using (var reader = new BinaryReader(fileStream))
            {
                var capturedPicture = new CapturedPicture();
                //create a new instance of the type CapturedPicture called CapturedPicture.Deserialize to deserialize the captured picture and return it
                capturedPicture.Deserialize(reader);
                return capturedPicture;
            }
        }
    }

    /// <summary>
    /// To load all the pictures at start time
    /// </summary>
    private void LoadAllPicturesFromIsolatedStorage()
    {
        //add call to the IsolatedStorageFile.GetUserStoreForApplication to open an isolated storage file
        var isoFile = IsolatedStorageFile.GetUserStoreForApplication();
        //Call the IsolatedStorageFile.EnsureDirectory extension method located in the Common IsolatedStorageFileExtensions class to confirm that the pictures folder exists
        isoFile.EnsureDirectory(IsolatedStoragePath);

        //Call the IsolatedStorageFile.GetFileNames using the pictures directory and *.jpg as a filter to get all saved pictures
        var pictureFiles = isoFile.GetFileNames(Path.Combine(IsolatedStoragePath, "*.jpg"));

        var pictures = new List<Picture>();

        //Iterate through all the picture files in the list and load each using the LoadFromLocalStorage you created earlier
        foreach (var pictureFile in pictureFiles)
        {
            var picture = LoadFromLocalStorage(pictureFile, IsolatedStoragePath);
            //_pictures.Add(picture);
            pictures.Add(picture);
        }

        Pictures = new ObservableCollection<Picture>(pictures.OrderBy(x => x.DateTaken));
    }

EDIT** LongListSelector を使用した新しい実装? ビューの ListBox を に変更し、WrapPanel を模倣しているように見える をLongListSelector設定しました。LayoutMode="Grid"必要な仮想化が存在することを願っています。提案やアドバイスはありますか?

MainPage.xaml

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Height="108" Width="108" Margin="6,6" Orientation="Horizontal">               
            <Viewbox Width="108" Height="108">
                <Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
            </Viewbox>
        </StackPanel>
    </DataTemplate>        
</phone:PhoneApplicationPage.Resources>

<phone:LongListSelector x:Name="Recent" Margin="8" 
                                    SelectionChanged="recent_SelectionChanged" 
                                    toolkit:TiltEffect.IsTiltEnabled="True"
                                    LayoutMode="Grid" GridCellSize="108,108"
                                    ItemTemplate="{StaticResource ItemTemplate}"/>

ご了承ください

4

1 に答える 1

2

あなたは仮想化していません。ListBox の ItemsPanel を設定すると、仮想化する機能が削除されます。

<ListBox x:Name="Recent" Margin="8"
                 SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
                 ItemContainerStyle="{StaticResource MyStyle}">
    <ListBox.ItemsPanel> <!-- This is removing virtualization-->
         <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal" />
         </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

これをテストするには、ItemsPanel のカスタマイズを削除し、1000 個のアイテムを追加します。リストボックスをスクロールして、コントロールの読み込み時間を確認します。カスタマイズを再度追加すると、パフォーマンスが低下し、読み込み時間が長くなることに気付くでしょう。

そうは言っても、 WPF 仮想化ラップ パネルの一部がWP8でどのように機能するかを確認したい場合があります。以前に行った WPF プロジェクトでそれらを試してみましたが、私が望んでいたほどの運はありませんでしたが、結果は異なる場合があります。

于 2013-08-18T02:31:12.143 に答える