0

現在、アプリケーションの IsolatedStorage に数百の画像 (数千になる可能性があります) があり、読み込み時間が途方もなく遅いです。多くの場合、アプリケーションがフリーズして失敗します。ユーザーは CameraCaptureTask を使用して写真を撮ることができ、各写真は IsolatedStorage に保存され、LongListSelector を使用してビューに表示されます。ViewBox を使用して、LongListSelector の GridCellSize を小さいサイズ (縦横比 108 に応じて最大幅または高さ) に設定しようとしましたが、IsolatedStorage からロードするときの時間または実際の画像サイズを減らすのに役立ちません。IsolatedStorage から画像のサムネイル サイズのバージョンを読み込んでビューに入力することで、読み込み/レンダリング時間を短縮する簡単な方法があるかどうか疑問に思っていました。次に、ビュー内の画像が選択されると、

MainPage.xaml

<phone:PhoneApplicationPage.Resources>

<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="Padding" Value="10,5,10,6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
    <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBorderBrush}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
</Style>
<Style x:Key="RadioButtonStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked"/>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

..

            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
                        <ContentControl.Resources>
                            <Storyboard x:Name="CheckedStoryboard">
                                <ColorAnimation Duration="0" To="#FF1BA1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brd" d:IsOptimized="True"/>
                            </Storyboard>
                        </ContentControl.Resources>
                        <RadioButton x:Name="radioButton" HorizontalAlignment="Stretch" Margin="0,0,0,0" GroupName="A" Background="Black" Style="{StaticResource RadioButtonStyle1}" >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Click">
                                    <eim:ControlStoryboardAction Storyboard="{StaticResource CheckedStoryboard}"/>
                                </i:EventTrigger>
                                <i:EventTrigger EventName="Unchecked">
                                    <eim:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource CheckedStoryboard}"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <Border x:Name="MyBorder" Background="Transparent">
                                <Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3" BorderBrush="Transparent">
                                    <toolkit:ContextMenuService.ContextMenu>
                                        <toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">                                                                                                        <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="{Binding Path=LocalizedResources.MainPage_ContextMenu_Delete, Source={StaticResource LocalizedStrings}}" Click="deleteContextMenuItem_Click"/>
                                        </toolkit:ContextMenu>
                                    </toolkit:ContextMenuService.ContextMenu>
                                    <Viewbox Width="108" Height="108">
                                        <Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
                                    </Viewbox>
                                </Border>
                            </Border>
                        </RadioButton>
                    </ContentControl>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>

        </phone:LongListSelector>

MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{   
    if (Settings.AscendingSort.Value)
    {
        App.PictureList.Pictures = new ObservableCollection<Models.Picture>(App.PictureList.Pictures.OrderBy(x => x.DateTaken)); 
        Recent.ItemsSource = App.PictureList.Pictures;
    }
    else
    {
        App.PictureList.Pictures = new ObservableCollection<Models.Picture>(App.PictureList.Pictures.OrderByDescending(x => x.DateTaken));
        Recent.ItemsSource = App.PictureList.Pictures;
    }    
}

...

private void cameraTask_Completed(object sender, PhotoResult e)
{
    if (e.TaskResult == TaskResult.OK)
    {
        var capturedPicture = new CapturedPicture(e.OriginalFileName, stream);
    }
}

private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var item = (sender as LongListSelector).SelectedItem;
    if (item == null)
        return;

    capturedPicture = null; 
    //Get picture
    capturedPicture = (sender as LongListSelector).SelectedItem as CapturedPicture;

    if (capturedPicture != null)
    {                
        fileName = capturedPicture.FileName;
    }
}

App.xaml.cs

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

PictureRepository.cs

#region Constants

public const string IsolatedStoragePath = "Pictures";

#endregion

#region Fields

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

#endregion

#region Properties

public ObservableCollection<Picture> Pictures
{
    get { return _pictures; }
    set{ pictures = value; }
}

#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 pictureFiles = isoFile.GetFileNames(Path.Combine(IsolatedStoragePath, ""));

    //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);
    }
}

LoadAllPicturesFromIsolatedStorageは、IsolatedStorage からの画像が読み込まれている場所です。読み込み/レンダリング時間を短縮するために、画像サイズを最大幅または高さ 108 に縮小するための最良かつ最も効率的な方法は何でしょうか? そして、これはそもそもこれを行うための最良の方法ですか？ヘルプ、提案、または考えをいただければ幸いです。

編集: CapturedPicture.cs、Picture.cs を追加

CapturedPicture.cs

[DataContract]
public class CapturedPicture : Picture
{
    [DataMember]
    public byte[] ImageBytes
    {
        get;
        set;
    }

    [DataMember]
    public string FileName
    {
        get;
        set;
    }

    protected override BitmapSource CreateBitmapSource()
    {
        BitmapSource source = null;
        if (ImageBytes != null)
        {
            using (var stream = new MemoryStream(ImageBytes))
            {
                source = PictureDecoder.DecodeJpeg(stream);
                //source = PictureDecoder.DecodeJpeg(stream, 500, 500);
            }
        }
        return source;
    }

    public CapturedPicture()
    {
    }

    public CapturedPicture(string capturedFileName, Stream capturedImageStream)
    {
        ImageBytes = ReadImageBytes(capturedImageStream);
        //DateTaken = DateTime.Now.ToLongDateString();
        //DateTaken = DateTime.Now.ToString();
        //DateTaken = DateTime.Now.ToString("o");
        DateTaken = DateTime.UtcNow;
        FileName = System.IO.Path.GetFileName(capturedFileName);
    }

    private byte[] ReadImageBytes(Stream imageStream)
    {
        byte[] imageBytes = new byte[imageStream.Length];
        imageStream.Read(imageBytes, 0, imageBytes.Length);
        return imageBytes;
    }

    public override void Serialize(BinaryWriter writer)
    {
        base.Serialize(writer);
        writer.Write(ImageBytes.Length);
        writer.Write(ImageBytes);
        writer.Write(FileName);//writer.WriteString(FileName);
    }

    public override void Deserialize(BinaryReader reader)
    {
        base.Deserialize(reader);
        int bytesCount = reader.ReadInt32();
        ImageBytes = reader.ReadBytes(bytesCount);
        FileName = reader.ReadString();
    }

Picture.cs

[DataMember]
public string Address
{
    get { return GetValue(() => Address); }
    set { SetValue(() => Address, value); }
}

[DataMember]
public string Note
{
    get { return GetValue(() => Note); }
    set { SetValue(() => Note, value); }
}

[DataMember]
public DateTime DateTaken
{
    get { return GetValue(() => DateTaken); }
    set { SetValue(() => DateTaken, value); }
}

[IgnoreDataMember]
public BitmapSource Source
{
    get
    {
        return CreateBitmapSource();
    }
}

protected abstract BitmapSource CreateBitmapSource();

//In the Serialize method, store the Position, Address, Note, and DateTaken properties
public virtual void Serialize(BinaryWriter writer)
{            
    writer.Write(DateTaken.ToString()); //writer.WriteString(DateTaken);
}

//In the Deserialize method, read the data in the same order you’ve written it
public virtual void Deserialize(BinaryReader reader)
{
    DateTaken = DateTime.Parse(reader.ReadString());
}
4

1 に答える 1

0

コードを見て推測する必要があった場合、問題は、コンテナがスクロールされて表示されるときに、電話フレームワークがオンデマンドで画像をロードできないことです。コードは、これらのファイルが表示されるときではなく、ページの読み込み時にすぐにすべてのファイルをデコードします。Windows.Storageまた、新しい非同期名前空間の代わりに非推奨の分離ストレージ API を使用しているため、UI スレッドがブロックされる可能性があります。

これは好きなようにリファクタリングできますが、次のようなものを検討してください。

コードビハインド

public partial class MyPage : PhoneApplicationPage
{
    public MyPage()
    {
        InitializeComponent();

        this.Loaded += async (sender, e) =>
        {
            var folder = await ApplicationData.Current.LocalFolder.GetFolderAsync("Pictures");
            var images = await folder.GetFilesAsync();
            Recent.ItemsSource = images.ToList();
        };
    }
}

XAML

<phone:LongListSelector x:Name="Recent" Margin="0,0,0,72" LayoutMode="Grid" GridCellSize="108,108">
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path}" Margin="6" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

これは非常に単純な例ですが、結果として、StorageFileLongListSelector.ItemSource プロパティのリストを作成してそれにバインドできます。Image.Source 依存関係プロパティは非常に順応性があるため、画像ファイルのパス文字列を直接渡すことができ、画像コンテナーの仕様に合わせてスケーリングおよびトリミングされた画像ソース オブジェクトを作成するという面倒な作業を実行します。このプロセスは、画像がスクロールして表示されるときにのみ発生するため、一度に読み込まれる画像はほんの一握りです。LongListSelector は、ユーザーがリストをスクロールするときにアイテム テンプレートをオンデマンドでレンダリングする作業を行い、その時点で新しい Image コントロールとそのソースを生成します。

なんらかの理由で、これらのレコードを CapturedPicture クラスに変換する必要があると感じた場合は、遠慮なくお問い合わせください。マップする必要がある最も重要な情報は、これらのファイル オブジェクトの Path プロパティです。これは、ソース バインディングとしてイメージ コントロールに提供する有効な URI であるためです。

- 編集 -

変更された読み込みプロセスを示すコードを追加しました。INotifyPropertyChangedUI が Pictures コレクションの変更を通知されるように、このレポのインターフェイスを接続し、setter をプライベートに変更しました (これは、希望する動作に関する私の想定です)。

読み取り操作と書き込み操作については、System.IO 名前空間の StorageFile クラスの拡張機能を確認できます。using ディレクティブにインポートするだけで、次のものにアクセスできます。

save メソッドの実装は、save ディレクトリのパラメーターとして何を受け入れるかによって、はるかに複雑になる場合があります。複数のサブディレクトリのフル パスでディレクトリ パラメーターを指定できるようにすると、コードが大幅に変更され、最初のレベルのサブディレクトリへの保存のみが許可されます。各サブフォルダーの存在を確認し、存在しない場合は作成する必要があります。それ以外の場合は、Pictures フォルダーにアクセスするための以下のコード サンプルで、ターゲット フォルダーを取得する方法を十分に示すことができます。

サンプル PictureRepository.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Windows.Storage;
using Windows.Storage.Search;

namespace MyApp.Media
{
    public class PictureRepository : INotifyPropertyChanged
    {
        #region Constants

        public const string IsolatedStoragePath = "Pictures";

        #endregion

        #region Fields

        private ObservableCollection<StorageFile> _pictures = new ObservableCollection<StorageFile>();

        #endregion

        #region Properties

        public ObservableCollection<StorageFile> Pictures
        {
            get { return _pictures; }
            private set
            {
                RaisePropertyChanged("Pictures");
                _pictures = value;
            }
        }

        #endregion

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion

        #region Singleton Pattern

        private PictureRepository()
        {
            // This call will warn that execution of the method will continue without waiting on completion
            // This is unimportant because the remainder of the constructor is not dependent on its initialization
            // and the UI will be notified of the change in the collection and respond at that time
            LoadAllPicturesFromIsolatedStorageAsync();
        }

        public static readonly PictureRepository Instance = new PictureRepository();

        #endregion

        /// <summary>
        /// To load all the pictures at start time
        /// </summary>
        private async Task LoadAllPicturesFromIsolatedStorageAsync()
        {
            // Create or open the target folder
            var folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync(IsolatedStoragePath, CreationCollisionOption.OpenIfExists);

            // Create a query for files with the JPEG extension
            var query = folder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".jpg" }));

            // Update the Pictures collection, which will raise the PropertyChanged event and cause the UI to bind
            Pictures = new ObservableCollection<StorageFile>(await query.GetFilesAsync());
        }
    }
}
于 2013-09-23T22:55:06.203 に答える