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()方法,输出自己希望的结果)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏XAI

ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能 本人在项目中使用的js版本。为了方便大家下载。直接粘贴代码给大家看。版本是1.2.0 /*...

28470
来自专栏Golang语言社区

GO语言学习:动态Web

使用Golang中的模板template来实现在HTML中动态Web. 1.网络端口监听操作: Web动态页面要使用http.HandleFunc()而不...

36750
来自专栏大内老A

一句代码实现批量数据绑定[上篇]

对于一个以数据处理为主的应用中的UI层,我们往往需要编写相当多的代码去实现数据绑定。如果界面上的控件和作为数据源的实体类型之间存储某种约定的映射关系,我们就可以...

21660
来自专栏君赏技术博客

Jekyll-Admin-Mac-列表

接下来我们需要就是做出这个列表数据,我们可以使用 NSTableView来做出这个效果。

16710
来自专栏代码世界

Django form表单

Form介绍   之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需...

36350
来自专栏java沉淀

jQuery常用的功能

14330
来自专栏菩提树下的杨过

Silverlight:Dependency Property(依赖属性)学习笔记

学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念。 http://www.wpftutorial.n...

20670
来自专栏挖坑填坑

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

这两个并没有设计成core模块的组件,但是也放在这里,不知道放在哪里合适。有的可以不用设计成angular模块或者组件,初学者真烦恼

29330
来自专栏大内老A

ASP.NET MVC的View是如何呈现出来的[实例篇]

在《[设计篇]》篇中我们通过对View引擎的总体介绍讲述了从ViewResult的创建到View呈现的原理,为了让读者对View引擎及其View呈现机制具有一个...

18660
来自专栏葡萄城控件技术团队

AngularJS:如何使用自定义指令来取代ng-repeat

引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能。 对于处理小数量,ng-repeat是非常有用的,但是如果...

21670

扫码关注云+社区

领取腾讯云代金券