1. 首页
  2. 问答
  3. 如何更改组合框WPF的CornerRadius

如何更改组合框WPF的CornerRadius

2013-07-18 86 views
0

我想使用ComboBox与不同的CornerRadius，我该如何改变它？我试过Style和ControlTemplate，但没有任何成功。如何更改组合框WPF的CornerRadius

来源

2013-07-18 Balo

+1

你能发表一些代码吗？模板应该正确分配。 –

回答

5

我不知道这是否简单，但创建一个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>

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

来源

2013-07-18 16:10:21

+0

很好地工作。我正在寻找更简单的方法来改变角落半径。无论如何，我用这个作为模板，并为我的需求做了一些修改。谢谢您的帮助。 – Balo

+1

ComboBoxButtonStyle如何查看？它在这个例子中缺少，所以代码不起作用。 – ygoe

+0

'ComboBoxButtonStyle'丢失 – dotNETbeginner

2

感谢理查德E！

这里干净的版本理查德·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>

UPDATE：

改变让我的定制版本，我发现它并没有开始与最好的例子（编辑后组合框，没有优化，缺少风格等...），我发现这个网站上的一个很好的例子：

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>

来源

2017-01-03 15:17:39 Safe

0

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

来源

2017-01-04 10:28:17

相关问题

 相关问题