zoukankan      html  css  js  c++  java
  • 【转】【WPF】IvalueConverter和TypeConverter

    简要说明:

    IValueConverter主要用于XAML绑定和数据源之间的转换

    TypeConverter主要用于自定义类的属性类型之间的转换

    本文主要讲解如何使用IValueConverter和TypeConverter。我们通过两个思考问题来引入如何使用IValueConverter和TypeConverter!

     IValueConverter主要用于将数据源的数据转换为需要在界面上显示的数据,例如:将Url地址转换为图片显示到界面上、将float类型数据显示为货币类型、bool值和Visibility转换等等

    TypeConverter主要用于在XAML代码中的字符串类型转换为其他类型的数值,比如将一段字符串转为Double类型以供Width属性使用

    思考一:我的数据集合的其中一个集合中的属性为某个图片的URL,如何将这个URL地址转换为图片显示到DataGrid行中呢?

    IValueConverter的使用方法:

            一、首先编写一个ImageConverter类型,此类继承于IValueConverter接口,然后实现此接口的Convert和ConvertBack方法。注意Convert方法是将数据源的数据转为需要显示的数据,而ConvertBack方法用于将显示出来的数据在TwoWay模式下回传给数据源。如下面的代码以编制:

        public class ImageConverter : IValueConverter
        {
            //在载入数据的时候将数据转换为图片类型
            public object Convert(object value, Type targetType, object parameter,
                System.Globalization.CultureInfo culture)
            {
                try
                {
                    Uri uri = new Uri((string)value, UriKind.RelativeOrAbsolute);
                    BitmapImage img = new BitmapImage(uri);
                    return img;
                }
                catch
                {
                    return new BitmapImage();
                }
            }
    
            //在页面上操作的时候,将图片类型转换为数据,这里只有再TwoWay的时候才有用
            public object ConvertBack(object value, Type targetType, object parameter,
                System.Globalization.CultureInfo culture)
            {
                BitmapImage img = value as BitmapImage;
                return img.UriSource.AbsoluteUri;
            }
        }

            二、在UserControl的资源中申明ImageConverter以供DataGrid的数据源绑定时转换数据

        <UserControl.Resources>
            <this:ImageConverter x:Key="ImageCoverter"/>
        </UserControl.Resources>

            三、在DataGrid中使用Converter转换,代码如下:

    <sdk:DataGrid HorizontalAlignment="Left"  AutoGenerateColumns="False"   Name="ShowCityList" VerticalAlignment="Top" >
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Header="省会" Binding="{Binding AddrName}" IsReadOnly="True"/>
            <sdk:DataGridTextColumn Header="城市" Binding="{Binding CityName}" IsReadOnly="True" />
            <sdk:DataGridTextColumn Header="电话区号" Binding="{Binding TelNum}" IsReadOnly="True" />
            <sdk:DataGridTemplateColumn Header="城市图片">
                <sdk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding CityImageUrl, Mode=TwoWay, Converter={StaticResource ImageCoverter}}"></Image>
                    </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>

            四、为这个DataGrid绑定数据源如下代码:

        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                List<CityInformation> listCity = new List<CityInformation>() 
                {
                    new CityInformation(){
                        AddrName="四川",
                        CityName="成都",
                        TelNum="028-28884482",
                        CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R34217-0.png"
                    },
                    new CityInformation()
                    {
                     AddrName="广东",
                        CityName="广州",
                        TelNum="021-22332884",
                        CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R333J-4.png"
                    },
                    new CityInformation()
                    {
                     AddrName="上海",
                        CityName="上海",
                        TelNum="020-33245566",
                        CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R31S6-9.png"
                    },
                    new CityInformation()
                    {
                     AddrName="北京",
                        CityName="北京",
                        TelNum="010-77534222",
                        CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R33342-7.png"
                    }
    
                };
    
                this.ShowCityList.ItemsSource = listCity;
    
            }
        }
        /// <summary>
        /// 城市信息的实体类
        /// </summary>
        public class CityInformation
        {
            private string _AddrName;
            private string _CityName;
            private string _TelNum;
            private string _cityImageUrl;
            public string AddrName
            {
                get { return _AddrName; }
                set { _AddrName = value; }
            }
            public string CityName
            {
                get { return _CityName; }
                set { _CityName = value; }
            }
            public string TelNum
            {
                get { return _TelNum; }
                set { _TelNum = value; }
            }
            public string CityImageUrl
            {
                get { return _cityImageUrl; }
                set { _cityImageUrl = value; }
            }
        }

     

    思考二:我需要做一个自定义控件,自定义控件是以厘米为单位来设置其宽度,而不是以像素为单位来设置,应该如何实现?

    TypeConverter的使用方法:

            一、编写一个SLConverter类型继承于TypeConverter类,重写了CanConvertFrom方法和ConvertFrom方法将XAML中的String类型的数据转换为Double类型赋值给自定义控件。

        public class CustomLengthConverter : TypeConverter
        {
            //返回一个值,该值指示类型转换器能否将指定类型的对象转换为此转换器的类型
            public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
            {
                if (sourceType == typeof(string))
                {
                    return true;
                }
                return base.CanConvertFrom(context, sourceType);
            }
            //从指定值转换为此转换器的预期转换类型。
            public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
            {
    
                if (value == null)
                {
                    return new Double();
                }
                if (value is string)
                {
                    string s = (string)value;
                    if (s.Length == 0)
                    {
                        return new Double();
                    }
                    //将流入的字符串分割为两部分,使用第一部分2cm*40=80=设置的像素
                    string[] arguments = s.Split(' ');
                    if (arguments.Length != 2)
                    {
                        return new Double();
                    }
                    else
                    {
                        //假设1cm=40px
                        return InternalParseInput((double.Parse(arguments[0])*40).ToString());
                    }
                }
    
                return base.ConvertFrom(context, culture, value);
            }
            //将String数据格式化为Double类型数据返回给属性
            public Double InternalParseInput(String inputString)
            {
                Double doubleValue;
    
                try
                {
                    doubleValue = Double.Parse(inputString);
                }
                catch (Exception)
                {
                    doubleValue = new Double();
                }
    
                return doubleValue;
            }
        }

            二、编写一个自定义控件RichTextBlock,并且为这个自定义控件新增了两个自定义属性,其中一个是将cm转换为px以显示在屏幕上,这里使用TypeConverter的特性如下代码:

        public partial class RichTextBlock : UserControl
        {
            public RichTextBlock()
            {
                InitializeComponent();
            }
    
            [TypeConverter(typeof(CustomLengthConverter))] 
            public Double txtWidth
            {
                get { return this.txtBlock.Width; }
                set { this.txtBlock.Width = value; }
            }
    
            public Double txtHeight
            {
                get { return this.txtBlock.Height; }
                set { this.txtBlock.Height = value; }
            }
        }

            三、在引用这个自定义控件的时候可以设置其自定义属性如下代码所示:

    <this:RichTextBlock VerticalAlignment="Top" txtHeight="150" txtWidth="2 cm" />

    参考地址:

    https://msdn.microsoft.com/en-us/library/ms752347.aspx

    http://wpftutorial.net/ValueConverters.html

    http://blog.csdn.net/czs8585/article/details/6903286

  • 相关阅读:
    FCKEditor装入模板方法
    医道再解开阖枢
    测试一下 Last
    [技术架构] 大型互联网站解决高并发的常见策略
    swfupload实现图片及缩略图上传
    解决“在证书存储区中找不到清单签名证书”
    asp.net EnableViewState禁用与注意事项
    jQuery创建水平和垂直居中的div窗口
    甩掉ashx/asmx,使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练
    type="button" ,"submit" 的区别(转)
  • 原文地址:https://www.cnblogs.com/mqxs/p/6617551.html
Copyright © 2011-2022 走看看