2016-08-30 3 views
3

Ich habe ein Problem beim Ändern der Farbe, wenn ich ein Kombinationsfeld öffnen und über ein Element bewegen. Ich habe versucht, ändern SolidColorBrush, aber nichts passiert, ich benutze eine benutzerdefinierte Vorlage für meine Combo-Box und ich bin nicht wirklich sicher, was zu ändern, um das Ergebnis, das ich will.WPF Combobox Hover ändern Farbvorlage

Example

Hier ist mein Code:

<ControlTemplate x:Key="cmbTemplate" TargetType="{x:Type ComboBox}"> 

     <Grid x:Name="templateRoot" SnapsToDevicePixels="True"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/> 
      </Grid.ColumnDefinitions> 
      <Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> 

       <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" Height="100" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}"> 
        <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Width="248"> 
         <ScrollViewer x:Name="DropDownScrollViewer"> 
          <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled"> 
           <Canvas x:Name="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 x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"> 
       <ToggleButton.Style> 
        <Style 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="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type ToggleButton}"> 
            <Border x:Name="templateRoot" BorderBrush="#FFACACAC" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> 
             <Border.Background> 
              <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
               <GradientStop Color="#FFF0F0F0" Offset="0"/> 
               <GradientStop Color="#FFE5E5E5" Offset="1"/> 
              </LinearGradientBrush> 
             </Border.Background> 
             <Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="True" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"> 
              <Path x:Name="Arrow" Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z" Fill="#FF606060" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/> 
             </Border> 
            </Border> 
            <ControlTemplate.Triggers> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/> 
               <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="false"/> 
               <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="false"/> 
               <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="true"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot" Value="White"/> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFABADB3"/> 
              <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/> 
              <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/> 
             </MultiDataTrigger> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Fill" TargetName="Arrow" Value="Black"/> 
             </Trigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot"> 
               <Setter.Value> 
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                 <GradientStop Color="#FFECF4FC" Offset="0"/> 
                 <GradientStop Color="#FFDCECFC" Offset="1"/> 
                </LinearGradientBrush> 
               </Setter.Value> 
              </Setter> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#d2c71a"/> 
             </MultiDataTrigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot" Value="White"/> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF7EB4EA"/> 
              <Setter Property="Background" TargetName="splitBorder"> 
               <Setter.Value> 
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                 <GradientStop Color="#FFEBF4FC" Offset="0"/> 
                 <GradientStop Color="#FFDCECFC" Offset="1"/> 
                </LinearGradientBrush> 
               </Setter.Value> 
              </Setter> 
              <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF7EB4EA"/> 
             </MultiDataTrigger> 
             <Trigger Property="IsPressed" Value="True"> 
              <Setter Property="Fill" TargetName="Arrow" Value="Black"/> 
             </Trigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot"> 
               <Setter.Value> 
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                 <GradientStop Color="#FFDAECFC" Offset="0"/> 
                 <GradientStop Color="#FFC4E0FC" Offset="1"/> 
                </LinearGradientBrush> 
               </Setter.Value> 
              </Setter> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/> 
             </MultiDataTrigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot" Value="White"/> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/> 
              <Setter Property="Background" TargetName="splitBorder"> 
               <Setter.Value> 
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                 <GradientStop Color="#FFDAEBFC" Offset="0"/> 
                 <GradientStop Color="#FFC4E0FC" Offset="1"/> 
                </LinearGradientBrush> 
               </Setter.Value> 
              </Setter> 
              <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF569DE5"/> 
             </MultiDataTrigger> 
             <Trigger Property="IsEnabled" Value="False"> 
              <Setter Property="Fill" TargetName="Arrow" Value="#FFBFBFBF"/> 
             </Trigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot" Value="#FFF0F0F0"/> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFD9D9D9"/> 
             </MultiDataTrigger> 
             <MultiDataTrigger> 
              <MultiDataTrigger.Conditions> 
               <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
               <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/> 
              </MultiDataTrigger.Conditions> 
              <Setter Property="Background" TargetName="templateRoot" Value="White"/> 
              <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFBFBFBF"/> 
              <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/> 
              <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/> 
             </MultiDataTrigger> 
            </ControlTemplate.Triggers> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ToggleButton.Style> 
      </ToggleButton> 
      <Border x:Name="Border" Background="White" Margin="{TemplateBinding BorderThickness}"> 
       <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="7,19,3,-62" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Height="Auto" TextWrapping="NoWrap" Width="240"> 
        <TextBox.Style> 
         <Style 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="Height" Value="250"/> 
          <Setter Property="Padding" 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" Margin="0,0,0,32"/> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </TextBox.Style> 
       </TextBox> 
      </Border> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Opacity" TargetName="Border" Value="0.56"/> 
      </Trigger> 
      <Trigger Property="IsKeyboardFocusWithin" Value="True"> 
       <Setter Property="Foreground" Value="Black"/> 
      </Trigger> 
      <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True"> 
       <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/> 
       <Setter Property="Color" TargetName="shadow" Value="#71000000"/> 
      </Trigger> 
      <Trigger Property="HasItems" Value="False"> 
       <Setter Property="Height" TargetName="DropDownBorder" Value="95"/> 
      </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="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> 
+0

Möglicherweise müssen Sie den Style auf dem ComboBoxItem-Typ festlegen. Oder wenn Sie DataTemplates verwenden, setzen Sie den Hintergrund auf dem Containing Element (zB StackPanel) – lokusking

+0

Können Sie mir vielleicht ein Beispiel geben? Dies ist die Vorlage einer MaterialDesign Combobox und ich habe sie nur ein wenig verändert, zum ersten Mal mit XAML und WPF. – Mensa10

Antwort

1

Nach Ihnen eine einfache (und hässlich) Ansatz finden, wie Sie das Aussehen eines ComboBoxItem ändern können:

Stil

<Style x:Key="ItemStyle" TargetType="{x:Type ComboBoxItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
         <Border x:Name="gd" Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}},Path=Background}"> 

          <ContentPresenter /> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="ComboBoxItem.IsMouseOver" Value="True"> 
           <Setter TargetName="gd" Property="Background" Value="DarkBlue"></Setter> 
           <Setter TargetName="gd" Property="TextElement.Foreground" Value="White"></Setter> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Nutzungs

<ComboBox Height="50"> 
      <ComboBox.Style> 
       <Style TargetType="ComboBox"> 
        <Setter Property="Template" Value="{StaticResource cmbTemplate}"/> 
        <Setter Property="ItemContainerStyle" Value="{StaticResource ItemStyle}" ></Setter> 
       </Style> 

      </ComboBox.Style> 
      <ComboBoxItem>Item1</ComboBoxItem> 
      <ComboBoxItem>Item2</ComboBoxItem> 
      <ComboBoxItem>Item3</ComboBoxItem> 
     </ComboBox> 

Soweit ich weiß, gibt es keine andere als die ganze ControlTemplate des ComboBoxItem zu ändern.

+0

thx Kumpel, das war episch, funktioniert wie ein Zauber !!! – Mensa10