制作带圆角的WPF组合框

Question

在我的应用程序中，我需要让我使用的组合框有圆角。我开始在this question的答案中张贴了XAML并进行了一些修改。我觉得我不喜欢那个看起来那么多的样子，所以我试着给它做样，让它看起来更像是默认的组合框。现在我的组合框看起来像这样：，

当下降时：

问题是，当用户将鼠标放在组合框上时，它看起来像这样：。如果我使用Snoop，我可以看到此信息：

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

这是我的ComboBox的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

继续我们的评论对话（通常是SO试图避免这么大的噪音）这可能会让你跟踪。

因此，如果我从新的WPF应用程序中获取所有模板内容到基本默认ComboBox和ComboBoxItem，这就是输出。虽然你不需要所有这些，但它应该确保所有预期的功能和DOM部分在这里作为参考，所以你有所有的东西，如触发器，模板绑定件等，都可用。

请注意各个部分中的各种Border和Rectangle元素，这些元素需要更改才能实现所有内容的舍入。然而，我不能提供任何关于它如何影响MahApps的任何见解，因为我的经验非常有限，因为我总是只做自己的事情来完成它本质上的工作。

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

Answer 2

<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border CornerRadius="5,0,0,5"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}"
                                BorderBrush="Black">
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <TextBox Name="PART_EditableTextBox"
                                 Style="{StaticResource ComboBoxTextBoxStyle}"
                                 Padding="5,0,0,0"
                                 Height="{TemplateBinding Height}"/>
                        <ToggleButton Grid.Column="1" Margin="0"
                                     Height="{TemplateBinding Height}"
                                     Style="{StaticResource ComboBoxButtonStyle}"
                                     Focusable="False"
                                     IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      ClickMode="Press">
                            <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"
                                      Content="{TemplateBinding SelectionBoxItem}"
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Left"
                                      Margin="5,0,0,0"/>
                        <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="Azure"
                                    BorderBrush="Black"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>