1. дома
  2. Вопрос и ответ
  3. Как изменить CornerRadius Combobox WPF

Как изменить CornerRadius Combobox WPF

2013-07-18 4 views
0

Я хочу использовать ComboBox с различными CornerRadius, как я могу изменить это просто? Я пробовал с Style и ControlTemplate, но безуспешно.Как изменить CornerRadius Combobox WPF

источник

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>

Вам нужно будет определить VisualStates/Triggers в Style при необходимости

источник

2013-07-18 16:10:21

+0

Работает хорошо. Я искал более простой способ изменить угловой радиус. Во всяком случае, я использовал это как шаблон и сделал несколько модификаций для своих нужд. Спасибо за помощь. – Balo

+1

Как выглядит ComboBoxButtonStyle? В этом примере это отсутствует, поэтому код не работает. – ygoe

+0

'ComboBoxButtonStyle' отсутствует – dotNETbeginner

2

Спасибо 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>

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 и стиль реализации:

<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

Добавить в ComboBox в вашем WPF проекта, право нажмите на него и выберите EditTemplate> Изменить копию ... Выберите имя стиля и нажмите «ОК». против создания ComboBoxTemplate для ComboBox. Теперь вы можете добавить границу и установить желаемый CornerRadius в ComboBoxTemplate.

источник

2017-01-04 10:28:17

Смежные вопросы

 Смежные вопросы