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