组合框折叠时，WPF组合框DataTemplate按钮不可点击

Question

当组合框关闭时，如何使 ComboBox itemtemplate 中的按钮可点击？

我有一个用于一些静态选择的 WPF 用户控件，并在列表末尾有一个“自定义...”项，其中自定义项的 DataTemplate 有一个“编辑...”按钮。

该按钮在下拉列表中的项目中有效，但在所选值中无效。单击关闭的组合框会打开下拉菜单。或者 - 我可以在组合框关闭时隐藏“编辑...”按钮吗？

用于显示问题的简单测试应用程序 XAML。点击按钮开始动画，表明它有效。

<Window x:Class="UserControlInPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:UserControlInPanel"
        Title="Test" Height="250" Width="400">
    <TabControl>
        <TabControl.Resources>
            <Storyboard x:Key="FlashOnOff">
                <DoubleAnimation Storyboard.TargetName="EditButton" 
                                 Storyboard.TargetProperty="Opacity"
                                 From="1" To="0"
                                 RepeatBehavior="1x"
                                 Duration="0:0:1">
                </DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="EditButton" 
                                 Storyboard.TargetProperty="Opacity"
                                 From="0" To="1"
                                 RepeatBehavior="1x"
                                 Duration="0:0:1">
                </DoubleAnimation>
            </Storyboard>
        </TabControl.Resources>
        <TabItem Header="Combobox Button">
            <StackPanel>
                <ComboBox x:Name="Selector" SelectedIndex="3" HorizontalContentAlignment="Stretch">
                    <ComboBox.Resources>
                        <DataTemplate DataType="{x:Type local:ViewModelItem}">
                            <Border BorderBrush="Black" BorderThickness="1">
                                <TextBlock Text="{Binding Text}" Margin="2"/>
                            </Border>
                        </DataTemplate>
                        <DataTemplate DataType="{x:Type local:ViewModelCustom}">
                            <Border BorderBrush="Black" BorderThickness="1">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding Text}" Margin="2"/>
                                    <Button x:Name="EditButton" Content="Edit..." Padding="4,0" Grid.Column="1">
                                        <Button.Triggers>
                                            <EventTrigger RoutedEvent="Button.Click">
                                                <BeginStoryboard Storyboard="{StaticResource FlashOnOff}">
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Button.Triggers>
                                    </Button>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ComboBox.Resources>

                    <ComboBox.Items>
                        <local:ViewModelItem Text="Predefined choice 1"></local:ViewModelItem>
                        <local:ViewModelItem Text="Predefined choice 2"></local:ViewModelItem>
                        <local:ViewModelItem Text="Predefined choice 3"></local:ViewModelItem>
                        <local:ViewModelCustom Text="Custom"></local:ViewModelCustom>
                    </ComboBox.Items>
                </ComboBox>
                <TextBox Text="{Binding ElementName=Selector, Path=SelectedIndex, StringFormat='{}{0}'}"></TextBox>
            </StackPanel>
        </TabItem>
    </TabControl>
</Window>

背后的代码：

namespace UserControlInPanel
{
    public class ViewModelItem
    {
        private String m_name = "";
        private String m_value = "";

        public string Name { get => m_name; set => m_name = value; }
        public string Text { get => m_value; set => m_value = value; }
    }

    public class ViewModelCustom
    {
        private String m_name = "";
        private String m_value = "";

        public string Name { get => m_name; set => m_name = value; }
        public string Text { get => m_value; set => m_value = value; }
    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

如果重要，请使用 .NET 4.5.2。

Answer 1

或者 - 我可以在组合框关闭时隐藏“编辑...”按钮吗？

这将是最简单的解决方案。在Style 中添加DataTrigger：

<Button x:Name="EditButton" Content="Edit..." Padding="4,0" Grid.Column="1">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource FlashOnOff}">
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>