制作带圆角的WPF组合框

Question

在我的应用程序中，我需要使我使用的组合框具有圆角。我从XAML开始在this question的回答中发表了一些修改。我决定我不喜欢那种看起来很多的方式，所以我试图去设计它，让它看起来更像是默认的组合框。现在我的组合框看起来是这样的：，

当掉了下来：

的问题是，当用户将其鼠标移到组合框，它看起来像这样：。如果我使用Snoop，我可以看到这个信息：

它说 是该边框背景的值被设置为“＃FFBEE6FD”，这是显示的颜色，当鼠标悬停组合框。值来源是“ParentTemplateTrigger”。我的问题是，我不知道这个边界来自哪里，或者它为什么会获得这个价值。我试图添加模板触发器与setter将背景设置为白色，但我不知道为此神秘边框设置值。

这里是我的组合框的XAML：

<ComboBox x:Name="ScanSizesComboBox" 
       Style="{StaticResource roundedCornersComboBox}" 
       Grid.ZIndex="4" 
       ItemsSource="{Binding ScanSizes}" 
       SelectedItem="{Binding SelectedScanSize, Mode=TwoWay}" 
       ToolTip="{Binding (Validation.Errors)[0].ErrorContent}" 
       Margin="0,10,89,0" 
       HorizontalAlignment="Right" 
       Width="61" 
       Height="26" 
       VerticalAlignment="Top" 
       Grid.Row="4"> 

    </ComboBox> 

这里是风格：

<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TextBox}"> 
       <Grid> 
        <Border Name="ComboBoxTextBoxStyleBorder" CornerRadius="2" 
         BorderThickness="0,1,0,1" 
          Margin="0,0,1,1" 
         Background="{TemplateBinding Background}"> 
         <Border.Style> 
          <Style TargetType="Border"> 
           <Style.Triggers> 
            <Trigger Property="IsMouseOver" Value="true"> 
             <Setter Property="Background" Value="White"/> 
            </Trigger> 

           </Style.Triggers> 
          </Style> 
         </Border.Style> 
         <ScrollViewer x:Name="PART_ContentHost"/> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="IsReadOnly" Value="True"/> 
</Style> 

<!--Rounded corners combo box--> 
<Style TargetType="{x:Type ComboBox}" x:Key="roundedCornersComboBox"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Border Name="roundedCornerComboBoxBorder" BorderBrush="#CCCCCC" BorderThickness="1" CornerRadius="3" ClipToBounds="True" Background="White"> 
        <Border.Style> 
         <Style TargetType="Border"> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter Property="Background" Value="White"/> 
           </Trigger> 

          </Style.Triggers> 
         </Style> 
        </Border.Style> 
        <Canvas> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <TextBox Name="PART_EditableTextBox" 
            Panel.ZIndex="0" 
            Style="{StaticResource ComboBoxTextBoxStyle}" 
            Padding="0,0,0,0" 
            IsHitTestVisible="False" 
            Height="{TemplateBinding Height}"> 
          </TextBox> 
          <ToggleButton Grid.Column="1" Margin="0, 0, 0, 0" 
             Panel.ZIndex="1" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             BorderBrush="Transparent" 
             Background="Transparent" 
             Height="{TemplateBinding Height}" 
             Width="60" 
             IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
             HorizontalContentAlignment="Right" 
             ClickMode="Press"> 

           <ToggleButton.Style> 
            <Style TargetType="ToggleButton"> 
             <Style.Triggers> 
              <Trigger Property="IsMouseOver" 
                Value="true"> 
               <Setter Property="Background" 
                 Value="White" /> 
              </Trigger> 
             </Style.Triggers> 
            </Style> 
           </ToggleButton.Style> 

           <Path Grid.Column="1" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             Data="M 0 0 L 4 4 L 8 0 Z" 
             Fill="DodgerBlue" /> 
          </ToggleButton> 
          <ContentPresenter Name="ContentSite" 
               Cursor="Arrow" 
              Content="{TemplateBinding SelectionBoxItem}" 
              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
              VerticalAlignment="Center" 
              HorizontalAlignment="Left" 
              Margin="3,0,0,0"> 
          </ContentPresenter> 
          <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" 
             BorderThickness="1" 
             CornerRadius="5" 
             Background="White" 
             BorderBrush="Black"/> 
            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> 
             <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> 
            </ScrollViewer> 
           </Grid> 
          </Popup> 
         </Grid> 
        </Canvas> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

最终，我希望用户能够对他/她的鼠标移到地方组合框，并且它看起来与未突出显示时的效果相同。任何帮助表示赞赏。谢谢。

Answer 1

继续我们的评论对话（通常这会尽量避免这么多噪音），这可能会让你受到追踪。

因此，如果我只从全新的WPF应用程序中抓取所有模板内容到纯粹的骨骼基本默认值ComboBox和ComboBoxItem，则这是输出。当然你并不需要所有的东西，但是它应该确保所有预期的功能和DOM部分都在这里供参考，所以你可以使用所有的东西，如触发器，模板绑定等等，都可用。

请注意在需要为了实现一切的舍入被改变各部分的各种Border和Rectangle元素。然而，我不能提供任何有关如何影响MahApps的任何见解，因为我的经验相当有限，因为我一直只是做自己的事情来完成它基本上做的事情。

希望它有帮助。对于SO的提交要求来说太长了，尽管如此，这里是PasteBin link。