WPF Combobox ermöglicht das Klicken auf Elemente außerhalb

Question

Standardverhalten von WPF Combobox ist, wenn es erweitert und der Benutzer irgendwo außerhalb klickt es dann zusammenbricht.

Ist es möglich, eine solche Combobox zu erstellen, die nicht deaktiviert andere Steuerelemente deaktiviert, wenn erweitert? So kann ich auf etwas außerhalb davon klicken und es würde nur zusammengelegt/erweitert werden, wenn ich genau auf dem kleinen Knopf mit einem Dreieck auf der rechten Seite drücke?

Answer 1

Sie können ein solches Verhalten erzielen, ohne die Vorlage ComboBox mit Expander und ListView zu überschreiben. Zum Beispiel:

<Expander> 
    <ListView> 
     <ListViewItem Content="1"/> 
     <ListViewItem Content="2"/> 
     <ListViewItem Content="3"/> 
     <ListViewItem Content="4"/> 
     <ListViewItem Content="5"/> 
    </ListView> 
</Expander> 

Update:

Stil ComboBox wo ItemsPresenter geschlossen ist nur, wenn Sie auf der rechten Dreieck klicken:

<Style x:Key="ComboBoxFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Rectangle Margin="4,4,21,4" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#F3F3F3" Offset="0"/> 
     <GradientStop Color="#EBEBEB" Offset="0.5"/> 
     <GradientStop Color="#DDDDDD" Offset="0.5"/> 
     <GradientStop Color="#CDCDCD" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> 
    <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry> 
    <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="ClickMode" Value="Press"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true"> 
         <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"> 
          <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/> 
         </Grid> 
        </Themes:ButtonChrome> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0"> 
     <GradientStop Color="#ABADB3" Offset="0.05"/> 
     <GradientStop Color="#E2E3EA" Offset="0.07"/> 
     <GradientStop Color="#E3E9EF" Offset="1"/> 
    </LinearGradientBrush> 
    <Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="AllowDrop" Value="true"/> 
     <Setter Property="MinWidth" Value="0"/> 
     <Setter Property="MinHeight" Value="0"/> 
     <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 
     <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TextBox}"> 
        <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="ClickMode" Value="Press"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RoundCorners="false" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"> 
         <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center"/> 
        </Themes:ButtonChrome> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}"> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/> 
     <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="Padding" Value="4,3"/> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
     <Setter Property="ScrollViewer.PanningMode" Value="Both"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ComboBox}"> 
        <Grid x:Name="MainGrid" SnapsToDevicePixels="true"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/> 
         </Grid.ColumnDefinitions> 
         <!--<Popup x:Name="PART_Popup" StaysOpen="True" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">--> 
         <Popup x:Name="PART_Popup" IsOpen="{Binding IsChecked, ElementName=toggleButton, Mode=TwoWay}" StaysOpen="True" AllowsTransparency="true" Grid.ColumnSpan="2" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> 
         <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}"> 
           <!--<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="25" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">--> 
            <Border x:Name="DropDownBorder" BorderBrush="Green" BorderThickness="5" Background="Red"> 
            <ScrollViewer x:Name="DropDownScrollViewer"> 
             <Grid RenderOptions.ClearTypeHint="Enabled"> 
              <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
               <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/> 
              </Canvas> 
              <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 

             </Grid> 
            </ScrollViewer> 
           </Border> 
          </Themes:SystemDropShadowChrome> 
         </Popup> 
         <!--<ToggleButton Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>--> 
         <ToggleButton Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Style="{StaticResource ComboBoxReadonlyToggleButton}"/> 
         <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
          <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
          <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
         </Trigger> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter Property="Height" TargetName="DropDownBorder" Value="95"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
          <Setter Property="Background" Value="#FFF4F4F4"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsGrouping" Value="true"/> 
           <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </MultiTrigger> 
         <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"> 
          <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/> 
          <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsEditable" Value="true"> 
       <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/> 
       <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/> 
       <Setter Property="IsTabStop" Value="false"/> 
       <Setter Property="Padding" Value="3"/> 
       <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

Beispiel für Stil verwendet, ist:

<ComboBox Style="{DynamicResource ComboBoxStyle1}" >     
    <ComboBoxItem Content="1"/> 
    <ComboBoxItem Content="2"/> 
    <ComboBoxItem Content="3"/> 
</ComboBox>