Resources/XAML/ResourceDictionaries/ComboBoxDropDownStyles.xaml
|
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="ComboBox" x:Key="ModernComboBoxStyle"> <Setter Property="Foreground" Value="#333" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFEBEB" Offset="0" /> <GradientStop Color="#FFC1C1" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFC1C1" Offset="0" /> <GradientStop Color="#FF8A8A" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BorderThickness" Value="2" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Height" Value="35" /> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontSize" Value="16" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Grid> <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="12"> <Grid> <ToggleButton x:Name="ToggleButton" Grid.Column="2" Background="Transparent" BorderThickness="0" Focusable="False" IsChecked="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ClickMode="Press"> <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Border Background="Transparent"> <!-- Customizing the appearance of the arrow, etc. can be done here --> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFEBEB" Offset="0" /> <GradientStop Color="#FFA6A6" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFB2B2" Offset="0" /> <GradientStop Color="#FF6F6F" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </ToggleButton.Style> </ToggleButton> <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="5,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left"/> <TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/> </Grid> </Border> <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade"> <Grid MaxHeight="200" MinWidth="{TemplateBinding ActualWidth}"> <Border x:Name="DropDownBorder" BorderBrush="#CCC" BorderThickness="2" CornerRadius="12"> <!-- Applying Gradient Background to DropDown --> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFEBEB" Offset="0" /> <GradientStop Color="#FFC1C1" Offset="1" /> </LinearGradientBrush> </Border.Background> </Border> <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="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#888" /> </Trigger> <Trigger Property="IsKeyboardFocusWithin" Value="True"> <Setter TargetName="Border" Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFB2B2" Offset="0" /> <GradientStop Color="#FF6F6F" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsDropDownOpen" Value="True"> <Setter TargetName="Border" Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFB2B2" Offset="0" /> <GradientStop Color="#FF6F6F" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <!-- Changing DropDown Border Brush when Open --> <Setter TargetName="DropDownBorder" Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFC1C1" Offset="0" /> <GradientStop Color="#FF8A8A" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Border" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFEBEB" Offset="0" /> <GradientStop Color="#FFA6A6" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Border" Property="BorderBrush"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFB2B2" Offset="0" /> <GradientStop Color="#FF6F6F" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- ComboBoxItem Style --> <Style TargetType="ComboBoxItem" x:Key="ModernComboBoxItemStyle"> <Setter Property="Foreground" Value="#333" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="FontSize" Value="16" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBoxItem"> <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="1" CornerRadius="6"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="2" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="Border" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFEBEB" Offset="0" /> <GradientStop Color="#FFC1C1" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Foreground" Value="#333" /> </Trigger> <Trigger Property="IsHighlighted" Value="True"> <Setter TargetName="Border" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFE5E5" Offset="0" /> <GradientStop Color="#FFBBBB" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Border" Property="BorderBrush" Value="#FF8A8A" /> <Setter Property="Foreground" Value="#333" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="#888" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> |