Search code examples
wpfxamlitemscontrolcollectionviewsource

Sub ItemsControl not showing pictures


I have an ListView which items contain a nested ItemsControl with some TextBlocks and an Image Control.

    private string _PicturePreview;
    public string PicturePreview { get => _PicturePreview; set => _PicturePreview = value; }

I have changed now the source of the ListView to an CollectionViewSource to group the Items. Everything renders nicely even the pictures in the ListView but for some reason the images in the nested ItemsControl are not loading anymore. When I switch back to the direct Binding without CollectionViewSource the images are loading properly.

Does someone know why?

    <UserControl.Resources>

    <CollectionViewSource x:Key="Sales" Source="{Binding Bestellungen}" >

        <CollectionViewSource.GroupDescriptions>

            <PropertyGroupDescription PropertyName="OrderTyp"/>

        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

</UserControl.Resources>

<ListView Name="OrdersListView" Grid.Row="1" 
              ItemsSource="{Binding Source={StaticResource Sales}}"            
              SelectedItem="{Binding SelectedBestellung}" 
              AlternationCount="2" 
              IsSynchronizedWithCurrentItem="True" 
              ScrollViewer.CanContentScroll="False"
              >

        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Expander IsExpanded="True" >

                                        <Expander.Header>

                                            <DockPanel Background="#162270"  Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}" >
                                                <TextBlock FontWeight="Bold" FontSize="24" Foreground="White" Text="{Binding Path=Name}" Margin="10" />


                                            </DockPanel>
                                        </Expander.Header>
                                        <Expander.Content>
                                            <ItemsPresenter />
                                        </Expander.Content>
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListView.GroupStyle>

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Style.Triggers>
                    <Trigger Property="ItemsControl.AlternationIndex"  Value="0">
                        <Setter Property="Background" Value="White" />
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                        <Setter Property="Background" Value="#f2f2f2" />

                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="BorderThickness" Value="2"/>
                        <Setter Property="BorderBrush" Value="Red"/>
                    </Trigger>
                </Style.Triggers>

                <Setter Property="FontSize" Value="16"/>
                <Setter Property="BorderBrush" Value="Black"></Setter>
                <Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="FrameworkElement.Margin" Value="5"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                <GridView.Columns>

                    <GridViewColumn Header="Order">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Belegnummer}" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>


                    <GridViewColumn Header="Positionen" Width="800">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ItemsControl ItemsSource="{Binding Positionen}" >
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Grid Margin="0,0,10,5">

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="50" />
                                                    <ColumnDefinition Width="auto" />
                                                </Grid.ColumnDefinitions>

                                                <Image Width="50" Height="50" Source="{Binding PicturePreview, IsAsync=True}"/>
                                                <StackPanel Grid.Column="1" Orientation="Vertical">

                                                    <DockPanel>
                                                        <TextBlock Text="Stück: " FontWeight="Bold" FontSize="18"/>
                                                        <TextBlock Text="{Binding Stück, StringFormat=N0}" FontWeight="Bold" FontSize="18"/>
                                                    </DockPanel>

                                                </StackPanel>

                                            </Grid>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>

                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <GridViewColumn >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <Image Source="{Binding VersandartNummer, Converter={StaticResource StringToBitmapConverter}}" MaxHeight="100" MaxWidth="100"/>

                                </StackPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>


                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

Solution

  • Not sure why exactly setting IsAsync=True would not work in conjunction with a CollectionViewSource, but it is pointless to set it anyway. The getter of your PicturePreview does not do anything time-consuming at all, so there is no need to call it asynchronously.

    So just remove IsAsync from the Binding:

     <Image ... Source="{Binding PicturePreview}"/>
    

    Note that the built-in type conversion from string to ImageSource creates a BitmapFrame that is already loaded asynchronously in case the URL string references a web resource.