1. 首頁
  2. 問答
  3. 如何更改組合框WPF的CornerRadius

如何更改組合框WPF的CornerRadius

2013-07-18 51 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

相關問題

 相關問題