NanaZip/NanaZip.Modern/AddressBarTemplate.xaml

<ResourceDictionary
  x:Class="NanaZip.Modern.AddressBarTemplate"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:NanaZip.Modern">

  <Thickness x:Key="AddressBarImageIconMargin">8,4,0,4</Thickness>

  <DataTemplate x:Key="DefaultAddressBarItemTemplate" x:DataType="local:AddressBarItem">
    <StackPanel
      Margin="{x:Bind Padding}"
      Orientation="Horizontal"
      Spacing="4">
      <Image
        Width="16"
        Height="16"
        VerticalAlignment="Center"
        Source="{x:Bind Icon}" />
      <TextBlock VerticalAlignment="Center" Text="{x:Bind Text}" />
    </StackPanel>
  </DataTemplate>

  <Style x:Key="DefaultAddressBarTextBoxStyle" TargetType="TextBox">
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
    <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
    <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
    <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
    <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
    <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
    <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
    <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
    <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
    <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="TextBox">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="24" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>
            <ContentPresenter
              x:Name="HeaderContentPresenter"
              Grid.Row="0"
              Grid.Column="0"
              Grid.ColumnSpan="2"
              Margin="{ThemeResource TextBoxTopHeaderMargin}"
              VerticalAlignment="Top"
              x:DeferLoadStrategy="Lazy"
              Content="{TemplateBinding Header}"
              ContentTemplate="{TemplateBinding HeaderTemplate}"
              FontWeight="Normal"
              Foreground="{ThemeResource TextControlHeaderForeground}"
              TextWrapping="Wrap"
              Visibility="Collapsed" />
            <Border
              x:Name="BorderElement"
              Grid.Row="1"
              Grid.RowSpan="1"
              Grid.Column="0"
              Grid.ColumnSpan="3"
              MinWidth="{TemplateBinding MinWidth}"
              MinHeight="{TemplateBinding MinHeight}"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              Control.IsTemplateFocusTarget="True"
              CornerRadius="{TemplateBinding CornerRadius}" />
            <ScrollViewer
              x:Name="ContentElement"
              Grid.Row="1"
              Grid.Column="1"
              Margin="{TemplateBinding BorderThickness}"
              Padding="{TemplateBinding Padding}"
              AutomationProperties.AccessibilityView="Raw"
              Foreground="{TemplateBinding Foreground}"
              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
              IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
              IsTabStop="False"
              IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
              ZoomMode="Disabled" />
            <TextBlock
              x:Name="PlaceholderTextContentPresenter"
              Grid.Row="1"
              Grid.Column="1"
              Grid.ColumnSpan="2"
              Margin="{TemplateBinding BorderThickness}"
              Padding="{TemplateBinding Padding}"
              Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
              IsHitTestVisible="False"
              Text="{TemplateBinding PlaceholderText}"
              TextAlignment="{TemplateBinding TextAlignment}"
              TextWrapping="{TemplateBinding TextWrapping}" />
            <ContentPresenter
              x:Name="DescriptionPresenter"
              Grid.Row="2"
              Grid.Column="0"
              Grid.ColumnSpan="3"
              x:Load="False"
              AutomationProperties.AccessibilityView="Raw"
              Content="{TemplateBinding Description}"
              Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Focused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="DefaultAddressBarStyle" TargetType="local:AddressBar">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:AddressBar">
          <Grid>
            <Grid.Resources>
              <Style x:Name="DropDownButtonStyle" TargetType="Button">
                <Setter Property="Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="Button">
                      <Grid
                        x:Name="ButtonLayoutGrid"
                        Margin="{ThemeResource TextBoxInnerButtonMargin}"
                        Background="{ThemeResource TextControlButtonBackground}"
                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{ThemeResource ControlCornerRadius}">
                        <TextBlock
                          x:Name="GlyphElement"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          AutomationProperties.AccessibilityView="Raw"
                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                          FontSize="{ThemeResource TextBoxIconFontSize}"
                          FontStyle="Normal"
                          Foreground="{ThemeResource TextControlButtonForeground}"
                          Text="&#xE70D;" />
                        <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                              <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                              </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                              <Storyboard>
                                <DoubleAnimation
                                  Storyboard.TargetName="ButtonLayoutGrid"
                                  Storyboard.TargetProperty="Opacity"
                                  To="0"
                                  Duration="0" />
                              </Storyboard>
                            </VisualState>
                          </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                      </Grid>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="24" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>
            <Button
              x:Name="UpButton"
              Width="32"
              Height="32"
              Margin="0,0,4,0"
              Padding="0"
              Content="&#xE74A;"
              FontFamily="{StaticResource SymbolThemeFontFamily}"
              FontSize="12"
              IsEnabled="{TemplateBinding IsUpButtonEnabled}" />
            <RelativePanel Grid.Column="1" Grid.ColumnSpan="3">
              <TextBox
                x:Name="TextBoxElement"
                RelativePanel.AlignLeftWithPanel="True"
                RelativePanel.AlignRightWithPanel="True"
                Style="{StaticResource DefaultAddressBarTextBoxStyle}"
                Text="{x:Bind Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
              <Popup
                x:Name="SuggestionsPopup"
                AllowFocusOnInteraction="False"
                IsLightDismissEnabled="True"
                ShouldConstrainToRootBounds="False">
                <Popup.ChildTransitions>
                  <PopupThemeTransition />
                </Popup.ChildTransitions>

                <!--
                  MaxHeight set here to prevent the suggestions
                  from overflowing the screen. 400 is ~10 elements.
                -->
                <ListView
                  x:Name="SuggestionsList"
                  MaxHeight="400"
                  Background="{ThemeResource FlyoutPresenterBackground}"
                  BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
                  BorderThickness="{StaticResource FlyoutBorderThemeThickness}"
                  CornerRadius="{StaticResource OverlayCornerRadius}"
                  IsItemClickEnabled="True"
                  ItemTemplate="{StaticResource DefaultAddressBarItemTemplate}"
                  ItemsSource="{x:Bind ItemsSource, Mode=OneWay}"
                  Translation="0,0,32">
                  <ListView.Shadow>
                    <ThemeShadow />
                  </ListView.Shadow>
                </ListView>
              </Popup>
            </RelativePanel>
            <Image
              x:Name="IconElement"
              Grid.Column="1"
              Width="16"
              Height="16"
              Margin="{StaticResource AddressBarImageIconMargin}"
              Source="{x:Bind IconSource, Mode=OneWay}" />
            <Button
              x:Name="DropDownButton"
              Grid.Column="3"
              Width="30"
              Padding="{ThemeResource HelperButtonThemePadding}"
              VerticalAlignment="Stretch"
              AutomationProperties.AccessibilityView="Raw"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              FontSize="{TemplateBinding FontSize}"
              IsTabStop="False"
              Style="{StaticResource DropDownButtonStyle}"
              Visibility="Visible" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style BasedOn="{StaticResource DefaultAddressBarStyle}" TargetType="local:AddressBar" />

</ResourceDictionary>