Images that dynamically loaded from web url are invisible at load

Question

I'm using dynamically loaded images for background of my grid elements in ItemsControl's DataTemplate

<ItemsControl Name="Category_Items" HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="10" Name="WrapPanel" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Cursor="Hand" Margin="4,0,4,8" Width="{Binding Converter={StaticResource PercentageConverter}, ElementName=WrapPanel, Path=ActualWidth, ConverterParameter='0,25'}"
                                                           Height="{Binding Converter={StaticResource PercentageConverter}, Path=ActualWidth, RelativeSource={RelativeSource Self},ConverterParameter='0,6'}">
                    <Grid.Background>
                        <ImageBrush ImageSource="{Binding Logo, Converter={StaticResource ImageConverter}}" />
                    </Grid.Background>
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,0,5"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

as you can see my grid elements width and height properties are determined by WrapPanel's actual width and its own height.

I'm using below Converter Class to get image's uri and load it from web.

public class ImageConverter : IValueConverter
{
    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {

        BitmapImage image = new BitmapImage();
        image.BeginInit();
        image.UriSource = new Uri(value as string, UriKind.Absolute);
        image.CacheOption = BitmapCacheOption.None;
        image.EndInit();
        return image;
    }

    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

it seems the work fine. But the images are invisible at load. After dragging or resizing the main window make the images appear.

UPDATE Here is the UI, I try to build.

I tried to refresh the user control after load. But it didnt help.

Any Ideas?

Answer 1

after hours of struggling, i gave up to use the image as grid's background. Instead, I used Image Element and everything worked well.

<ItemsControl Name="Category_Items" HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="10" Name="WrapPanel" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid ClipToBounds="True" Cursor="Hand" Margin="4,0,4,8" Width="{Binding Converter={StaticResource PercentageConverter}, ElementName=WrapPanel, Path=ActualWidth, ConverterParameter='0,333'}"
                                                           Height="{Binding Converter={StaticResource PercentageConverter}, Path=ActualWidth, RelativeSource={RelativeSource Self},ConverterParameter='0,6'}">
                    <Image Source="{Binding Logo, IsAsync=True}" Stretch="UniformToFill" />
                    <lib:TextPath Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,0,5" FontSize="22" Fill="White" Stroke="Black" FontWeight="Bold"/>                        
                    <Grid.InputBindings>
                        <MouseBinding MouseAction="LeftClick" Command="{Binding GetCompanies}" CommandParameter="{Binding Id}"></MouseBinding>
                    </Grid.InputBindings>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>