WPF combobox 圆角制作

时间：2022-06-07 08:46:38

修改ComboBox的Template, 在VS 2010或者Blend中你可以导出ComboBox的默认模板：

VS2010中：WPF combobox 圆角制作

然后修改里面的模板，比如：

<Window x:Class="WpfApplication3.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

  <Window.Resources>

    <ControlTemplate x:Key="Template1" TargetType="ComboBox">

      <Grid Name="MainGrid" SnapsToDevicePixels="True">

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width="*" />

          <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />

        </Grid.ColumnDefinitions>

        <Popup AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" Name="PART_Popup" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">

　　　　　　<!--设置下拉列表样式-->          
　　　　　　<my:SystemDropShadowChrome Color="Transparent" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" Name="Shdw">

            <Border Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderThickness="1" Name="DropDownBorder"

                    CornerRadius="10" BorderBrush="Blue"> <!-- Here -->

              <ScrollViewer Name="DropDownScrollViewer" Margin="5"><!-- Here -->

                <Grid RenderOptions.ClearTypeHint="Enabled">

                  <Canvas Height="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="0">

                    <Rectangle Fill="{Binding Path=Background, ElementName=DropDownBorder}" Height="{Binding Path=ActualHeight, ElementName=DropDownBorder}" Name="OpaqueRect" Width="{Binding Path=ActualWidth, ElementName=DropDownBorder}" />

                  </Canvas>

                  <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" Name="ItemsPresenter" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />

                </Grid>

              </ScrollViewer>

            </Border>

          </my:SystemDropShadowChrome>

        </Popup>

        <ToggleButton Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">

          <ToggleButton.Style>

            <Style TargetType="ToggleButton">

              <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" />

              <Setter Property="Control.IsTabStop" Value="False" />

              <Setter Property="UIElement.Focusable" Value="False" />

              <Setter Property="ButtonBase.ClickMode" Value="Press" />

              <Setter Property="Control.Template">

                <Setter.Value>

                  <ControlTemplate TargetType="ToggleButton">

                    <my:ButtonChrome Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" Name="Chrome" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" SnapsToDevicePixels="True">

                      <!--设置下拉三角箭头样式-->
　　　　　　　　　　　　　<Grid HorizontalAlignment="Right" Background="#7e94a9" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">

                          <!--画出下拉箭头-->
　　　　　　　　　　　　　　　<Path Data="M0,0L3.5,4 7,0z" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" Name="Arrow" VerticalAlignment="Center" />

                      </Grid>

                    </my:ButtonChrome>

                    <ControlTemplate.Triggers>

                      <Trigger Property="ToggleButton.IsChecked" Value="True">

                        <Setter Property="my:ButtonChrome.RenderPressed" TargetName="Chrome" Value="True" />

                      </Trigger>

                      <Trigger Property="UIElement.IsEnabled" Value="False">

                        <!--设置下拉箭头禁用时背景色-->
　　　　　　　　　　　　　　<Setter Property="Shape.Fill" TargetName="Arrow" Value="#FFAFAFAF" />

                      </Trigger>

                    </ControlTemplate.Triggers>

                  </ControlTemplate>

                </Setter.Value>

              </Setter>

            </Style>

          </ToggleButton.Style>

        </ToggleButton>

        <ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />

      </Grid>

      <ControlTemplate.Triggers>

        <Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup" Value="True">

          <Setter Property="FrameworkElement.Margin" TargetName="Shdw" Value="0,0,5,5" />

          <Setter Property="my:SystemDropShadowChrome.Color" TargetName="Shdw" Value="#71000000" />

        </Trigger>

        <Trigger Property="ItemsControl.HasItems" Value="False">

          <Setter Property="FrameworkElement.Height" TargetName="DropDownBorder" Value="95" />

        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">

          <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />

          <Setter Property="Control.Background" Value="#FFF4F4F4" />

        </Trigger>

        <Trigger Property="ItemsControl.IsGrouping" Value="True">

          <Setter Property="ScrollViewer.CanContentScroll" Value="False" />

        </Trigger>

        <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="False">

          <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding Path=VerticalOffset, ElementName=DropDownScrollViewer}" />

          <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding Path=HorizontalOffset, ElementName=DropDownScrollViewer}" />

        </Trigger>

      </ControlTemplate.Triggers>

    </ControlTemplate>

  </Window.Resources>

  </Window>

使用方法，设置combobox的Template为 Temlate1

 <ComboBox Height="23" HorizontalAlignment="Left" Name="comboBox1" VerticalAlignment="Top" Width="120" Template="{StaticResource Template1}" />
如果想全局的设置
则讲上述的 ControlTemplate
复制到app.xml中，外围节点为 <Style TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
上述模板内容
 
</Setter.Value>
            </Setter>
        </Style>
  app.xml头部不要忘记这个
 xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"

相关文章