WPF combobox DataTemplate with button not clickable when combobox collapsed

Question

How to make a button in ComboBox itemtemplate clickable when the combobox is closed?

I have a WPF user control for some static choices and a "custom..." item in the end of the list, where DataTemplate for custom item has a "Edit..." button.

The button works in the items in dropdown but not up in the selected value. Click on closed combo box opens the dropdown instead. Alternativerly - can I just hide the "Edit..." button when the combobox is closed?

Simple test application XAML to show the issue. Click on button starts animation, to indicate that it worked.

<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>

The code behind:

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();
        }
    }
}

Using .NET 4.5.2 if that matters.

Answer 1

Alternativerly - can I just hide the "Edit..." button when the combobox is closed?

This would be the simplest solution. Add a DataTrigger to the Style:

<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>