change the scrollbar style.

WinAlfred/ResultItem.xaml

@@ -5,6 +5,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              mc:Ignorable="d" 
              d:DesignWidth="400"
+             x:Name="resultItemControl"
              Style="{DynamicResource ItemStyle}"
              Height="50">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" >

WinAlfred/ResultPanel.xaml

@@ -1,13 +1,11 @@
 <UserControl x:Class="WinAlfred.ResultPanel"
              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" 
-             mc:Ignorable="d" 
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             mc:Ignorable="d"
              d:DesignHeight="300" d:DesignWidth="300">
-    <ScrollViewer x:Name="sv" MaxHeight="300" VerticalScrollBarVisibility="Auto">
-        <StackPanel x:Name="pnlContainer">
-
-        </StackPanel>
+    <ScrollViewer x:Name="sv" Template="{DynamicResource ScrollViewerControlTemplate}" MaxHeight="300" VerticalScrollBarVisibility="Auto">
+        <StackPanel x:Name="pnlContainer"/>
     </ScrollViewer>
-</UserControl>
+</UserControl>

WinAlfred/Themes/Default.xaml

@@ -1,43 +1,117 @@
-<ResourceDictionary  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=mscorlib">
     <Style x:Key="QueryBoxStyle" TargetType="{x:Type TextBox}">
-        <Setter Property="BorderThickness" Value="0"/>
-        <Setter Property="FontSize" Value="22"/>
-        <Setter Property="FontWeight" Value="Medium"/>
-        <Setter Property="AllowDrop" Value="true"/>
-        <Setter Property="Height" Value="46"/>
-        <Setter Property="Background" Value="#616161"/>
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="FontSize" Value="25" />
+        <Setter Property="FontWeight" Value="Medium" />
+        <Setter Property="AllowDrop" Value="true" />
+        <Setter Property="Height" Value="46" />
+        <Setter Property="Background" Value="#616161" />
         <Setter Property="Foreground" Value="#E3E0E3" />
-        <Setter Property="VerticalContentAlignment" Value="Center"/>
-        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
     </Style>
-    <Style x:Key="WindowStyle" TargetType="{x:Type Window}" >
-        <Setter Property="Height" Value="80"></Setter>
-        <Setter Property="Width" Value="500"></Setter>
-        <Setter Property="Background" Value="#424242"></Setter>
+    <Style x:Key="WindowStyle" TargetType="{x:Type Window}">
+        <Setter Property="Height" Value="80" />
+        <Setter Property="Width" Value="500" />
+        <Setter Property="Background" Value="#424242" />
     </Style>
-    <Style x:Key="GridStyle" TargetType="{x:Type Grid}" >
-        <Setter Property="Margin" Value="8 10 8 8"></Setter>
+    <Style x:Key="GridStyle" TargetType="{x:Type Grid}">
+        <Setter Property="Margin" Value="8 10 8 8" />
     </Style>
-    <Style x:Key="PendingLineStyle" TargetType="{x:Type Line}" >
-        <Setter Property="Stroke" Value="Blue"></Setter>
+    <Style x:Key="PendingLineStyle" TargetType="{x:Type Line}">
+        <Setter Property="Stroke" Value="Blue" />
     </Style>
 
     <!-- Item Style -->
-    <Style x:Key="ItemTitleStyle" TargetType="{x:Type TextBlock}" >
-        <Setter Property="Foreground" Value="#FFFFF8"></Setter>
-        <Setter Property="FontSize" Value="16"></Setter>
-        <Setter Property="FontWeight" Value="Medium"></Setter>
+    <Style x:Key="ItemTitleStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#FFFFF8" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="FontWeight" Value="Medium" />
     </Style>
-    <Style x:Key="ItemSubTitleStyle" TargetType="{x:Type TextBlock}" >
-        <Setter Property="Foreground"  Value="#D9D9D4"></Setter>
+    <Style x:Key="ItemSubTitleStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="Foreground" Value="#D9D9D4" />
     </Style>
-    <Style x:Key="ItemStyle" TargetType="{x:Type UserControl}" >
-        <Setter Property="Background" Value="Transparent"></Setter>
+    <Style x:Key="ItemStyle" TargetType="{x:Type UserControl}">
+        <Setter Property="Background" Value="Transparent" />
         <Style.Triggers>
             <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Selected}" Value="true">
-                <Setter Property="Background" Value="#4F6180"></Setter>
+                <Setter Property="Background" Value="#4F6180" />
             </DataTrigger>
         </Style.Triggers>
     </Style>
-</ResourceDictionary>
+
+    <!-- ScrollViewer Style -->
+    <ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
+        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <!--content in the left of ScrollViewer, just default-->
+            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
+                                        CanContentScroll="{TemplateBinding CanContentScroll}"
+                                        CanHorizontallyScroll="False"
+                                        CanVerticallyScroll="False"
+                                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                                        Content="{TemplateBinding Content}"
+                                        Grid.Column="0"
+                                        Margin="{TemplateBinding Padding}"
+                                        Grid.Row="0" />
+
+            <!--Scrollbar in thr rigth of ScrollViewer-->
+            <ScrollBar x:Name="PART_VerticalScrollBar"
+                           AutomationProperties.AutomationId="VerticalScrollBar"
+                           Cursor="Arrow"
+                           Grid.Column="1"
+                           Margin="3 0 0 0"
+                           Maximum="{TemplateBinding ScrollableHeight}"
+                           Minimum="0"
+                           Grid.Row="0"
+                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
+                           Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
+                           ViewportSize="{TemplateBinding ViewportHeight}"
+                           Style="{DynamicResource ScrollBarStyle}" />
+
+        </Grid>
+    </ControlTemplate>
+
+    <!-- button style in the middle of the scrollbar -->
+    <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
+        <Setter Property="SnapsToDevicePixels" Value="True"/>
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="IsTabStop" Value="false"/>
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Border CornerRadius="2" DockPanel.Dock="Right" Background="#616161" BorderBrush="Transparent" BorderThickness="0" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
+        <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
+        <!-- must set min width -->
+        <Setter Property="MinWidth" Value="0"/>
+        <Setter Property="Width" Value="5"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ScrollBar}">
+                    <DockPanel>
+                        <Track x:Name="PART_Track" IsDirectionReversed="true" DockPanel.Dock="Right">
+                            <Track.Thumb>
+                                <Thumb Style="{DynamicResource ThumbStyle}"/>
+                            </Track.Thumb>
+                        </Track>
+                    </DockPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+
+    </Style>
+</ResourceDictionary>

WinAlfred/Themes/Light.xaml

@@ -2,17 +2,17 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Style x:Key="QueryBoxStyle" TargetType="{x:Type TextBox}">
         <Setter Property="BorderThickness" Value="0"/>
-        <Setter Property="FontSize" Value="22"/>
+        <Setter Property="FontSize" Value="25"/>
         <Setter Property="FontWeight" Value="Medium"/>
         <Setter Property="AllowDrop" Value="true"/>
         <Setter Property="Height" Value="46"/>
-        <Setter Property="Background" Value="#D1D1D1"/>
-        <Setter Property="Foreground" Value="#000000" />
+        <Setter Property="Background" Value="#DEDEDE"/>
+        <Setter Property="Foreground" Value="#2E2F30" />
         <Setter Property="VerticalContentAlignment" Value="Center"/>
         <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
     </Style>
     <Style x:Key="WindowStyle" TargetType="{x:Type Window}" >
-        <Setter Property="Background" Value="#EBEBEB"></Setter>
+        <Setter Property="Background" Value="#EDEDED"></Setter>
         <Setter Property="Width" Value="520"></Setter>
         <Setter Property="Height" Value="80"></Setter>
     </Style>
@@ -25,19 +25,102 @@
 
     <!-- Item Style -->
     <Style x:Key="ItemTitleStyle" TargetType="{x:Type TextBlock}" >
-        <Setter Property="Foreground" Value="#1A191A"></Setter>
+        <Setter Property="Foreground" Value="#141411"></Setter>
         <Setter Property="FontSize" Value="16"></Setter>
         <Setter Property="FontWeight" Value="Medium"></Setter>
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding ElementName=resultItemControl, Path=Selected}" Value="true">
+                <Setter Property="Foreground" Value="#F6F6FF"></Setter>
+            </DataTrigger>
+        </Style.Triggers>
     </Style>
     <Style x:Key="ItemSubTitleStyle" TargetType="{x:Type TextBlock}" >
-        <Setter Property="Foreground"  Value="#807F80"></Setter>
+        <Setter Property="Foreground"  Value="#B3B2B0"></Setter>
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding ElementName=resultItemControl, Path=Selected}" Value="true">
+                <Setter Property="Foreground" Value="#F6F6FF"></Setter>
+            </DataTrigger>
+        </Style.Triggers>
     </Style>
     <Style x:Key="ItemStyle" TargetType="{x:Type UserControl}" >
         <Setter Property="Background" Value="Transparent"></Setter>
         <Style.Triggers>
             <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Selected}" Value="true">
-                <Setter Property="Background" Value="#D1D1D1"></Setter>
+                <Setter Property="Background" Value="#543BFD"></Setter>
             </DataTrigger>
         </Style.Triggers>
     </Style>
+
+    <!-- ScrollViewer Style -->
+    <ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
+        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <!--content in the left of ScrollViewer, just default-->
+            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
+                                        CanContentScroll="{TemplateBinding CanContentScroll}"
+                                        CanHorizontallyScroll="False"
+                                        CanVerticallyScroll="False"
+                                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                                        Content="{TemplateBinding Content}"
+                                        Grid.Column="0"
+                                        Margin="{TemplateBinding Padding}"
+                                        Grid.Row="0" />
+
+            <!--Scrollbar in thr rigth of ScrollViewer-->
+            <ScrollBar x:Name="PART_VerticalScrollBar"
+                           AutomationProperties.AutomationId="VerticalScrollBar"
+                           Cursor="Arrow"
+                           Grid.Column="1"
+                           Margin="2 0 0 0"
+                           Maximum="{TemplateBinding ScrollableHeight}"
+                           Minimum="0"
+                           Grid.Row="0"
+                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
+                           Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
+                           ViewportSize="{TemplateBinding ViewportHeight}"
+                           Style="{DynamicResource ScrollBarStyle}" />
+
+        </Grid>
+    </ControlTemplate>
+
+    <!-- button style in the middle of the scrollbar -->
+    <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
+        <Setter Property="SnapsToDevicePixels" Value="True"/>
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="IsTabStop" Value="false"/>
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Border CornerRadius="2" DockPanel.Dock="Right" Background="#DEDEDE" BorderBrush="Transparent" BorderThickness="0" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
+        <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
+        <!-- must set min width -->
+        <Setter Property="MinWidth" Value="0"/>
+        <Setter Property="Width" Value="3.5"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ScrollBar}">
+                    <DockPanel>
+                        <Track x:Name="PART_Track" IsDirectionReversed="true" DockPanel.Dock="Right">
+                            <Track.Thumb>
+                                <Thumb Style="{DynamicResource ThumbStyle}"/>
+                            </Track.Thumb>
+                        </Track>
+                    </DockPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+
+    </Style>
 </ResourceDictionary>