VS自带的控件总是觉得不够美观,而xaml语言提供了一个自己编写控件样式的可能性
效果图:
xaml代码:
<ComboBox.Resources> <Style TargetType="{x:Type ComboBox}"> <Setter Property="Width" Value="120"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ComboBox}"> <Border BorderBrush="White" BorderThickness="2" CornerRadius="22" Background="Transparent"> <Grid> <!--下拉箭头--> <ToggleButton ClickMode="Press" Focusable="False" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="12" MinWidth="10" MinHeight="0" Width="Auto" Foreground="White"> <ToggleButton.Style> <Style TargetType="{x:Type ToggleButton}"> <Setter Property="MinWidth" Value="0"/> <Setter Property="MinHeight" Value="0"/> <Setter Property="Width" Value="Auto"/> <Setter Property="Height" Value="Auto"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="#00000000"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <DockPanel Background="{TemplateBinding Background}" LastChildFill="False" SnapsToDevicePixels="True"> <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" DockPanel.Dock="Right" > <Path Data="M0,0L3.5,4 7,0z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </DockPanel> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"/> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/> </Trigger> </Style.Triggers> </Style> </ToggleButton.Style> </ToggleButton> <!--项内容--> <ContentPresenter IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" VerticalAlignment="Center" Margin="3" HorizontalAlignment="Stretch" /> <TextBox x:Name="PART_EditableTextBox" HorizontalAlignment="Stretch" Focusable="True" Visibility="Collapsed" IsReadOnly="False"/> <!--下拉显示面板HorizontalOffset:设置下拉面板的相对位置--> <Popup HorizontalOffset="-1" Width="{TemplateBinding ActualWidth}" IsOpen="{TemplateBinding IsDropDownOpen}" Focusable="False" PopupAnimation="Slide"> <Grid SnapsToDevicePixels="True" HorizontalAlignment="Stretch"> <Border BorderThickness="0,0,0,0" BorderBrush="White" HorizontalAlignment="Stretch" CornerRadius="0" Background="White"/> <ScrollViewer SnapsToDevicePixels="True" HorizontalAlignment="Stretch" > <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" HorizontalAlignment="Stretch" /> </ScrollViewer> </Grid> </Popup> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ComboBox.Resources> <ComboBox.Background> <LinearGradientBrush EndPoint="0,1" StartPoint="0,10"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </ComboBox.Background> <ComboBoxItem Content="管理员" Foreground="#FF505050" BorderThickness="0"/> <ComboBoxItem Content="操作员" Foreground="#FF505050" BorderThickness="0" BorderBrush="White" Background="White"/> </ComboBox>