制作带圆角的 WPF 组合框答案

【问题标题】：Making a WPF combobox with rounded corners制作带圆角的 WPF 组合框
【发布时间】：2016-07-19 21:01:08
【问题描述】：

在我的应用程序中，我需要使我正在使用的组合框具有圆角。我从this question 的答案中发布的 XAML 开始，并进行了一些修改。我决定我不太喜欢它的外观，所以我尝试对其进行样式设置，使其看起来更像默认组合框。现在我的组合框看起来像这样：,

当下拉时：

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

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

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

最终，我希望用户能够将他/她的鼠标放在组合框上，并让它看起来与未突出显示时相同。任何帮助表示赞赏。谢谢。

【问题讨论】：

我之前已经留下了评论，然后才真正查看哪个是正确的，但没有达到应有的帮助那么详细，因此对此我深表歉意。您实际上缺少的是，在您真正拥有所有内容之前需要解决的问题 Rounded 是从 ComboBox 的默认模板开始，然后选择 ComboBoxToggleButton、ComboBoxEditableTextBox、ComboBoxItem 和那里的模板将是您需要设置 CornerRadius 的多个边框，以及设置 RadiusX、RadiusY 以实现完整样式的多个矩形。
所以我试图根据您的评论工作，并从 ComboBox 的默认模板开始。但是，当我尝试导入它的模板并对其进行编辑时，我收到了一堆关于转换器的错误。这是在我对模板进行任何更改之前。错误是here。我正在使用MahApps，并且模板以某种方式尝试使用该框架中的转换器？我不知道为什么。
啊，好吧，所以您使用的是已经模板化的控件（mahapps），我假设您从 ol 右键单击开始 -> 编辑模板 -> 编辑副本（或当前）路线？因此，您已经在提取可能不是 CLR 的内容。对于您的直接错误，尽管它应该像添加命名空间以在您的资源字典中找到该转换器一样简单。 MahApps 的细节一开始也很高兴知道。 :)
很抱歉没有提到它，在 MahApps 网站上，他们没有提到 ComboBox 作为他们添加的控件，所以我认为它不会产生影响，我的错误。是的，我只是右键单击并编辑了模板的副本。有没有办法只编辑组合框的默认模板而不是 MahApps 版本？我已经添加了命名空间，但我仍然看到相同的错误，由于某种原因找不到它。
所以我只是从这里获取样式：msdn.microsoft.com/en-us/library/dd334408%28v=vs.95%29.aspx。它似乎正在工作，至少我可以看到我对角落所做的更改。@ChrisW 如果你想发表你的评论作为答案，我会接受。谢谢！

标签： c# wpf xaml combobox

【解决方案1】：

继续我们的 cmets 对话（通常 SO 会尽量避免太多噪音），这可能会引起您的注意。

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

注意各个部分中的各种Border 和Rectangle 元素，这些元素需要进行更改才能实现四舍五入。但是，我无法提供任何关于它如何影响 MahApps 的任何见解，因为我对此的经验非常有限，因为我一直只是制作自己的东西来完成它本质上所做的事情。

希望对您有所帮助。 SO的提交要求太长了，所以这里是PasteBin link。

【讨论】：

【解决方案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>

【讨论】：