前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Silverlight Telerik控件学习:RadComboBox之自动完成(AutoComplete)

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

作者头像
菩提树下的杨过
发布2018-01-23 17:28:41
1K0
发布2018-01-23 17:28:41
举报

直接上图:

Xaml部分代码:

代码语言:javascript
复制
<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()方法,输出自己希望的结果)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-05-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档