在开发Silverlight或WPF应用程序时,经常需要对组合框(ComboBox)进行定制以满足特定的需求。本文将介绍一种简单易行的方法,通过附加属性和组合框样式,改变组合框的当前行为。这种方法不仅可以提高开发效率,还可以增强用户界面的交互性。
要实现这种改变,首先需要设置组合框的IsNullable
属性为True
。以下是Silverlight版本的示例代码:
<ComboBox ItemsSource="{Binding Source={StaticResource ViewModel}, Path=Actors}" library:Combobox.IsNullable="True" />
通过设置IsNullable
属性,组合框将具备可空(nullable)的功能,即用户可以选择一个选项,也可以选择不选择任何选项。
要实现可空功能,需要修改组合框的默认样式,使其包含一个X按钮。以下是Silverlight和WPF版本组合框样式的修改方法:
<ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock Text="" />
</ContentPresenter>
<Button x:Name="PART_ClearButton" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,0,20,0">
<Path Data="M0,0 L1.6,0 L3,1.56 L4.4,0 L6,0 L3.8,2.5 L6,5 L4.4,5 L3,3.49 L1.59,5 L-4.2E-09,5 L2.18,2.5 z" Fill="#CC111111" Height="5" Stretch="Fill" Width="7" />
</Button>
<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Button x:Name="PART_ClearButton" Visibility="Collapsed" HorizontalAlignment="Right" Margin="0,0,22,0">
<Path Data="M0,0 L1.6,0 L3,1.56 L4.4,0 L6,0 L3.8,2.5 L6,5 L4.4,5 L3,3.49 L1.59,5 L-4.2E-09,5 L2.18,2.5 z" Fill="#CC111111" Height="5" Stretch="Fill" Width="7" />
</Button>
完成样式修改后,需要创建IsNullable
附加属性,该属性将实现所有工作。当在组合框上设置此属性为True
时,将启用可空功能。
可空功能是通过以下两个函数实现的:
private static void ApplyIsNullable(ComboBox comboBox)
{
var isNullable = GetIsNullable(comboBox);
var clearButton = (Button)GetClearButton(comboBox);
if (clearButton != null)
{
clearButton.Click -= clearButton_Click;
clearButton.Click += clearButton_Click;
if (isNullable && comboBox.SelectedIndex != -1)
{
clearButton.Visibility = Visibility.Visible;
}
else
{
clearButton.Visibility = Visibility.Collapsed;
}
}
}
private static void clearButton_Click(object sender, RoutedEventArgs e)
{
var clearButton = (Button)sender;
var parent = VisualTreeHelper.GetParent(clearButton);
while (!(parent is ComboBox))
{
parent = VisualTreeHelper.GetParent(parent);
}
var comboBox = (ComboBox)parent;
// clear the selection
comboBox.SelectedIndex = -1;
}
ApplyIsNullable
函数刷新X按钮的状态,并在组合框的选择发生变化时调用。clearButton_Click
函数清除组合框的选择,并在用户点击X按钮时调用。
<Style x:Key="ClearSelectionButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FF3C688D" />
<Setter Property="BorderBrush" Value="#FF617584" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Width" Value="15" />
<Setter Property="Height" Value="15" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MouseOverElement" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFC8E4ED" BorderBrush="#FF3F6A8E" Visibility="Collapsed" />
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>