NodeAutoCompleteBarView.xaml

<Window x:Class="Dynamo.NodeAutoComplete.Views.NodeAutoCompleteBarView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ui="clr-namespace:Dynamo.UI;assembly=DynamoCoreWpf"
             xmlns:local="clr-namespace:Dynamo.PackageManager.UI;assembly=DynamoCoreWpf"
             xmlns:dynconverters="clr-namespace:Dynamo.Controls;assembly=DynamoCoreWpf"
             xmlns:resxother="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf"
             mc:Ignorable="d"
             WindowStyle="None"
             AllowsTransparency="True"
             Background="Transparent"
             ShowInTaskbar="False"
             ResizeMode="NoResize"
             Height="45"
             PreviewKeyDown="OnAutoCompleteKeyDown"
        >
    <Window.Style>
        <Style TargetType="Window">
            <Setter Property="Width" Value="620" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsDNAClusterPlacementEnabled}" Value="False">
                    <Setter Property="Width" Value="510"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Style>
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.SidebarGridDictionaryUri}" />
                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoColorsAndBrushesDictionaryUri}" />
                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoConvertersDictionaryUri}" />
                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoModernDictionaryUri}" />
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="SearchMemberStyle"
                   BasedOn="{StaticResource MemberGroupMemberStyle}"
                   TargetType="{x:Type ListBoxItem}">
            </Style>

            <Style TargetType="{x:Type ScrollViewer}"
                   BasedOn="{StaticResource LibraryScrollViewerStyle}">
                <Setter Property="Template"
                        Value="{StaticResource LibraryScrollViewerControlTemplate}" />
            </Style>
            <Style x:Key="RectangleStyle" TargetType="Rectangle">
                <Setter Property="Opacity" Value="0" />
            </Style>
            <dynconverters:BoolToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <dynconverters:InverseBoolToVisibilityConverter  x:Key="InverseBooleanToVisibilityConverter"/>
            <dynconverters:LengthToVisibilityConverter  x:Key="LengthToVisibilityConverter"/>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <Border Margin="0"
                BorderBrush="{StaticResource DarkGreyBrush}"
                BorderThickness="1"
                CornerRadius="7,7,7,7"
                Panel.ZIndex="1"
                IsHitTestVisible="False" />

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="45" />
            </Grid.RowDefinitions>

            <Grid Name="Header"
                  Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource LibraryCommonBackground}"
                        CornerRadius="8,8,8,8">
                </Border>
            </Grid>
            <Grid Name="HorizontalContainerGrid"
                  Background="Transparent"
                  Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button
                    x:Name="gripHandle"
                    PreviewMouseLeftButtonDown="GripHandle_MouseLeftButtonDown"
                    Grid.Column="0"
                >
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Border x:Name="DotsBackgroundBorder"
                                                    Background="Transparent"
                                                    CornerRadius="8,0,0,8" />
                                            <Image x:Name="DotsImage"
                                                   Source="/DynamoCoreWpf;component/UI/Images/gripper-default.png"
                                                   Margin="5"
                                                   Width="20px"
                                                   Height="20px"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Stretch="UniformToFill" />
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="{StaticResource DarkGreyBrush}" />
                                                <Setter TargetName="DotsImage"
                                                        Property="Source"
                                                        Value="/DynamoCoreWpf;component/UI/Images/gripper-hover.png" />
                                            </Trigger>
                                            <Trigger Property="IsMouseOver"
                                                     Value="False">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="Transparent" />
                                                <Setter TargetName="DotsImage"
                                                        Property="Source"
                                                        Value="/DynamoCoreWpf;component/UI/Images/gripper-default.png" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <Image
                    x:Name="imageAI"
                    Grid.Column="1"
                    Source="/DynamoCoreWpf;component/UI/Images/NodeStates/transient-64px.png"
                    Width="24px"
                    Height="24px"
                    Margin="5"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Stretch="UniformToFill" />
                <Border BorderThickness="1"
                        CornerRadius="5"
                        Padding="0"
                        Margin="8,0,0,0"
                        Grid.Column="2">
                    <Grid>
                        <ComboBox
                            x:Name="AutocompleteCombobox"
                            SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                            Width="240"
                            FontFamily="{StaticResource ArtifaktElementRegular}"
                            Foreground="{StaticResource DefaultSearchTextBlockText}"
                            ItemsSource="{Binding FilteredView, NotifyOnTargetUpdated=True}"
                            IsDropDownOpen="{Binding IsDropDownOpen, Mode=TwoWay}"
                            Visibility="{Binding ResultsLoaded, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource BooleanToVisibilityConverter}}"
                            TabIndex="0"
                        >
                            <ComboBox.Style>
                                <Style BasedOn="{StaticResource PackageManagerSmallComboBox}" TargetType="ComboBox">
                                </Style>
                            </ComboBox.Style>
                            <ComboBox.Tag>
                                <Grid>
                                    <TextBox x:Name="AutoCompleteSearchBox"                                            
                                        HorizontalAlignment="Stretch"
                                        Height="28"
                                        Margin="7,3,7,3"
                                        Padding="2"                                                 
                                        Width="Auto"
                                        BorderThickness="0,0,0,1"
                                        Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ComboBox}}"
                                        Background="{Binding Background, RelativeSource={RelativeSource AncestorType=ComboBox}}"
                                        FontFamily="{Binding FontFamily, RelativeSource={RelativeSource AncestorType=ComboBox}}"
                                        CaretBrush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ComboBox}}"
                                        FontSize="14">
                                        <TextBox.Text>
                                            <Binding Path="SearchInput" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged" />
                                        </TextBox.Text>
                                    </TextBox>

                                    <StackPanel x:Name="PlaceholderPanel"
                                        Orientation="Horizontal"
                                        VerticalAlignment="Center"
                                        IsHitTestVisible="False"
                                        HorizontalAlignment="Stretch"
                                        Height="28"
                                        Margin="12,3,7,3"
                                        Width="Auto"
                                        Visibility="{Binding Text.Length, ElementName=AutoCompleteSearchBox, Converter={StaticResource LengthToVisibilityConverter}}">
                                        <Image x:Name="SearchIcon"
                                            Width="20px"
                                            Height="20px"                                            
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"
                                            DockPanel.Dock="Left">
                                            <Image.Style>
                                                <Style TargetType="{x:Type Image}">
                                                    <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/searchmagnifier.png" />
                                                </Style>
                                            </Image.Style>
                                        </Image>
                                        <TextBlock Padding="2" FontSize="14" Text="{x:Static resxother:Resources.LibraryViewSearchText}" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ComboBox}}" VerticalAlignment="Center"/>
                                    </StackPanel>
                                </Grid>
                            </ComboBox.Tag>
                            <ComboBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" Margin="0" Height="34" VerticalAlignment="Center">
                                        <Image
                                               Width="32"
                                               Height="32"
                                               Margin="2,0,6,0">
                                            <Image.Style>
                                                <Style TargetType="Image">
                                                    <Setter Property="Source" Value="{Binding SmallIcon}" />
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding SmallIcon}" Value="{x:Null}">
                                                            <Setter Property="Source" 
                                                            Value="/DynamoCoreWpf;component/UI/Images/cluster_32px.png" />
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Image.Style>
                                        </Image>
                                        <TextBlock FontSize="12" Height="15">
                                            <Run Text="{Binding Description, Mode=OneWay}"
                                                 Foreground="White" />
                                            <Run Text="{Binding Parameters, Mode=OneWay}"
                                                 Foreground="#abafb3" />
                                        </TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                        <Rectangle Height="5" Style="{StaticResource RectangleStyle}" />
                        <local:LoadingAnimationStripeControl
                            x:Name="AutocompleteComboboxLoading"
                            Grid.Column="0"
                            VerticalAlignment="Center"
                            Width="240"
                            Height="30"
                            AnimationSpeed="5"
                            Visibility="{Binding ResultsLoaded, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource InverseBooleanToVisibilityConverter}}" 
                        />
                    </Grid>
                </Border>
                <Button x:Name="btnPrev"
                        Click="PrevButton_OnClick"
                        Grid.Column="3"
                        TabIndex="1">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Border x:Name="DotsBackgroundBorder"
                                                    Background="Transparent"
                                                    CornerRadius="2"
                                                    Width="36"/>
                                            <Image x:Name="PrevImage"
                                                   Width="12px"
                                                   Height="12px"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Stretch="UniformToFill" >
                                                <Image.Style>
                                                    <Style TargetType="Image">
                                                        <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/caret-left-disabled.png"/>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding HasPrevious}" Value="True">
                                                                <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/caret-left-default.png"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="{StaticResource DarkGreyBrush}" />
                                            </Trigger>
                                            <Trigger Property="IsMouseOver"
                                                     Value="False">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="Transparent" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <StackPanel MinWidth="50"
                            Grid.Column="4"
                            VerticalAlignment="Center">
                    <TextBlock
                        HorizontalAlignment="Center"
                        Width="Auto"
                        x:Name="TextBlock_NthofTotal"
                        Foreground="{StaticResource AutocompletionWindowFontColor}"
                        Text="{Binding NthofTotal}"
                        />
                </StackPanel>
                <Button x:Name="btnNext"
                        Click="NextButton_OnClick"
                        Grid.Column="5"
                        TabIndex="2">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Border x:Name="DotsBackgroundBorder"
                                                    Background="Transparent"
                                                    CornerRadius="2"
                                                    Width="36"/>
                                            <Image x:Name="NextImage"
                                                   Width="12px"
                                                   Height="12px"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Stretch="UniformToFill" >
                                                <Image.Style>
                                                    <Style TargetType="Image">
                                                        <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/caret-right-disabled.png"/>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding HasNext}" Value="True">
                                                                <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/caret-right-default.png"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="{StaticResource DarkGreyBrush}" />
                                            </Trigger>
                                            <Trigger Property="IsMouseOver"
                                                     Value="False">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="Transparent" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <Button x:Name="btnCheck"
                        Click="ConfirmAutoCompleteWindow"
                        Grid.Column="6"
                        TabIndex="3">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Border x:Name="DotsBackgroundBorder"
                                                    Background="Transparent"
                                                    CornerRadius="2" 
                                                    Width="36"/>
                                            <Image x:Name="DotsImage"
                                                   Width="20px"
                                                   Height="20px"
                                                   Margin="3"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Stretch="UniformToFill" >
                                                <Image.Style>
                                                    <Style TargetType="Image">
                                                        <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/check-disabled.png"/>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding ResultsLoaded}" Value="True">
                                                                <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/check.png"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="{StaticResource DarkGreyBrush}" />
                                            </Trigger>
                                            <Trigger Property="IsMouseOver"
                                                     Value="False">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="Transparent" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <Button x:Name="btnClose"
                        Click="CloseAutoCompleteWindow"
                        Grid.Column="7"
                        TabIndex="4">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid>
                                            <Border x:Name="DotsBackgroundBorder"
                                                    Background="Transparent"
                                                    CornerRadius="2"
                                                    Width="36"/>
                                            <Image x:Name="DotsImage"
                                                   Source="/DynamoCoreWpf;component/UI/Images/whiteclosetab.png"
                                                   Width="20px"
                                                   Height="20px"
                                                   Margin="3"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   Stretch="UniformToFill" />
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                     Value="True">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="{StaticResource DarkGreyBrush}" />
                                            </Trigger>
                                            <Trigger Property="IsMouseOver"
                                                     Value="False">
                                                <Setter TargetName="DotsBackgroundBorder"
                                                        Property="Background"
                                                        Value="Transparent" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <Grid Grid.Column="8" Visibility="{Binding IsDNAClusterPlacementEnabled, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Collapse}">
                    <ToggleButton x:Name="SwitchButton" Width="100" Height="36" FocusVisualStyle="{x:Null}"
                      HorizontalAlignment="Center" VerticalAlignment="Center"
                      Background="{StaticResource DarkGreyBrush}" BorderBrush="DarkGray" BorderThickness="2"
                      IsChecked="{Binding IsSingleAutocomplete, Mode=TwoWay}"
                      IsEnabled="{Binding SwitchIsEnabled}" TabIndex="5">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <Grid Width="100" Height="32">
                                    <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2" CornerRadius="16">
                                        <Grid>
                                            <Border x:Name="SwitchKnob" Background="{StaticResource NodeTransientOverlayColor}"
                                                    BorderThickness="2" CornerRadius="16" Width="70" HorizontalAlignment="Left">
                                                <TextBlock x:Name="KnobText" Text="Cluster" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter TargetName="SwitchKnob" Property="HorizontalAlignment" Value="Right"/>
                                        <Setter TargetName="KnobText" Property="Text" Value="Single"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="SwitchKnob" Property="Background" Value="{StaticResource LightGreyBrush}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Window>