Silverlight Telerik控件学习:RadComboBox之自动完成(AutoComplete)

直接上图:

Xaml部分代码:

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="Telerik.Sample.AutoComplete"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common ="clr-namespace:Common.Silverlight;assembly=Common.Silverlight"
    xmlns:bo ="clr-namespace:BusinessObject;assembly=BusinessObject"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <common:ObjectCollection x:Key="objCollection">
                <bo:NodeItem Text="上海" Value="SH" Description="上海是一个繁华的都市"></bo:NodeItem>
                <bo:NodeItem Text="深圳" Value="SZ" Description="中国的特区"></bo:NodeItem>
                <bo:NodeItem Text="广州" Value="GZ" Description="广东人很喜欢煲汤"></bo:NodeItem>
                <bo:NodeItem Text="北京" Value="BJ" Description="北京是中国的首都"></bo:NodeItem>
            </common:ObjectCollection>

            <!--数据项模板-->
            <DataTemplate x:Key="cboItemTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Value}" Grid.Column="0" TextAlignment="Left" ></TextBlock>
                    <TextBlock Text="{Binding Text}"  Grid.Column="1" TextAlignment="Right"></TextBlock>
                </Grid>
            </DataTemplate>

            <!--选中时的模板(IsEditable=True时失效)-->
            <DataTemplate x:Key="cboSelectionBoxTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Text}" Foreground="Red"/>
                    <TextBlock Margin="3,0,3,0">/</TextBlock>
                    <TextBlock Text="{Binding Value}"></TextBlock>
                </StackPanel>
            </DataTemplate>

        </Grid.Resources>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock>SelectedValue:</TextBlock>
            <telerik:RadMaskedTextBox MaskedText="{Binding ElementName=radComboBox1, Path=SelectedValue, Mode=TwoWay}" MaskType="None" IsReadOnly="True"></telerik:RadMaskedTextBox>
            <TextBlock Margin="0,10,0,0">SelectedItem.Value:</TextBlock>
            <telerik:RadMaskedTextBox MaskedText="{Binding ElementName=radComboBox1, Path=SelectedItem.Value, Mode=TwoWay}" MaskType="None" IsReadOnly="True"></telerik:RadMaskedTextBox>
            <TextBlock Margin="0,10,0,0">SelectedItem.Description:</TextBlock>
            <telerik:RadMaskedTextBox  MaskedText="{Binding ElementName=radComboBox1, Path=SelectedItem.Description, Mode=TwoWay}" MaskType="None" IsReadOnly="True"></telerik:RadMaskedTextBox>
            <TextBlock Margin="0,10,0,0">SelectedItem.Text:</TextBlock>
            <telerik:RadMaskedTextBox  MaskedText="{Binding ElementName=radComboBox1, Path=SelectedItem.Text, Mode=TwoWay}" MaskType="None" IsReadOnly="True"></telerik:RadMaskedTextBox>

            <!--说明-->
            <!--TextSearchMode="Contains" 表明:文本搜索时,只要包含关键字即认为匹配-->
            <!--telerik:TextSearch.TextPath="Value" 表明:搜索仅匹配Value属性-->
            <!--IsEditable="True" 允许编辑-->
            <!--IsFilteringEnabled="True"  搜索匹配时,自动过滤记录项-->
            <!--OpenDropDownOnFocus="True" 获得焦点时,自动展开-->
            <!--ItemTemplate="{StaticResource cboItemTemplate}"  数据项模板-->
            <!--ItemsSource="{StaticResource objCollection}"  数据源-->
            <!--SelectedValuePath="Text" 选中值对应的实体字段-->
            <!--EmptyText="请选择城市" 无选择时显示的默认文本-->
            <!--ClearSelectionButtonContent="清空选择" 清空选择按钮的文本-->
            <!--ClearSelectionButtonVisibility="Visible" 显示清空选择按钮-->
            <telerik:RadComboBox Margin="0,10,0,0"  x:Name="radComboBox1" Width="180"
                                      TextSearchMode="Contains"
                                      telerik:TextSearch.TextPath="Value"
                                      IsEditable="False"
                                      IsFilteringEnabled="False"
                                      OpenDropDownOnFocus="True"
                                      ItemTemplate="{StaticResource cboItemTemplate}"
                                      ItemsSource="{StaticResource objCollection}"
                                      SelectedValuePath="Text"
                                      ClearSelectionButtonContent="清空选择"
                                      ClearSelectionButtonVisibility="Visible"
                                      EmptyText="请选择城市(键入拼音简称即可)"
                                      SelectionBoxTemplate="{StaticResource cboSelectionBoxTemplate}"
                                 />

        </StackPanel>
    </Grid>
</UserControl>

后台代码:木有,Binding的优势再一次得到体现:)

RadComboBox在我看来有一个小小的缺憾:当设置为可编辑模式时(IsEditable="True"),选中项的模板(SelectionBoxTemplate)会失效(有一个近似hack的解决办法:重写ToString()方法,输出自己希望的结果)

时间: 2024-11-08 17:40:13

Silverlight Telerik控件学习:RadComboBox之自动完成(AutoComplete)的相关文章

Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件

在web开发中,带checkbox的tree是一个很有用的东东,比如权限选择.分类管理,如果不用sl,单纯用js+css实现是很复杂的,有了SL之后,就变得很轻松了 解决方案一: 利用Silvelright ToolKit(微软的开源项目),项目地址http://silverlight.codeplex.com/ 在线演示地址:http://silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html 解决方

Silverlight Telerik控件学习:RadTransitionControl

如果展示类似这种比较cool的图片轮换效果,用RadTransitionControl控件就对了,它提供的过渡效果非常cool! 原理并不复杂,可参见以前写的 Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告. xaml部分: <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="Telerik.Sampl

Silverlight Telerik控件学习:主题Theme切换

telerik的RadControls for Silverlight内置了以下几种主题样式: Office Black - 这是默认值,无需加载其它任何dll文件.  Office Blue - 需要引用 Telerik.Windows.Themes.Office_Blue.dll. Office Silver - 需要引用 Telerik.Windows.Themes.Office_Silver.dll. Summer - 需要引用 Telerik.Windows.Themes.Summer

Silverlight Telerik控件学习:GridView双向绑定

做过WinForm数据库开发的人,一定有类似经历:DataGrid绑定后,如果允许行编辑,数据一顿修改后,想批量保存修改后的结果,通常是将DataGrid的所有行遍历,用FindControl找出其中的TextBox之类的控件,取值,然后处理,如果行模板中的控件变化了,可能之前的处理代码又要修改... .Net发展到WPF/SL时代,有了双向绑定,这种痛苦经历已经一去不返了,我们只需要关注数据即可,GridView与数据源之间会相互通知各自的变化情况,批量保存时,不管GridView中的数据用户

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项.既然要绑定,就先来几个实体类: 上面是类图,各类的代码如下:  BusinessBaseObject using System.ComponentModel; namespace BusinessObject { public class BusinessBaseObject : INotifyPropertyChanged { public event PropertyChangedEventHandler Proper

Silverlight Telerik控件学习:弹出窗口RadWindow

几乎所有的业务系统都有弹出窗口,典型场景有二种 : 1.简单的弹出一个对话框显示信息,比如下面这样: 这个很简单,代码示例如下: DialogParameters pars = new DialogParameters(); pars.Header = "信息"; pars.Content = "Hello World"; RadWindow.Alert(pars); 2.点击某条记录的"编辑"按钮,传入ID参数,弹出一个窗口,编辑保存后,将操作

Silverlight第三方控件专题

原文http://www.cnblogs.com/nasa/archive/2008/12/01/1344927.html 这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下. 名称 简介 截图 telerik 商 RadControls for Silverlight includes 24 UI controls that can be used in pure Silverlight applications or as parts of existi

分析Silverlight Button控件布局

分析Silverlight Button控件布局   答:关于按钮自适应 Silverlight也算一个比较开放的技术.Button控件其实也是一些标准的Grid.Canvas.Rectangle.TextBlock组成的.(图1) 要做到按钮的宽度和高度根据字体大小和字数自动适应,其实就是调整好Layout,做以一个能自适应的界面.在Silverlight中Grid这个容器是能自适应的.是把字体TextBlock放到一个Grid中,对这个TextBlock设置相当Grid的边距,就好像是htm

Silverlight重写控件样式

在实际开发应用中,Silverlight默认控件样式并不能满足我们所有的需求,特别是对华丽界面的构造,需 要对现有控件进行皮肤重写.WPF/Silverlight中使用xaml描述界面,类似Css,它们同样有Style和Template .目前微软开源工具包中集成的均是复杂类型控件,如何修改它们的样式确实难倒了不少朋友,那么本节以分 析为主,结合对常用的NumericUpDown控件向大家讲解如何对现有控件进行样式重写. 首先打开工具包中的示例项目: 接着找到NumericUpDownSampl