WPF - WrapPanel doesn't update/redraw images content

Question

I am loading images from a folder, showing them in a wrappanel in a windows 'Large Icons'-kind of way, so the user can choose/mark which images he would like.

Currently I am reading the image filelocations, add them to a list of strings, and sets the ItemSource to an ItemsControl which looks like this:

<ItemsControl x:Name="ItemsControlPhotos" Margin="10" >
    <ItemsControl.Template>
        <ControlTemplate>
            <WrapPanel FlowDirection="LeftToRight" IsItemsHost="true">
            </WrapPanel>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Image Source="{Binding}" Width="100" Height="100" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

That seems to work fine. But some of the images looks wierd, it is as if they are only drawn once. Please refer to this video for an example.

I´ve tried to manually update the list with several different approaches:

ItemsControlPhotos.Items.Refresh();

ItemsControlPhotos.InvalidateArrange();

ItemsControlPhotos.InvalidateMeasure();

ItemsControlPhotos.InvalidateVisual();

But none of it has any effect, so I´m kind of lost.

Thank you very much for your help! :)

EDIT: This is the full window markup:

    <Window x:Class="Name.Space"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="PhotoChooser" 
        WindowState="Maximized"
        Width="1280"
        >
  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Styles/Styles.xaml" />
      </ResourceDictionary.MergedDictionaries>
      <System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">40</System:Double>
    </ResourceDictionary>
  </Window.Resources>

  <Border BorderBrush="Black" BorderThickness="1" Background="White" Width="1280">

    <DockPanel>

      <Image Source="..\Images\BGTop.png" DockPanel.Dock="Top" Grid.Row="0" />

      <Grid DockPanel.Dock="Top" Margin="0,-80,0,0" >
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ScrollViewer>
          <ItemsControl x:Name="ItemsControlPhotos" Margin="10" >
            <ItemsControl.Template>
              <ControlTemplate>
                <WrapPanel FlowDirection="LeftToRight" IsItemsHost="true">
                </WrapPanel>
              </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemTemplate>
              <DataTemplate >
                <Image Source="{Binding}" Width="100" Height="100" />
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </ScrollViewer>
      </Grid>

      <Grid DockPanel.Dock="Bottom">
        <Button Height="50" Width="200" Click="ButtonBase_OnClick">Add photos</Button>
        <Image  Source="..\Images\BGBottom.png" Grid.Row="99" VerticalAlignment="Bottom" Margin="0,0,0,0" />
      </Grid>

    </DockPanel>
  </Border>
</Window>

this looks more like a problem of the parent container, what is the parent container? — thumbmunkeys, Mar 19 '14 at 09:44
You say you set the "the ItemSource to an ItemsControl". Is that what you meant? The `ItemsSource` should be an `ObservableCollection` or similar containing your data items. — Tim Rogers, Mar 19 '14 at 10:25
I had a List of strings, so I´ve changed it to an ObservableCollection, but it didnt help. Thanks though.. — Farsen, Mar 19 '14 at 10:58

score 0 · Answer 1 · answered Mar 19 '14 at 10:57

I´ve didnt really figure the problem out, but I found a solution while working with the project.

Instead of loading the whole image, I would like to only load a thumbnail, to speed up the process. So I followed this link: http://blogs.msdn.com/b/dditweb/archive/2007/08/22/speeding-up-image-loading-in-wpf-using-thumbnails.aspx

And now the problem is gone. Thank you for your contribution! :)

WPF - WrapPanel doesn't update/redraw images content

1 Answers1