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>

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

相关推荐
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程中商城项目的实战源码是我发布在 GitHub 上的开源项目 newbee-mall (新蜂商城),目前已有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能的讲解,让大家实际操作并实践上手一个大型的线上商城项目,并学习到一定的开发经验以及其中的开发技巧。<br /> 商城项目所涉及的功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂的操作步骤,仅需 2 秒就可以启动这个完整的商城项目 </li> <li> 最终的实战项目是一个企业级别的 Spring Boot 大型项目,对于各个阶段的 Java 开发者都是极佳的选择 </li> <li> 实践项目页面美观且实用,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,可以进一步提升你的市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目的页面和功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页