HeroWong
HeroWong

Reputation: 519

Don't render Image when Image.Source is empty

In the ListView, I need to show some images and text, only display the text when the Image.Source is empty. How to do?

<ListView ItemsSource="{x:Bind ViewModel.News}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="home:NormalNews">
            <StackPanel>
                <TextBlock Text="{x:Bind Title}"/>
                <Image Source="{x:Bind Thumbnail}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ViewModel Data Source like:

News.Add(new NormalNews{ Title = "title1", Thumbnail = "http://a.com/test.jpg" });
News.Add(new NormalNews{ Title = "title2", Thumbnail = "" });

When I tried to run this page, it stopped running.

Upvotes: 1

Views: 1784

Answers (2)

Mohanvel V
Mohanvel V

Reputation: 788

You can handle this using xaml converters.

Add a converter and define a key for it in your page.

In XAML page

<converter:ImageUriConverter x:Key="ImageUriConvert"/>

In your list

<Image Source="{Binding Thumbnail,Converter={StaticResource ImageUriConvert}}"/>

Converter class code

class ImageUriConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value.ToString() == string.Empty)
        {
            return new BitmapImage();
        }
        return new BitmapImage(new Uri(value.ToString()));
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Upvotes: 2

Monish Koyott
Monish Koyott

Reputation: 374

While you are populating the ViewModel object, do this:

   ViewModel.News.Add(new NormalNews{
Thumbnail=(the Thumbnail source which you will be using),
Title=(the Thumbnail source which you will be using)==""?"Your Title":""});

This will set your Title to the specified string when your Thumbnail source is empty.

Hope this helps.

Upvotes: 0

Related Questions