ComboBox.xaml

<!--
    This Source Code Form is subject to the terms of the MIT License.
    If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
    Copyright (C) Leszek Pomianowski and WPF UI Contributors.
    All Rights Reserved.
    
    Based on Microsoft XAML for Win UI
    Copyright (c) Microsoft Corporation. All Rights Reserved.
-->

<!--  TODO: Refactor editable and fix borders  -->

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Wpf.Ui.Controls"
    xmlns:converters="clr-namespace:Wpf.Ui.Converters"
    xmlns:system="clr-namespace:System;assembly=System.Runtime">

    <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />

    <Thickness x:Key="ComboBoxPadding">10,8,10,8</Thickness>
    <Thickness x:Key="ComboBoxBorderThemeThickness">1,1,1,1</Thickness>
    <Thickness x:Key="ComboBoxAccentBorderThemeThickness">0,0,0,2</Thickness>
    <Thickness x:Key="ComboBoxChevronMargin">8,0,10,0</Thickness>
    <Thickness x:Key="ComboBoxItemMargin">6,4,6,0</Thickness>
    <Thickness x:Key="ComboBoxItemContentMargin">10,8,8,8</Thickness>
    <system:Double x:Key="ComboBoxChevronSize">11.0</system:Double>
    <system:Double x:Key="ComboBoxPopupMinHeight">32.0</system:Double>

    <Style x:Key="DefaultComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
        <!--  Focus by parent element  -->
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <!--  Focus by parent element  -->
        <!--  Universal WPF UI ContextMenu  -->
        <Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
        <!--  Universal WPF UI ContextMenu  -->
        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
        <Setter Property="CaretBrush" Value="{DynamicResource ComboBoxForeground}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Visibility" Value="Hidden" />
        <Setter Property="Cursor" Value="IBeam" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <controls:PassiveScrollViewer
                        x:Name="PART_ContentHost"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Style="{DynamicResource DefaultTextBoxScrollViewerStyle}"
                        TextElement.Foreground="{TemplateBinding Foreground}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DefaultComboBoxToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <!--  Focus by parent element  -->
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <!--  Focus by parent element  -->
        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Border.CornerRadius" Value="0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border
                        x:Name="ContentBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding Border.CornerRadius}">
                        <ContentPresenter
                            x:Name="PART_ContentHost"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DefaultComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
        <!--  Universal WPF UI focus  -->
        <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
        <!--  Universal WPF UI focus  -->
        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Padding" Value="{StaticResource ComboBoxItemContentMargin}" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Grid Background="Transparent">
                        <Border
                            Name="ContentBorder"
                            Margin="{DynamicResource ComboBoxItemMargin}"
                            Padding="0"
                            VerticalAlignment="Stretch"
                            CornerRadius="{TemplateBinding Border.CornerRadius}"
                            SnapsToDevicePixels="True">
                            <Grid>
                                <ContentPresenter
                                    x:Name="PART_ContentPresenter"
                                    Margin="{TemplateBinding Padding}"
                                    VerticalAlignment="Center" />
                                <Rectangle
                                    x:Name="ActiveRectangle"
                                    Width="3"
                                    Height="16"
                                    Margin="0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    Fill="{DynamicResource ComboBoxItemPillFillBrush}"
                                    RadiusX="2"
                                    RadiusY="2"
                                    Visibility="Collapsed" />
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="ActiveRectangle" Property="Visibility" Value="Visible" />
                            <Setter TargetName="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DefaultComboBoxStyle" TargetType="{x:Type ComboBox}">
        <!--  Universal WPF UI focus  -->
        <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
        <!--  Universal WPF UI focus  -->
        <!--  Universal WPF UI ContextMenu  -->
        <Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
        <!--  Universal WPF UI ContextMenu  -->
        <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
        <Setter Property="Background" Value="{DynamicResource ComboBoxBackground}" />
        <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource ComboBoxBorderThemeThickness}" />
        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
        <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
        <Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
        <Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="Popup.PopupAnimation" Value="None" />
        <!--  WPF doesn't like centering, the animation is ugly and the mouse button sometimes clicks right away.  -->
        <Setter Property="Popup.Placement" Value="Bottom" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Border
                            x:Name="ContentBorder"
                            Grid.Row="0"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            MinWidth="{TemplateBinding MinWidth}"
                            MinHeight="{TemplateBinding MinHeight}"
                            Padding="0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding Border.CornerRadius}">
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <!--
                                    Funky grid - because:
                                    Chevron is over Presenter, ToggleButton is over Chevron, TextBox is over ToggleButton.
                                    But, TextBox is not over Chevron, so ToggleButton still works.
                                -->
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid Grid.Column="0" Margin="{TemplateBinding Padding}">
                                        <ContentPresenter
                                            Name="PART_Placeholder"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            Content="{TemplateBinding controls:ComboBoxHelper.Placeholder}"
                                            IsHitTestVisible="False"
                                            TextElement.Foreground="{TemplateBinding Foreground}"
                                            Visibility="{TemplateBinding SelectionBoxItem,
                                                                         Converter={StaticResource NullToVisibilityConverter},
                                                                         ConverterParameter=negate}" />
                                        <ContentPresenter
                                            Name="PART_ContentPresenter"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            Content="{TemplateBinding SelectionBoxItem}"
                                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                            IsHitTestVisible="False"
                                            TextElement.Foreground="{TemplateBinding Foreground}" />
                                    </Grid>
                                    <Grid Grid.Column="1" Margin="{StaticResource ComboBoxChevronMargin}">
                                        <controls:SymbolIcon
                                            x:Name="ChevronIcon"
                                            Margin="0"
                                            VerticalAlignment="Center"
                                            FontSize="{StaticResource ComboBoxChevronSize}"
                                            Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
                                            RenderTransformOrigin="0.5, 0.5"
                                            Symbol="ChevronDown24">
                                            <controls:SymbolIcon.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </controls:SymbolIcon.RenderTransform>
                                        </controls:SymbolIcon>
                                    </Grid>
                                    <Grid
                                        Grid.Column="0"
                                        Grid.ColumnSpan="2"
                                        Margin="0">
                                        <ToggleButton
                                            Name="ToggleButton"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            ClickMode="Press"
                                            Focusable="False"
                                            Foreground="{TemplateBinding Foreground}"
                                            IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            Style="{StaticResource DefaultComboBoxToggleButtonStyle}" />
                                    </Grid>
                                    <Grid Grid.Column="0" Margin="{TemplateBinding Padding}">
                                        <TextBox
                                            x:Name="PART_EditableTextBox"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            FontSize="{TemplateBinding FontSize}"
                                            Foreground="{TemplateBinding Foreground}"
                                            IsReadOnly="{TemplateBinding IsReadOnly}"
                                            Style="{StaticResource DefaultComboBoxTextBoxStyle}" />
                                    </Grid>
                                </Grid>
                                <Popup
                                    x:Name="Popup"
                                    VerticalAlignment="Center"
                                    AllowsTransparency="True"
                                    Focusable="False"
                                    IsOpen="{TemplateBinding IsDropDownOpen}"
                                    Placement="{TemplateBinding Popup.Placement}"
                                    PopupAnimation="{TemplateBinding Popup.PopupAnimation}"
                                    VerticalOffset="1">
                                    <Border
                                        x:Name="DropDownBorder"
                                        MinWidth="{TemplateBinding ActualWidth}"
                                        Margin="0"
                                        Padding="0,4,0,6"
                                        Background="{DynamicResource ComboBoxDropDownBackground}"
                                        BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
                                        BorderThickness="1"
                                        CornerRadius="{DynamicResource PopupCornerRadius}"
                                        IsHitTestVisible="False"
                                        SnapsToDevicePixels="True">
                                        <Border.RenderTransform>
                                            <TranslateTransform />
                                        </Border.RenderTransform>
                                        <Grid>
                                            <controls:DynamicScrollViewer
                                                MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                                Margin="0"
                                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                SnapsToDevicePixels="True"
                                                TextElement.FontSize="{TemplateBinding FontSize}"
                                                TextElement.FontWeight="{TemplateBinding FontWeight}"
                                                TextElement.Foreground="{TemplateBinding Foreground}"
                                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                                <StackPanel
                                                    IsItemsHost="True"
                                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                                    TextElement.FontSize="{TemplateBinding FontSize}" />
                                            </controls:DynamicScrollViewer>
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <Border
                            x:Name="AccentBorder"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            BorderBrush="{DynamicResource ComboBoxBorderBrushFocused}"
                            BorderThickness="{StaticResource ComboBoxAccentBorderThemeThickness}"
                            CornerRadius="{TemplateBinding Border.CornerRadius}"
                            Visibility="Collapsed" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDropDownOpen" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ChevronIcon"
                                            Storyboard.TargetProperty="(controls:SymbolIcon.RenderTransform).(RotateTransform.Angle)"
                                            From="0"
                                            To="180"
                                            Duration="00:00:00.167" />
                                        <BooleanAnimationUsingKeyFrames Storyboard.TargetName="DropDownBorder" Storyboard.TargetProperty="IsHitTestVisible">
                                            <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
                                            <DiscreteBooleanKeyFrame KeyTime="00:00:00.167" Value="True" />
                                        </BooleanAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            Storyboard.TargetName="DropDownBorder"
                                            Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
                                            From="-90"
                                            To="0"
                                            Duration="00:00:00.167">
                                            <DoubleAnimation.EasingFunction>
                                                <CircleEase EasingMode="EaseOut" />
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ChevronIcon"
                                            Storyboard.TargetProperty="(controls:SymbolIcon.RenderTransform).(RotateTransform.Angle)"
                                            From="180"
                                            To="0"
                                            Duration="00:00:00.167" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="HasItems" Value="False">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="{StaticResource ComboBoxPopupMinHeight}" />
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="False">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0" />
                        </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="PART_ContentPresenter" Property="Visibility" Value="Hidden" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsKeyboardFocusWithin" Value="True" />
                                <Condition Property="IsEditable" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ComboBoxBackgroundFocused}" />
                            <Setter TargetName="AccentBorder" Property="Visibility" Value="Visible" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsKeyboardFocusWithin" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}" />
                            <Setter TargetName="ContentBorder" Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushDisabled}" />
                            <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource DefaultComboBoxItemStyle}" TargetType="{x:Type ComboBoxItem}" />
    <Style BasedOn="{StaticResource DefaultComboBoxStyle}" TargetType="{x:Type ComboBox}" />

</ResourceDictionary>