关于image控件的source属性进行数据绑定的具体方法

Question

自己在做一个获取网络图片的工程，图片是变化的，用来模拟视频，所以刚开始用了定时器定时触发改变image的source属性，但发现source属性只能设置一次就再也不会改变了；

后来用了数据绑定的方法，如下：

1.在mainpage.xaml中加入

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Image Height="293" HorizontalAlignment="Left" Margin="38,6,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="609"  Source="{Binding ImgSource}"/>

</Grid>

2.在mainpage.xaml.cs中的namespace中加入Item class：

public class Item
{
        public ImageSource ImgSource { set; get; }
        public Item(ImageSource imageUri)
        {
            ImgSource = imageUri;
        }
}

3.在mainpage()中加入赋值语句

public partial class MainPage : PhoneApplicationPage
{

public MainPage()
        {

Item item = new Item(new BitmapImage(new Uri("http://192.168.1.26:8080/?action=snapshot", UriKind.Absolute)));

}

}

结果发现属性source根本就没有被绑定成uri，我不知道是不是绑定的方法有问题还是我加入代码的位置不对，请各位指教。

Answer 1

你好，

一下是我这边测试的代码，给你做参考。主要思想是要在entity class中实现INotifyPropertyChanged接口，只有这样在后台修改值的时候才能反正在UI上

<Image Source="{Binding ImageSource}" Height="199" HorizontalAlignment="Left" Margin="64,93,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="337" />

   public partial class MainPage : PhoneApplicationPage
    {
        Data data = new Data();
        // Constructor
        public MainPage()
        {
            InitializeComponent();
          
            data.ImageSource = "1.jpg";
            this.DataContext = data;
            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0,0,2);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }
        int i = 1;
        void timer_Tick(object sender, EventArgs e)
        {
            i++;
            data.ImageSource = i.ToString() + ".jpg";
        }
    }

    public class Data : INotifyPropertyChanged
    {
        private string imageSource;

        public string ImageSource
        {
            get { return imageSource; }
            set
            {
                imageSource = value;
                NotifyPropertyChanged("ImageSource");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyPropertyChanged(string MemberName)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(MemberName));
            }
        }
    }

Answer 2

您好，
    感谢您提供的方法！
    我用自己的工程试验了一下您的代码，因为我用的是无线路由器传送视频，所以把代码中的 i.ToString() + ".jpg";改成了摄像头截图的IP地址：http://192.168.1.26:8080/?action=snapshot，但是结果仍然是只获取第一张图片，后面的截图虽然改变了，但显示的图片不变。好像是由于IP地址没变，所以系统就不去重新获取Uri地址的图片了，不知道有什么方法可以解决这个问题。
    您的方法如果是获取地址不同的多张图片可以实现，但是对于地址不变，而内容变了的情况实现不了。

Answer 3

从无线路由器下载图片实现播放视频的问题已经解决。（usb摄像头连接到无线路由器）

用的是WebClient类中的各种方法，这种方法不会出现image.source不更新的问题，视频比较流畅，代码如下：

namespace webtest
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            DispatcherTimer timer1;
            timer1 = new DispatcherTimer();
            
            timer1.Tick += (s, e1) =>
            {
                WebClient wcDownloadStream = new WebClient();
                if (wcDownloadStream.IsBusy)
                {
                    wcDownloadStream.CancelAsync();
                }
                wcDownloadStream.OpenReadCompleted += new OpenReadCompletedEventHandler(wcDownloadStream_OpenReadCompleted);
                wcDownloadStream.OpenReadAsync(new Uri("http://192.168.1.26:8080/?action=snapshot"));
            };
            timer1.Interval = TimeSpan.FromMilliseconds(50);
            timer1.Start();
        }

        void wcDownloadStream_OpenReadCompleted(Object sender, OpenReadCompletedEventArgs e)
        {
            System.Windows.Media.Imaging.BitmapImage ImageSource = new System.Windows.Media.Imaging.BitmapImage();
            ImageSource.SetSource(e.Result);
            image1.Source = ImageSource;
        }
    }
}