WPF: How to quickly upload a large number of large images to the shell?

Question

I have about 45 worthy large images (about 680x1000) that need to be loaded into a simple user control (a rounded back board with a fill, image, text block and two side rectangles), and then displayed in the cover. Virtualization will not help here, since the images should be visible when loading the program.

I know inside BitmapImage init, I can set the width of the decoder, which helps a little, but id likes to load them all as full size, since I want to be able to resize images using the slider without losing quality (this part works quickly for the most part) . I know that one of the possibilities is to set the decoding width as some number that I set, since the maximum visible size could help.

I tried the multi-threaded approach found in How to upload images in the background? (first answer) however this made the program take LOT longer to load

Any ideas?

Current Load Code:

BitmapImage bmp = new BitmapImage(); bmp.BeginInit(); //bmp.DecodePixelWidth = 400; bmp.UriSource = new Uri(file.FullName); bmp.EndInit(); bmp.Freeze(); images.Add(bmp); 

XAML Code Example:

  <Border x:Name="backBorder" Background="Black" Padding="2" Margin="3" CornerRadius="3,3,4,4" BorderBrush="Black" BorderThickness="1" MouseEnter="backBorder_MouseEnter" MouseLeave="backBorder_MouseLeave" MouseLeftButtonUp="backBorder_MouseLeftButtonUp" > <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="16" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="15" /> </Grid.ColumnDefinitions> <Image x:Name="imageBox" Stretch="Fill" Width="{Binding Path=ImageWidth, ElementName=me}" Height="{Binding Path=ImageHeight, ElementName=me}" /> <Border x:Name="backRatingBorder" Grid.Column="1" Margin="3,0,0,0" BorderBrush="Blue" Background="White" BorderThickness="1"/> <Border x:Name="frontRatingBorder" Grid.Column="1" Margin="3,0,0,0" BorderBrush="Blue" Background="LightBlue" BorderThickness="1" VerticalAlignment="Bottom" Height="50"/> <TextBlock x:Name="textBlock" Grid.Row="1" Grid.ColumnSpan="2" TextAlignment="Center" Background="Transparent" Foreground="White" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="12" /> </Grid> </Border> 

.

UPDATE:

Well, I ended up making it more receptive by running a load image cycle in one desktop. After loading each image, Dispacher.Invoke is called to create the wrap element. After playing with it for a while, I got it to show each element, since it was created at the same time as before.

Answer 1

If you are happy with the overall performance, just upload the images, you can try this tutorial on the multi-threaded user interface. I managed to make it work quite easily, but if you download all the images in a loop, it will not update the visual until you finish downloading all the images. The user interface responds during this time, however, since the entire download is in a separate thread.

Alternatively, if you upload all your images in a loop, you can try an improved version of the Windows Forms DoEvents method (scroll down to the example). You would call it after loading each image, and this will give the UI the opportunity to update itself (handle user interaction, etc.). This is the approach that I used when loading map fragments for my project and is simpler than the first.