Статьи

WinRT: привязка образов XAML по сравнению с Windows Phone 7

Декабрь 24, 2018

проблема

В Windows Phone 7 можно привязать Source-свойство Image-control  либо к строке, либо к Uri, и они оба работают. В WinRT привязка к Uri не работает.

Учитывая следующее XAML:

 
<ListBox x:Name="Items">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Width="500" Height="500" Source="{Binding Image}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

И следующий вид модели:

 
public class ItemVM
    {
        public string Image { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
    }

образИзображение отображается правильно в WinRT. Но если модель представления содержит Uri вместо строки, изображение не отображается.

 
public class ItemVM
    {
        public Uri Image { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
    }

Это может быть проблематично, если вы хотите использовать виртуальные машины на разных платформах.

Одно из возможных решений

Если вам нужно заставить работать привязку к Uri, вы можете создать следующий конвертер значений:

 
public class ImageUriValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            var uri = value as Uri;
            if (uri == null)
                return null;
 
            var result = uri.ToString();
            return result;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

И используйте это в вашей привязке:

  
<Page.Resources>
        <local:ImageUriValueConverter x:Name="Converter"/>
    </Page.Resources>
     
    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <ListBox x:Name="Items">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Width="500" Height="500" Source="{Binding Image, Converter={StaticResource Converter}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Другое возможное решение

Это похоже на бета-версию, которая может быть очень хорошо исправлена ​​в финальной версии.

Обновление 5.2.2012

Мортен написал отличный отзыв в комментариях. По какой-то причине блог не позволяет мне одобрить его, поэтому вот его полный комментарий:

Try this instead: 
<Image> 
    <Image.Source> 
         <BitmapImage UriSource="{Binding ImageUri}" /> 
   </Image.Source> 
</Image>

 
   
This avoids all the converter code, and also allows you to be more specific on your BitmapImage wrt CreationOptions, DecodePixelSize etc. (however with a converter let me suggest you convert to a BitmapImage instead of string, or you’ll just hit more converters when processing the binding)

35
Share: