Combo Box is now theme-ified

This commit is contained in:
Caeden Statia 2020-02-01 09:35:18 -08:00
parent 501e3e5322
commit 5881a63be3
5 changed files with 188 additions and 3 deletions

View file

@ -23,6 +23,7 @@
<ResourceDictionary x:Name="Rectangle_Style" Source="Styles/Rectangle.xaml"/>
<ResourceDictionary x:Name="ComboBoxItem_Style" Source="Styles/ComboBoxItem.xaml"/>
<ResourceDictionary x:Name="ComboBox_Style" Source="Styles/ComboBox.xaml"/>
<ResourceDictionary x:Name="ToggleButton_Style" Source="Styles/ToggleButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

View file

@ -159,6 +159,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Styles\ToggleButton.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Themes\Dark.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>

View file

@ -1,6 +1,104 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="ComboBox">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxTextColor}"/>
<Setter Property="Foreground" Value="{DynamicResource TextColor}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxOutline}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid Name="templateRoot" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition MinWidth="{DynamicResource SystemParameters.VerticalScrollBarWidthKey}" Width="0" />
</Grid.ColumnDefinitions>
<Popup
Name="PART_Popup"
AllowsTransparency="True"
Placement="Bottom"
Grid.ColumnSpan="2"
PopupAnimation="{DynamicResource SystemParameters.ComboBoxPopupAnimationKey}"
IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
<Border
Name="DropDownBorder"
BorderBrush="{DynamicResource ComboBoxOutline}"
Background="{DynamicResource ComboBoxBackground}"
BorderThickness="1">
<ScrollViewer Name="DropDownScrollViewer">
<Grid Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas
Name="canvas"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="0"
Width="0">
<Rectangle
Name="OpaqueRect"
Fill="{Binding Background, ElementName=DropDownBorder}"
Height="{Binding ActualHeight, ElementName=DropDownBorder}"
Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
</Canvas>
<ItemsPresenter
Name="ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
</Popup>
<Border
Name="Border"
Background="Transparent"
Margin="{TemplateBinding BorderThickness}">
<TextBox
Name="PART_EditableTextBox"
Margin="{TemplateBinding Padding}"
BorderBrush="Transparent"
BorderThickness="0"
Foreground="{DynamicResource TextColor}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
IsReadOnly="True"
Background="Transparent"
Text="{TemplateBinding Text}"/>
</Border>
<ToggleButton
Name="toggleButton"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="UIElement.Opacity" Value="0.56" />
</Trigger>
<Trigger Property="UIElement.IsKeyboardFocusWithin" Value="True">
<Setter Property="Foreground" Value="#FF000000" />
</Trigger>
<Trigger SourceName="PART_Popup" Property="Popup.HasDropShadow" Value="True">
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter TargetName="DropDownBorder" Property="Height" Value="95" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.IsGrouping" Value="True" />
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</MultiTrigger>
<Trigger SourceName="DropDownScrollViewer" Property="CanContentScroll" Value="False">
<Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
<Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ComboBox.IsEditable" Value="True">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Padding" Value="2" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>

View file

@ -0,0 +1,81 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Foreground" Value="{DynamicResource SystemColors.ControlTextBrushKey}" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxOutline}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton"/>
</Grid.ColumnDefinitions>
<Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True"
Opacity="0.5">
<Path
Name="ArrowDownPath"
Data="M2.5,0 L8.5,0 L5.5,3"
Fill="{DynamicResource ComboBoxArrow}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="5"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxOutline}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxSelected}" />
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxHighlighted}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxHighlighted}" />
</Trigger>
<Trigger Property="UIElement.IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxHighlighted}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxHighlighted}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="UIElement.IsMouseOver" Value="True" />
<Condition Property="ToggleButton.IsChecked" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxHighlighted}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxSelected}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="UIElement.IsKeyboardFocused" Value="True" />
<Condition Property="ToggleButton.IsChecked" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxHighlighted}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxSelected}" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxClicked}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxClicked}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Value="{DynamicResource SystemColors.GrayTextBrushKey}" Property="Foreground" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

View file

@ -23,10 +23,11 @@
<!--Combo Box (Version select)-->
<SolidColorBrush x:Key="ComboBoxBackground" Color="#2E2E2E"/>
<SolidColorBrush x:Key="ComboBoxTextColor" Color="Black"/>
<SolidColorBrush x:Key="ComboBoxOutline" Color="#696969"/>
<SolidColorBrush x:Key="ComboBoxHighlighted" Color="#454545"/>
<SolidColorBrush x:Key="ComboBoxSelected" Color="#696969"/>
<SolidColorBrush x:Key="ComboBoxClicked" Color="#A2A2A2"/>
<SolidColorBrush x:Key="ComboBoxArrow" Color="White"/>
<!--Checkboxes (Mod List and Options)-->
<SolidColorBrush x:Key="CheckboxDefaultBackground" Color="#454545"/>