纯XAML实现通过按钮关闭ComboBox下拉列表
纯XAML实现点击按钮关闭ComboBox下拉框
没问题,我来帮你把这个功能补全!你已经在ComboBox模板里加了按钮,接下来只需要在按钮的Click事件触发器里,用ObjectAnimationUsingKeyFrames直接把ComboBox的IsDropDownOpen属性设为false就行,完全不需要后台代码。
先把你截断的代码补完整,关键的触发器部分应该是这样的:
<Button Grid.Row="1" Width="200" Margin="5" Content="Close ComboBox DropDown"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsDropDownOpen" Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"> <DiscreteObjectKeyFrame KeyTime="0" Value="False"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button>
关键说明:
Storyboard.Target用RelativeSource={RelativeSource Mode=TemplatedParent}来绑定到模板所属的ComboBox控件,这样就能直接修改它的IsDropDownOpen属性。DiscreteObjectKeyFrame的KeyTime="0"和Duration="0"保证点击按钮后下拉框瞬间关闭,没有动画延迟。
如果需要完整的ComboBox模板参考,这里给你一个包含这个按钮的完整示例(基于默认模板修改):
<Window.Resources> <Style x:Key="CustomComboBoxStyle" TargetType="{x:Type ComboBox}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ComboBox}"> <Grid> <ToggleButton x:Name="ToggleButton" Grid.Column="2" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Path x:Name="Arrow" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> </ToggleButton> <ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left"/> <TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/> <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> <Border x:Name="DropDownBorder" Background="White" BorderThickness="1" BorderBrush="#888"/> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained"/> </ScrollViewer> <!-- 你添加的关闭按钮 --> <Button Grid.Row="1" Width="200" Margin="5" Content="Close ComboBox DropDown"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsDropDownOpen" Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=TemplatedParent, AncestorType={x:Type ComboBox}}}"> <DiscreteObjectKeyFrame KeyTime="0" Value="False"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </Grid> </Grid> </Popup> </Grid> <ControlTemplate.Triggers> <Trigger Property="HasItems" Value="False"> <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#888"/> </Trigger> <Trigger Property="IsGrouping" Value="True"> <Setter Property="ScrollViewer.CanContentScroll" Value="False"/> </Trigger> <Trigger SourceName="Popup" Property="AllowsTransparency" Value="True"> <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/> <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <!-- 使用这个样式的ComboBox --> <ComboBox Style="{StaticResource CustomComboBoxStyle}" Width="200" Margin="20"> <ComboBoxItem>Item 1</ComboBoxItem> <ComboBoxItem>Item 2</ComboBoxItem> <ComboBoxItem>Item 3</ComboBoxItem> </ComboBox>
这样点击下拉框里的“Close ComboBox DropDown”按钮,就能直接关闭下拉列表了,完全用XAML实现,不需要任何C#代码。
内容的提问来源于stack exchange,提问作者Edgar
相关产品推荐
相关产品推荐

