如何更改组合框WPF的CornerRadius

问题描述 投票：0回答：4

我想使用具有不同

ComboBox
的
CornerRadius
，我怎样才能简单地改变它？我尝试过 
Style
和 
ControlTemplate
，但没有成功。

wpf combobox styles controltemplate cornerradius
4个回答
14
投票

谢谢理查德 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>
10
投票

我不知道这是否简单，但是根据默认的 

ControlTemplate
创建一个 
ComboBox
应该可以解决问题。这是一个例子：

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

如果需要，您需要在 

VisualStates
中定义 
Triggers
/
Style

2
投票

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

0
投票

最简单、最优雅的答案是设计师工具箱晚了 7 年才出现的：用另一个元素裁剪一个元素 - 将组合框放在圆形边框内。

                            <Border Grid.Row="2" Grid.Column="1" CornerRadius="2" 
                                Background="Transparent" 
                                BorderBrush="White" 
                                BorderThickness="1"
                                Height="20"
                                Margin="0,5,0,5"
                                HorizontalAlignment="Stretch"
                                MaxWidth="270">
                            <ComboBox Margin="0" 
                                      BorderThickness="0"
                                      Background="White"
                                      Foreground="Black"
                                <ComboBoxItem>1</ComboBoxItem>
                                <ComboBoxItem>2</ComboBoxItem>
                                <ComboBoxItem>3</ComboBoxItem>
                                <ComboBoxItem>4</ComboBoxItem>
                            </ComboBox>
                        </Border>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.