XAML ComboBox DataTemplate 팝업이 클릭시 표시되지 않음

Question

리소스 xaml 파일에 사용자 정의 ComboBox가 정의되어 있습니다. 모든 것이 정상적으로 작동하지만 드롭 다운은 콤보 박스에 초점을 맞추고 alt-dn을 누르면 표시됩니다. 나는 표준 콤보 박스와 같이 클릭했을 때 나타나는 팝업을 원하지만, 왜 내 템플릿이 이것을 막고 있는지 알 수 없다. 아무도 빛을 비춰 줄 수 있습니까?

<ControlTemplate TargetType="ComboBox" x:Key="ComboBoxTemplate"> 
     <Border Name="Border" BorderBrush="{DynamicResource ButtonBorder}" Background="{DynamicResource ButtonBackgroundBrush}" BorderThickness="2" CornerRadius="3" 
       TextBlock.FontFamily="{DynamicResource Font}" TextBlock.FontSize="{DynamicResource MainFontSize}" TextBlock.Foreground="{DynamicResource PlainTextColour}"> 
      <Grid> 
       <Rectangle Name="Focus" Grid.ColumnSpan="2" Visibility="Hidden" Stroke="{DynamicResource FocusColor}" Margin="0" StrokeThickness="1" StrokeDashArray="2 1" SnapsToDevicePixels="True" /> 
       <ContentPresenter Name="Content" Content="{TemplateBinding SelectedItem}" RecognizesAccessKey="True" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center" FocusVisualStyle="{x:Null}" /> 
       <Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource GlyphBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> 
       <Popup x:Name="PART_Popup" 
        IsOpen="{TemplateBinding IsDropDownOpen}"> 
        <Border x:Name="PopupBorder" Style="{DynamicResource CustomBorder}" 
        HorizontalAlignment="Stretch" Height="Auto" 
        MinWidth="{TemplateBinding ActualWidth}" 
        MaxHeight="{TemplateBinding MaxDropDownHeight}" 
        Background="{DynamicResource WindowBackground}"> 
         <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1"> 
          <ItemsPresenter/> 
         </ScrollViewer> 
        </Border> 
       </Popup> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition/> 
        <ColumnDefinition Width="10"/> 
       </Grid.ColumnDefinitions> 
      </Grid> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter TargetName="Border" Property="Background" Value="{DynamicResource MouseOverButtonBrush}"/> 
       <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource MouseOverBorder}"/> 
      </Trigger> 
      <Trigger Property="IsKeyboardFocused" Value="True"> 
       <Setter TargetName="Focus" Property="Visibility" Value="Visible"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter TargetName="Border" Property="TextBlock.Foreground" Value="{DynamicResource DisabledTextColour}"/> 
       <Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledButtonBackground}"/> 
       <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource DiabledButtonBorder}"/> 
      </Trigger> 

     </ControlTemplate.Triggers> 
    </ControlTemplate> 

Answer 1

나는 템플릿 ToggleButton에서 구현할 필요가 있다고 생각 : Popup을 보여주는

<ToggleButton Name="ToggleButton" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" /> 

속성 IsChecked 책임.

그리고이 같은 Popup 사용

<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" ... /> 

스타일의 완벽한 예 ToggleButton과 :

<!-- Template for ToggleButton --> 
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition Width="20" /> 
      </Grid.ColumnDefinitions> 

      <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" Background="#A6A6A6" BorderBrush="Gray" BorderThickness="1" /> 

      <Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White" BorderBrush="Gray" BorderThickness="0" /> 

      <Path x:Name="Arrow" Grid.Column="1" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> 
     </Grid> 

     <ControlTemplate.Triggers> 
      <Trigger Property="ToggleButton.IsMouseOver" Value="True"> 
       <Setter TargetName="Border" Property="Background" Value="Black" /> 
       <Setter TargetName="Border" Property="Cursor" Value="Arrow" /> 
      </Trigger> 

      <Trigger Property="ToggleButton.IsChecked" Value="True"> 
       <Setter TargetName="Border" Property="Background" Value="#D0D0D0" /> 
      </Trigger> 

      <Trigger Property="IsEnabled" Value="False"> 
       <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" /> 
       <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
       <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/> 
       <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 

    <!-- Template for TextBox (in ComboBox) --> 
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"> 
     <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" /> 
    </ControlTemplate> 

    <!-- Main style for ComboBox --> 
    <Style x:Key="{x:Type ComboBox}" TargetType="ComboBox"> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="True" /> 
     <Setter Property="MinWidth" Value="10" /> 
     <Setter Property="MinHeight" Value="10" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ComboBox"> 
        <Grid> 
         <ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" /> 
         <ContentPresenter 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 Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> 
          <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
           <Border x:Name="DropDownBorder" Background="White" BorderThickness="1" BorderBrush="Gray" /> 

           <ScrollViewer Margin="2" SnapsToDevicePixels="True"> 
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> 
           </ScrollViewer> 
          </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="{StaticResource DisabledForegroundBrush}" /> 
         </Trigger> 

         <Trigger Property="IsGrouping" Value="True"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="False" /> 
         </Trigger> 

         <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True"> 
          <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0" /> 
          <Setter TargetName="DropDownBorder" Property="Margin" Value="0" /> 
         </Trigger> 

         <Trigger Property="IsEditable" Value="True"> 
          <Setter Property="IsTabStop" Value="False" /> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" /> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden" /> 
          <Setter Property="Cursor" Value="IBeam" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>  

Output

을