Implementing the top panel according to the new UI design.

src/NuGet.Clients/PackageManagement.UI/PackageLoader.cs

@@ -446,15 +446,16 @@ private async Task<SearchResult> SearchUpdatesAsync(int startIndex, Cancellation
             };
         }
 
-        // Creates the list of installed packages that have updates available
-        private async Task CreatePackagesWithUpdatesAsync(CancellationToken ct)
+        // Creates the list of installed packages that have updates available.
+        // Returns the number of packages that have updates available.
+        public async Task<int> CreatePackagesWithUpdatesAsync(CancellationToken ct)
         {
             _packagesWithUpdates = new List<UISearchMetadata>();
             var metadataResource = await _sourceRepository.GetResourceAsync<UIMetadataResource>();
 
             if (metadataResource == null)
             {
-                return;
+                return 0;
             }
 
             var installedPackages = (await GetInstalledPackagesAsync(latest: false, token: ct))
@@ -487,6 +488,8 @@ private async Task CreatePackagesWithUpdatesAsync(CancellationToken ct)
                     }
                 }
             }
+
+            return _packagesWithUpdates.Count;
         }
 
         public async Task<LoadResult> LoadItemsAsync(int startIndex, CancellationToken cancellationToken)

src/NuGet.Clients/PackageManagement.UI/PackageManagement.UI.csproj

@@ -157,6 +157,9 @@
     <Compile Include="Xamls\FileConflictDialog.xaml.cs">
       <DependentUpon>FileConflictDialog.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Xamls\FilterLabel.xaml.cs">
+      <DependentUpon>FilterLabel.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Xamls\InstalledIndicator.xaml.cs">
       <DependentUpon>InstalledIndicator.xaml</DependentUpon>
     </Compile>
@@ -174,6 +177,9 @@
       <DependentUpon>PackageManagerControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Converters\PackageStatusToInstallImageConverter.cs" />
+    <Compile Include="Xamls\PackageManagerTopPanel.xaml.cs">
+      <DependentUpon>PackageManagerTopPanel.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Xamls\PackageMetadataControl.xaml.cs">
       <DependentUpon>PackageMetadataControl.xaml</DependentUpon>
     </Compile>
@@ -218,6 +224,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Xamls\FilterLabel.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Xamls\InstalledIndicator.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -238,6 +248,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Xamls\PackageManagerTopPanel.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Xamls\PackageMetadataControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/NuGet.Clients/PackageManagement.UI/Resources.resx

@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <root>
-  <!--
-    Microsoft ResX Schema
-
+  <!-- 
+    Microsoft ResX Schema 
+    
     Version 2.0
-
-    The primary goals of this format is to allow a simple XML format
-    that is mostly human readable. The generation and parsing of the
-    various data types are done through the TypeConverter classes
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
     associated with the data types.
-
+    
     Example:
-
+    
     ... ado.net/XML headers & schema ...
     <resheader name="resmimetype">text/microsoft-resx</resheader>
     <resheader name="version">2.0</resheader>
@@ -26,36 +26,36 @@
         <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
         <comment>This is a comment</comment>
     </data>
-
-    There are any number of "resheader" rows that contain simple
+                
+    There are any number of "resheader" rows that contain simple 
     name/value pairs.
-
-    Each data row contains a name, and value. The row also contains a
-    type or mimetype. Type corresponds to a .NET class that support
-    text/value conversion through the TypeConverter architecture.
-    Classes that don't support this are serialized and stored with the
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
     mimetype set.
-
-    The mimetype is used for serialized objects, and tells the
-    ResXResourceReader how to depersist the object. This is currently not
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
     extensible. For a given mimetype the value must be set accordingly:
-
-    Note - application/x-microsoft.net.object.binary.base64 is the format
-    that the ResXResourceWriter will generate, however the reader can
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
     read any of the formats listed below.
-
+    
     mimetype: application/x-microsoft.net.object.binary.base64
-    value   : The object must be serialized with
+    value   : The object must be serialized with 
             : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
             : and then encoded with base64 encoding.
-
+    
     mimetype: application/x-microsoft.net.object.soap.base64
-    value   : The object must be serialized with
+    value   : The object must be serialized with 
             : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
             : and then encoded with base64 encoding.
 
     mimetype: application/x-microsoft.net.object.bytearray.base64
-    value   : The object must be serialized into a byte array
+    value   : The object must be serialized into a byte array 
             : using a System.ComponentModel.TypeConverter
             : and then encoded with base64 encoding.
     -->
@@ -243,10 +243,10 @@
   <data name="WindowTitle_Preview" xml:space="preserve">
     <value>Preview</value>
   </data>
-  <data name="Filter_All" xml:space="preserve">
-    <value>All</value>
+  <data name="Label_Browse" xml:space="preserve">
+    <value>Browse</value>
   </data>
-  <data name="Filter_Installed" xml:space="preserve">
+  <data name="Label_Installed" xml:space="preserve">
     <value>Installed</value>
   </data>
   <data name="Label_NuGetWindowCaption" xml:space="preserve">
@@ -297,8 +297,8 @@
   <data name="Checkbox_IncludePrerelease" xml:space="preserve">
     <value>Include prerelease</value>
   </data>
-  <data name="Filter_UpgradeAvailable" xml:space="preserve">
-    <value>Upgrade available</value>
+  <data name="Label_Updates" xml:space="preserve">
+    <value>Updates</value>
   </data>
   <data name="Version_Installed" xml:space="preserve">
     <value>Installed</value>

src/NuGet.Clients/PackageManagement.UI/Resources/Brushes.cs

@@ -76,6 +76,7 @@ public static void Initialize()
                 // when the keys are used in an xaml file.
                 ContentBrushKey = SystemColors.WindowBrush;
                 BackgroundBrushKey = SystemColors.WindowBrush;
+                ContentSelectedBrushKey = SystemColors.ActiveCaptionBrushKey;
             }
             else
             {

src/NuGet.Clients/PackageManagement.UI/Xamls/FilterLabel.xaml

@@ -0,0 +1,76 @@
+<UserControl x:Class="NuGet.PackageManagement.UI.FilterLabel"
+             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"
+             x:Name="_self"
+             xmlns:local="clr-namespace:NuGet.PackageManagement.UI"
+             mc:Ignorable="d"
+             d:DesignHeight="100" d:DesignWidth="300">
+  <UserControl.Resources>
+    <ResourceDictionary>
+      <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary
+          Source="Resources.xaml" />
+      </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+  </UserControl.Resources>
+  <Grid>
+    <Grid.RowDefinitions>
+      <RowDefinition Height="auto" />
+      <RowDefinition Height="auto" />
+    </Grid.RowDefinitions>
+    <Grid.ColumnDefinitions>
+      <ColumnDefinition />
+      <ColumnDefinition />
+    </Grid.ColumnDefinitions>
+    <Button
+      Grid.Row="0"
+      Grid.Column="0"
+      Click="ButtonClicked">
+      <Button.Template>
+        <ControlTemplate TargetType="{x:Type Button}">
+          <ContentPresenter />
+        </ControlTemplate>
+      </Button.Template>
+      <TextBlock
+        x:Name="_labelText"
+        Padding="0"
+        Margin="0"
+        MouseEnter="_labelText_MouseEnter"
+        MouseLeave="_labelText_MouseLeave"
+        FontSize="{Binding ElementName=_self,Path=FontSize,Converter={StaticResource Font122PercentSizeConverter}}"
+        Foreground="{DynamicResource {x:Static local:Brushes.UIText}}" />
+    </Button>
+
+    <!-- the texblock that displays the count -->
+    <Border
+      x:Name="_textBlockCountContainer"
+      Grid.Row="0"
+      Grid.Column="1"
+      CornerRadius="2"
+      Margin="2,0"
+      Padding="1,0"
+      Visibility="Collapsed"
+      HorizontalAlignment="Center"
+      VerticalAlignment="Top"
+      Background="{DynamicResource {x:Static local:Brushes.ContentSelectedBrushKey}}">
+      <TextBlock
+        x:Name="_textBlockCount"
+        Foreground="White"
+        HorizontalAlignment="Right"
+        VerticalAlignment="Top">
+      </TextBlock>
+    </Border>
+
+    <!-- the line under the text to indicate that this label is selected -->
+    <Rectangle
+      x:Name="_underline"
+      Grid.Row="1"
+      Grid.Column="0"
+      Margin="0"
+      Height="3"
+      Fill="{DynamicResource {x:Static local:Brushes.ContentSelectedBrushKey}}"
+      Visibility="Hidden" />
+  </Grid>
+</UserControl>