如何更改组合框WPF的CornerRadius

Question

我想使用具有不同CornerRadius的ComboBox，如何简单地更改？我尝试过Style和ControlTemplate，但都没有成功。

Answer 1

我不知道这是否简单，但基于默认的ComboBox创建一个ControlTemplate应该可以做到。这里有一个例子：

    <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>

如果需要，您需要在Style中定义VisualStates/Triggers

谢谢Richard E！

这里是Richard E答案的一个干净版本：

<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,1,0,1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="Black">
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border 
                        Background="White" 
                        x:Name="border" 
                        CornerRadius="0,5,5,0" 
                        BorderThickness="0,1,1,1"
                        BorderBrush="Black">
                            <ContentPresenter />
                        </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style  x:Key="RoundComboBox" TargetType="{x:Type ComboBox}">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <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>

更新：

在更改以获得我的自定义版本后，我发现这不是最好的例子（可编辑组合框，未优化，缺少样式等），我在这个网站上找到了一个很好的例子：

http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf

这里是我的自定义版本（要在参考资料中实现，例如：在标记<UserControl.Resources>中）：

<Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="32" />
                        </Grid.ColumnDefinitions>
                        <Border
                          x:Name="Border"
                          Grid.ColumnSpan="2"
                          CornerRadius="8"
                          Background="{TemplateBinding Background}"
                          BorderBrush="#F6F6F6"
                          BorderThickness="1" 
                        />
                        <Path
                            x:Name="Arrow"
                            Grid.Column="1"    
                            Fill="{TemplateBinding Foreground}"
                            Stroke="{TemplateBinding Foreground}"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Data="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="True" />
    </ControlTemplate>
    <Style x:Key="theComboBox" TargetType="{x:Type ComboBox}">
        <Setter Property="Foreground" Value="#333" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="Background" Value="White" />
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="FontSize" Value="13" />
        <Setter Property="MinWidth" Value="150"/>
        <Setter Property="MinHeight" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton
                            Cursor="Hand"
                            Name="ToggleButton"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            Foreground="{TemplateBinding Foreground}"
                            Style="{StaticResource ComboBoxToggleButton}"
                            Grid.Column="2"
                            Focusable="false"
                            IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                            ClickMode="Press"/>
                        <ContentPresenter
                            Name="ContentSite"
                            IsHitTestVisible="False"
                            Content="{TemplateBinding SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            Margin="10,3,30,3"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left" />
                        <TextBox x:Name="PART_EditableTextBox"
                            Style="{x:Null}"
                            Template="{StaticResource ComboBoxTextBox}"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="3,3,23,3"
                            Focusable="True"                               
                            Visibility="Hidden"
                            IsReadOnly="{TemplateBinding IsReadOnly}"/>
                        <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
                                    CornerRadius="8"
                                    x:Name="DropDownBorder"
                                    Background="White"
                                    BorderThickness="1"
                                    BorderBrush="#F6F6F6"
                                    />
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>
    <Style x:Key="theComboBoxItem" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="FontSize" Value="13" />
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border
                        Name="Border"
                        Padding="5"
                        Margin="2"
                        BorderThickness="2,0,0,0"
                        CornerRadius="0"
                        Background="Transparent"
                        BorderBrush="Transparent">
                        <TextBlock TextAlignment="Left">
                            <ContentPresenter />
                        </TextBlock>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter TargetName="Border" Property="BorderBrush" Value="#B3CB37"/>
                            <Setter TargetName="Border" Property="Background" Value="#F8FAEB"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这里的组合框和样式实现：

<ComboBox 
    FontSize="13"
    Style="{DynamicResource theComboBox}"
    Padding="15,5,15,5"
    HorizontalContentAlignment="Left"
    VerticalAlignment="Center"
    MinWidth="100"
    MaxWidth="375"
    Grid.Row="1"
    Grid.Column="1"
    ItemContainerStyle="{DynamicResource theComboBoxItem}"
>
    <ComboBoxItem>Available</ComboBoxItem>
    <ComboBoxItem>Busy</ComboBoxItem>
    <ComboBoxItem>On Duty</ComboBoxItem>
    <ComboBoxItem>On Meeting</ComboBoxItem>
    <ComboBoxItem>On Vacation</ComboBoxItem>
    <ComboBoxItem>On Weekend</ComboBoxItem>
</ComboBox>

在WPF项目中添加一个ComboBox，右键单击它并选择EditTemplate>编辑副本。。。选择样式名称，然后单击"确定"。vs为ComboBox创建一个ComboBoxTemplate。现在，您可以添加一个边界，并将所需的CornerRadius设置为ComboBoxTemplate。