Изображения, которые динамически загружаются с веб-адреса, невидимы при загрузке.

Я использую динамически загружаемые изображения для фона элементов сетки в шаблоне данных ItemsControl.

<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>

как вы можете видеть, свойства ширины и высоты моих элементов сетки определяются фактической шириной WrapPanel и его собственной высотой.

Я использую класс конвертера ниже, чтобы получить uri изображения и загрузить его из Интернета.

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

вроде нормально работает. Но изображения невидимы при загрузке. После перетаскивания или изменения размера главного окна отобразите изображения.

ОБНОВЛЕНИЕ Вот пользовательский интерфейс, который я пытаюсь создать. Вот пользовательский интерфейс, который я пытаюсь создать.

Я попытался обновить пользовательский элемент управления после загрузки. Но это не помогло.

Любые идеи?


person volkh4n    schedule 01.07.2015    source источник
comment
Вам не нужен этот преобразователь. WPF имеет встроенное автоматическое преобразование типов из Uri и string в ImageSource.   -  person Clemens    schedule 01.07.2015
comment
Не могли бы вы добавить некоторые подробности о макете, который вы пытаетесь достичь? Выглядит странно привязывать размеры Grid в DataTemplate к части размеров ItemTemplate.   -  person Clemens    schedule 01.07.2015
comment
@ Клеменс, ты прав. Я изменил свойство ImageSource на {Binding Logo}, но проблема осталась прежней.   -  person volkh4n    schedule 01.07.2015
comment
@Clemens, я обновил свой вопрос изображением пользовательского интерфейса, который я пытаюсь создать.   -  person volkh4n    schedule 01.07.2015
comment
Я бы предложил удалить привязки Width и Height в DataTemplate и заменить WrapPanel на UniformGrid. UniformGrid позволяет указать фиксированное количество строк или столбцов. Затем вы должны поместить ItemsControl в сетку, чтобы он растягивался в обоих направлениях.   -  person Clemens    schedule 01.07.2015
comment
Я думал, что количество строк или столбцов не фиксировано. Элементы элемента ItemsControl будут умножены.   -  person volkh4n    schedule 01.07.2015
comment
Разве ConverterParameter='0,25' не означает, что у вас четыре столбца? Очевидно, вы все еще не предоставили достаточно информации, чтобы предложить альтернативный подход.   -  person Clemens    schedule 01.07.2015
comment
Давайте продолжим обсуждение в чате.   -  person volkh4n    schedule 01.07.2015


Ответы (1)


после нескольких часов борьбы я отказался от использования изображения в качестве фона сетки. Вместо этого я использовал элемент изображения, и все работало хорошо.

<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>
person volkh4n    schedule 02.07.2015