数据绑定到从webclient下载的图像 [英] Data binding to image downloaded from webclient

问题描述

我需要助手将从web客户端下载的图像（下面的代码）绑定到longlistselector的datatemplate中的图像控件。

 private Image GetImage（String ImageLink）
 {
 Image img = new Image（）; 
 WebClient客户端=新WebClient（）; 
 
 client.OpenReadCompleted + = async（obj，args）=> 
 {
 Stream stream = new MemoryStream（）; 
 await args.Result.CopyToAsync（stream）; 
 BitmapImage b = new BitmapImage（）; 
 b.SetSource（stream）; 
 img.Source = b; 
 img.Width = 250; 
 img.Height = 250; 
}; 
 
 client.OpenReadAsync（new Uri（ImageLink））; 
 
返回img; 
} 

非常感谢。

解决方案

您应该返回BitmapImage而不是Image。您应该在代码隐藏中创建一个名为ImageSource的公共属性，并将其绑定在DataTemplate中

< phone：PhoneApplicationPage 
 x：Class =" PhoneApp2.MainPage"  x：Name =" mainPage"  
 xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns：phone =" clr-namespace：Microsoft.Phone.Controls; assembly = Microsoft.Phone" 
 xmlns：shell =" clr-namespace：Microsoft.Phone.Shell; assembly = Microsoft.Phone" 
 xmlns：d =" http://schemas.microsoft.com/expression/blend/2008" 
 xmlns：mc =" http://schemas.openxmlformats.org/markup-compatibility/2006" 
 mc：Ignorable =" d" d：DesignWidth = QUOT; 480" d：DesignHeight = QUOT; 768" 
 FontFamily =" {StaticResource PhoneFontFamilyNormal}" 
 FontSize =" {StaticResource PhoneFontSizeNormal}" 
 Foreground =" {StaticResource PhoneForegroundBrush}" 
 SupportedOrientations =" Portrait"取向= QUOT;肖像" 
 shell：SystemTray.IsVisible =" True"> 
 
<！ -  LayoutRoot是放置所有页面内容的根网格 - > 
<！ -  LayoutRoot是放置所有页面内容的根网格 - > 
< Grid x：Name =" LayoutRoot"背景= QUOT;透明"> 
< Grid.RowDefinitions> 
< RowDefinition Height =" *" /> 
< RowDefinition Height =" Auto" /> 
< /Grid.RowDefinitions> 
 
< ListBox Name =" MyListBox"> 
< ListBox.ItemTemplate> 
< DataTemplate> 
< StackPanel Orientation =" Horizo​​ntal"> 
 < Image Source =" {Binding ElementName = mainPage，Path = ImageSource，Mode = OneWay}" />  
< TextBlock Text =" {Binding}" /> 
< / StackPanel> 
< / DataTemplate> 
< /ListBox.ItemTemplate> 
< / ListBox> 
 
< Button Content =" Set Image"名称= QUOT; btnSetImage" Grid.Row = QUOT 1 QUOT;的Horizo​​ntalAlignment = QUOT;中心"点击= QUOT; btnSetImage_Click" /> 
 
 
< / Grid> 
 
< / phone：PhoneApplicationPage> 

代码背后

 public partial class MainPage：PhoneApplicationPage 
 {
 //构造函数
 public MainPage（）
 {
 InitializeComponent（）; 
 
 //本地化ApplicationBar的示例代码
 // BuildLocalizedApplicationBar（）; 
 BindList（）; 
} 
 
 private void BindList（）
 {
 Collection< string> items = new Collection< string>（）; 
 items.Add（" Item 1"）; 
 items.Add（" Item 2"）; 
 MyListBox.ItemsSource = items; 
} 
 
 public BitmapImage ImageSource 
 {
 get {return（BitmapImage）GetValue（ImageSourceProperty）; } 
 set {SetValue（ImageSourceProperty，value）; } 
} 
 public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register（" ImageSource"，typeof（BitmapImage），typeof（MainPage），new PropertyMetadata（null））; 
 
 private void btnSetImage_Click（object sender，RoutedEventArgs e）
 {
 //将以下代码替换为您的代码以从WebClient读取
 Image img = new Image（） ; 
 BitmapImage b = new BitmapImage（）; 
 b.UriSource = new Uri（" Back.png"，UriKind.Relative）; 
 ImageSource = b; 
} 
} 

I need assistant to bind an image downloaded asnynhronous from web client (code below) to an image control inside a datatemplate of a longlistselector.

private Image GetImage(String ImageLink)
        {
            Image img = new Image();
            WebClient client = new WebClient();

            client.OpenReadCompleted += async (obj, args) =>
            {
                Stream stream = new MemoryStream();
                await args.Result.CopyToAsync(stream);
                BitmapImage b = new BitmapImage();
                b.SetSource(stream);
                img.Source = b;
                img.Width = 250;
                img.Height = 250;                
            };

            client.OpenReadAsync(new Uri(ImageLink));

            return img;
        }

Thanks a lot.

解决方案

Instead of Image you should return BitmapImage. You should create a public property called ImageSource in codebehind and bind it in DataTemplate

<phone:PhoneApplicationPage 
    x:Class="PhoneApp2.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ListBox Name="MyListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ElementName=mainPage, Path=ImageSource, Mode=OneWay}" />
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <Button Content="Set Image" Name="btnSetImage" Grid.Row="1" HorizontalAlignment="Center" Click="btnSetImage_Click" />


    </Grid>

</phone:PhoneApplicationPage>

Code Behind

   public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
            BindList();
        }

        private void BindList()
        {
            Collection<string> items = new Collection<string>();
            items.Add("Item 1");
            items.Add("Item 2");
            MyListBox.ItemsSource = items;
        }

        public BitmapImage ImageSource
        {
            get { return (BitmapImage)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(BitmapImage), typeof(MainPage), new PropertyMetadata(null));

        private void btnSetImage_Click(object sender, RoutedEventArgs e)
        {
            //Replace below code with your code to read from WebClient
            Image img = new Image();
            BitmapImage b = new BitmapImage();
            b.UriSource = new Uri("Back.png", UriKind.Relative);
            ImageSource = b;
        }
    }

这篇关于数据绑定到从webclient下载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！