WPF Image控件的绑定（转） WPF Image控件的绑定

WPF Image控件的绑定

 

     在我们平时的开发中会经常用到Image控件，通过设置Image控件的Source属性，我们可以加载图片，设置Image的source属性时可以使用相对路径也可以使用绝对路径，一般情况下建议使用绝对路径，类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称，后面表示具体哪个文件夹下面的哪个图片资源，在程序中，我们甚至可以为Image控件设置X:Name属性，在后台代码中动态去改变Image的Source，但我个人认为这种方式不太适合最大量的图片切换，而且增加了View层和代码之间的耦合性，不是和复合MVVM的核心设计思想，所以今天就总结一下Image的动态绑定的形式。

    要绑定，肯定是绑定到Image控件的Source属性上面，我们首先要搞清楚Source的类型是什么，public ImageSource Source { get; set; }也就是ImageSource类型，当然在我们绑定的时候用的最多的就是BitmapImage这个位图图像啦，我们首先来看看BitmapImage的继承关系：BitmapImage：BitmapSource：ImageSource，最终也是一种ImageSource类型。当然在我们的Model层中我们也可以直接定义一个BitmapImage的属性，然后将这个属性直接绑定到Image的Source上面，当然这篇文章我们定义了一个ImgSource的String类型，所以必须要定义一个转换器Converter，这里分别贴出相应地代码。

首先是View层，比较简单：

        <Grid Grid.Row="1">
            <Image Source="{Binding Path=LTEModel.ImgSource,Converter={StaticResource MyImageConverter}}" Stretch="Fill">
            </Image>
        </Grid>

然后我们再来看看Model层也很简单。

public class LTEModel : BaseModel
    {
        private string _imageSource = null;
        public string ImgSource
        {
            get
            {
                return _imageSource;
            }
            set
            {
                if (value != _imageSource)
                {
                    _imageSource = value;
                    FirePropertyChanged("ImgSource");
                }
            }

        }
    }

然后就是重要的转换器：

 public class StringToImageSourceConverter:IValueConverter
    {
        #region Converter

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string path = (string)value;
            if (!string.IsNullOrEmpty(path))
            {
                return new BitmapImage(new Uri(path, UriKind.Absolute));
            }
            else
            {
                return null;
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
        #endregion

    }

转换器返回的是Object类型，实际返回的是一个BitmapImage对象。所以我们在写程序绑定的时候一定要弄清绑定的目标和对象之间的关系，这个是非常重要的。

下面就是在ViewModel层中来添加绑定，并更新数据源，这里使用的是一个定时器来定时更新数据源：

 public class LTEViewModel : NotifyObject
    {
        private DispatcherTimer myDispatcher = null;
        private Random random = new Random();
        public LTEViewModel()
        {
            GetImageSource();
            InitTimer();
        }

        private LTEModel _lteModel = null;
        public LTEModel LTEModel
        {
            get
            {
                if (_lteModel == null)
                {
                    _lteModel = new LTEModel();
                }
                return _lteModel;

            }
            set
            {
                if (value != _lteModel)
                {
                    _lteModel = value;
                    FirePropertyChanged("LTEModel");

                }

            }


        }

        private BaseModel _baseModel = null;
        public BaseModel BaseModelInstance
        {
            get
            {
                if (_baseModel == null)
                {
                    _baseModel = new BaseModel()
                    {
                        Title = "分地区LTE分布",
                        Time = DateTime.Now.ToString()
                    };
                }
                return _baseModel;

            }
            set
            {
                if (value != _baseModel)
                {
                    _baseModel = value;
                    FirePropertyChanged("BaseModelInstance");
                }

            }


        }

        private List<string> imgList = new List<string>();
        private void GetImageSource()
        {
            //通过程序集来读取相应的资源的路径
            string assemblyLocation = this.GetType().Assembly.Location;
            string assLocation = assemblyLocation.Substring(0, assemblyLocation.LastIndexOf("\\"));
            string[] img_files = Directory.GetFiles(string.Format("{0}\\Images", assLocation), "*.JPG");
            foreach (string img_path in img_files)
            {
                imgList.Add(img_path);
            }
        }

        private void InitTimer()
        {
            myDispatcher = new DispatcherTimer();
            myDispatcher.Tick += new EventHandler(Timer_Tick);
            myDispatcher.Interval = TimeSpan.FromMilliseconds(1000);
            myDispatcher.Start();

        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            int imageIndex = 0;
            if (imgList.Count > 0 && LTEModel != null)
            {
                imageIndex = random.Next(0, imgList.Count);
                LTEModel.ImgSource = imgList[imageIndex];
            }

            if (_baseModel != null)
            {
                _baseModel.Time = DateTime.Now.ToString();
            }

        }
    }

然后就是实例化一个ViewModel对象绑定到前台中，这个思路其实是相当明确的。

      其实在我们的很多时候，我们并不知道我们需要绑定什么图片，或者说根据数据类型来绑定图片，这个在定义数据模板的时候经常使用到，下面就介绍一下，根据类型来绑定相应的图片。然后通过定义  public enum DeviceType { SheXiangJi, KaKou, DianZiJingCha, MingJin }这些类型，通过不同的类型来绑定到不同的图片，这个也是一个非常重要的应用，我们一定要注意使用的方法，这里只是简单介绍一下。     

 <ItemsControl ItemsSource="{Binding DeviceList,RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="2">
                            <ItemsControl.Template>
                                <ControlTemplate TargetType="ItemsControl">
                                    <UniformGrid Columns="3" Rows="7" IsItemsHost="True"></UniformGrid>
                                </ControlTemplate>
                            </ItemsControl.Template>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="20 0 0 0" VerticalAlignment="Center" Sn　　　　　　　　　　　　　　　　　　　　　　　　apsToDevicePixels="True">
                                        <Image  x:Name="icon1" Width="48" Height="48" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAli　　　　　　　　　　　　　　　　　　　　　　　　　　gnment="Center"></Image>
                                        <TextBlock Margin="10 0 0 0" Foreground="#fff" ToolTip="{Binding Name}" FontSize="40" Text="{Binding Name}" 　　　　　　　　　　　　　　　　　　　　　　　　　　HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                    <DataTemplate.Triggers>
                                        <DataTrigger Binding="{Binding Type}" Value="SheXiangJi">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/camera.png" TargetName="　　　　　　　　　　　　　　　　　　　　　　　　　　　　icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="KaKou">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Bayonet.png" TargetName=　　　　　　　　　　　　　　　　　　　　　　　　　　　　"icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="DianZiJingCha">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/epolice.png" TargetName=　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="MingJin">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Police_A.png" TargetName　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　="icon1"></Setter>
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

    另外和Image很类似的就是 <ImageBrush ImageSource="/IGisControls.JTJ.UIControls;component/images/screenBG.jpg" Stretch="Fill"></ImageBrush>

用法也差不多，同样可以通过绑定的方式来添加图片，不过在使用的时候还是需要注意一下的。

     在我们平时的开发中会经常用到Image控件，通过设置Image控件的Source属性，我们可以加载图片，设置Image的source属性时可以使用相对路径也可以使用绝对路径，一般情况下建议使用绝对路径，类似于下面的形式Source="/Demo;Component/Images/Test.jpg"其中Demo表示工程的名称，后面表示具体哪个文件夹下面的哪个图片资源，在程序中，我们甚至可以为Image控件设置X:Name属性，在后台代码中动态去改变Image的Source，但我个人认为这种方式不太适合最大量的图片切换，而且增加了View层和代码之间的耦合性，不是和复合MVVM的核心设计思想，所以今天就总结一下Image的动态绑定的形式。

    要绑定，肯定是绑定到Image控件的Source属性上面，我们首先要搞清楚Source的类型是什么，public ImageSource Source { get; set; }也就是ImageSource类型，当然在我们绑定的时候用的最多的就是BitmapImage这个位图图像啦，我们首先来看看BitmapImage的继承关系：BitmapImage：BitmapSource：ImageSource，最终也是一种ImageSource类型。当然在我们的Model层中我们也可以直接定义一个BitmapImage的属性，然后将这个属性直接绑定到Image的Source上面，当然这篇文章我们定义了一个ImgSource的String类型，所以必须要定义一个转换器Converter，这里分别贴出相应地代码。

首先是View层，比较简单：

        <Grid Grid.Row="1">
            <Image Source="{Binding Path=LTEModel.ImgSource,Converter={StaticResource MyImageConverter}}" Stretch="Fill">
            </Image>
        </Grid>

然后我们再来看看Model层也很简单。

public class LTEModel : BaseModel
    {
        private string _imageSource = null;
        public string ImgSource
        {
            get
            {
                return _imageSource;
            }
            set
            {
                if (value != _imageSource)
                {
                    _imageSource = value;
                    FirePropertyChanged("ImgSource");
                }
            }

        }
    }

然后就是重要的转换器：

 public class StringToImageSourceConverter:IValueConverter
    {
        #region Converter

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string path = (string)value;
            if (!string.IsNullOrEmpty(path))
            {
                return new BitmapImage(new Uri(path, UriKind.Absolute));
            }
            else
            {
                return null;
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
        #endregion

    }

转换器返回的是Object类型，实际返回的是一个BitmapImage对象。所以我们在写程序绑定的时候一定要弄清绑定的目标和对象之间的关系，这个是非常重要的。

下面就是在ViewModel层中来添加绑定，并更新数据源，这里使用的是一个定时器来定时更新数据源：

 public class LTEViewModel : NotifyObject
    {
        private DispatcherTimer myDispatcher = null;
        private Random random = new Random();
        public LTEViewModel()
        {
            GetImageSource();
            InitTimer();
        }

        private LTEModel _lteModel = null;
        public LTEModel LTEModel
        {
            get
            {
                if (_lteModel == null)
                {
                    _lteModel = new LTEModel();
                }
                return _lteModel;

            }
            set
            {
                if (value != _lteModel)
                {
                    _lteModel = value;
                    FirePropertyChanged("LTEModel");

                }

            }


        }

        private BaseModel _baseModel = null;
        public BaseModel BaseModelInstance
        {
            get
            {
                if (_baseModel == null)
                {
                    _baseModel = new BaseModel()
                    {
                        Title = "分地区LTE分布",
                        Time = DateTime.Now.ToString()
                    };
                }
                return _baseModel;

            }
            set
            {
                if (value != _baseModel)
                {
                    _baseModel = value;
                    FirePropertyChanged("BaseModelInstance");
                }

            }


        }

        private List<string> imgList = new List<string>();
        private void GetImageSource()
        {
            //通过程序集来读取相应的资源的路径
            string assemblyLocation = this.GetType().Assembly.Location;
            string assLocation = assemblyLocation.Substring(0, assemblyLocation.LastIndexOf("\\"));
            string[] img_files = Directory.GetFiles(string.Format("{0}\\Images", assLocation), "*.JPG");
            foreach (string img_path in img_files)
            {
                imgList.Add(img_path);
            }
        }

        private void InitTimer()
        {
            myDispatcher = new DispatcherTimer();
            myDispatcher.Tick += new EventHandler(Timer_Tick);
            myDispatcher.Interval = TimeSpan.FromMilliseconds(1000);
            myDispatcher.Start();

        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            int imageIndex = 0;
            if (imgList.Count > 0 && LTEModel != null)
            {
                imageIndex = random.Next(0, imgList.Count);
                LTEModel.ImgSource = imgList[imageIndex];
            }

            if (_baseModel != null)
            {
                _baseModel.Time = DateTime.Now.ToString();
            }

        }
    }

然后就是实例化一个ViewModel对象绑定到前台中，这个思路其实是相当明确的。

      其实在我们的很多时候，我们并不知道我们需要绑定什么图片，或者说根据数据类型来绑定图片，这个在定义数据模板的时候经常使用到，下面就介绍一下，根据类型来绑定相应的图片。然后通过定义  public enum DeviceType { SheXiangJi, KaKou, DianZiJingCha, MingJin }这些类型，通过不同的类型来绑定到不同的图片，这个也是一个非常重要的应用，我们一定要注意使用的方法，这里只是简单介绍一下。     

 <ItemsControl ItemsSource="{Binding DeviceList,RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="2">
                            <ItemsControl.Template>
                                <ControlTemplate TargetType="ItemsControl">
                                    <UniformGrid Columns="3" Rows="7" IsItemsHost="True"></UniformGrid>
                                </ControlTemplate>
                            </ItemsControl.Template>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="20 0 0 0" VerticalAlignment="Center" Sn　　　　　　　　　　　　　　　　　　　　　　　　apsToDevicePixels="True">
                                        <Image  x:Name="icon1" Width="48" Height="48" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAli　　　　　　　　　　　　　　　　　　　　　　　　　　gnment="Center"></Image>
                                        <TextBlock Margin="10 0 0 0" Foreground="#fff" ToolTip="{Binding Name}" FontSize="40" Text="{Binding Name}" 　　　　　　　　　　　　　　　　　　　　　　　　　　HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                    <DataTemplate.Triggers>
                                        <DataTrigger Binding="{Binding Type}" Value="SheXiangJi">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/camera.png" TargetName="　　　　　　　　　　　　　　　　　　　　　　　　　　　　icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="KaKou">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Bayonet.png" TargetName=　　　　　　　　　　　　　　　　　　　　　　　　　　　　"icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="DianZiJingCha">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/epolice.png" TargetName=　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"icon1"></Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding Type}" Value="MingJin">
                                            <Setter Property="Source" Value="/IGisControls.JTJ.UIControls;component/images/Police_A.png" TargetName　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　="icon1"></Setter>
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

    另外和Image很类似的就是 <ImageBrush ImageSource="/IGisControls.JTJ.UIControls;component/images/screenBG.jpg" Stretch="Fill"></ImageBrush>

用法也差不多，同样可以通过绑定的方式来添加图片，不过在使用的时候还是需要注意一下的。