Hosts UI (#27268)

* Hosts UI

title bar, string, sizes

* titlebar text color

* adress feedback

* adress feedback

* add window icon and title

* solve InfoBar problem

src/modules/Hosts/Hosts/MainWindow.xaml

@@ -17,22 +17,30 @@
     </Window.SystemBackdrop>
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="32" />
+            <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <Grid x:Name="titleBar">
+        <Grid x:Name="titleBar" Height="32" ColumnSpacing="16">
-            <StackPanel
+            <Grid.ColumnDefinitions>
-                Margin="16,8,8,8"
+                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
-                VerticalAlignment="Top"
+                <ColumnDefinition x:Name="IconColumn" Width="Auto"/>
-                Orientation="Horizontal">
+                <ColumnDefinition x:Name="TitleColumn" Width="Auto"/>
-                <Image Source="Assets/AppList.png" />
+                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
-                <TextBlock
+            </Grid.ColumnDefinitions>
-                    Margin="12,0,0,0"
+            <Image
-                    FontSize="12"
+                Grid.Column="1"
-                    Style="{StaticResource CaptionTextBlockStyle}"
+                Source="../Assets/Hosts.ico"
-                    Text="Hosts File Editor" />
+                VerticalAlignment="Center"
-            </StackPanel>
+                Width="16"
+                Height="16"/>
+            <TextBlock
+                x:Name="AppTitleTextBlock"
+                Grid.Column="2"
+                Style="{StaticResource CaptionTextBlockStyle}"
+                VerticalAlignment="Center"
+                Text="Hosts File Editor" />
         </Grid>
+        
         <views:MainPage Grid.Row="1" />
     </Grid>
 </winuiex:WindowEx>

src/modules/Hosts/Hosts/MainWindow.xaml.cs

@@ -2,7 +2,10 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
 using Hosts.Helpers;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
 using WinUIEx;
 
 namespace Hosts
@@ -13,15 +16,26 @@ namespace Hosts
         {
             InitializeComponent();
 
-            SetTitleBar();
-
-            BringToForeground();
-        }
-
-        private void SetTitleBar()
-        {
             ExtendsContentIntoTitleBar = true;
             SetTitleBar(titleBar);
+            AppWindow.SetIcon("Assets/Hosts.ico");
+            Title = Windows.ApplicationModel.Resources.ResourceLoader.GetForViewIndependentUse().GetString("WindowTitle");
+
+            BringToForeground();
+
+            Activated += MainWindow_Activated;
+        }
+
+        private void MainWindow_Activated(object sender, WindowActivatedEventArgs args)
+        {
+            if (args.WindowActivationState == WindowActivationState.Deactivated)
+            {
+                AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
+            }
+            else
+            {
+                AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            }
         }
 
         private void BringToForeground()

src/modules/Hosts/Hosts/Strings/en-us/Resources.resw

@@ -133,7 +133,7 @@
     <value>New entry</value>
   </data>
   <data name="AddEntryBtn.[using:Microsoft.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
-    <value>New entry (CTRL+N)</value>
+    <value>New entry (Ctrl+N)</value>
   </data>
   <data name="AddEntryLink.Content" xml:space="preserve">
     <value>Add an entry</value>
@@ -213,7 +213,7 @@
     <value>Cancel</value>
   </data>
   <data name="FileChanged.Message" xml:space="preserve">
-    <value>Hosts file has changed by another application. Do you want to reload it?</value>
+    <value>Hosts file was modified externally.</value>
     <comment>"Hosts" refers to the system hosts file, do not loc</comment>
   </data>
   <data name="FileSaveError.Message" xml:space="preserve">
@@ -273,16 +273,13 @@
     <value>Show only duplicates</value>
   </data>
   <data name="TooManyHostsTeachingTip.Subtitle" xml:space="preserve">
-    <value>Only 9 hosts per entry are supported</value>
+    <value>Only 9 hosts per entry are supported. The affected entries have been split. This will take effect on next change.</value>
     <comment>"Hosts" refers to the system hosts file, do not loc</comment>
   </data>
   <data name="TooManyHostsTeachingTip.Title" xml:space="preserve">
-    <value>Entries with too many hosts found</value>
+    <value>Entries contain too many hosts</value>
     <comment>"Hosts" refers to the system hosts file, do not loc</comment>
   </data>
-  <data name="TooManyHostsTeachingTipContent.Text" xml:space="preserve">
-    <value>The affected entries have been splitted. This will take effect on next change.</value>
-  </data>
   <data name="UpdateBtn" xml:space="preserve">
     <value>Update</value>
   </data>
@@ -302,7 +299,7 @@
   <data name="WarningDialog_Title" xml:space="preserve">
     <value>Warning</value>
   </data>
-  <data name="Window.Title" xml:space="preserve">
+  <data name="WindowTitle" xml:space="preserve">
     <value>Hosts File Editor</value>
     <comment>"Hosts File Editor" is the name of the utility. "Hosts" refers to the system hosts file, do not loc</comment>
   </data>

src/modules/Hosts/Hosts/Views/MainPage.xaml

@@ -37,25 +37,23 @@
             TrueValue="Collapsed" />
     </Page.Resources>
 
-    <Grid>
+    <Grid
+        Margin="16"
+        RowSpacing="8">
         <Grid.RowDefinitions>
-            <RowDefinition Height="64" />
+            <RowDefinition Height="Auto" /><!-- buttons -->
-            <RowDefinition Height="*" />
+            <RowDefinition Height="*" /><!-- content -->
-            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <Grid>
+        <Grid><!-- buttons -->
             <Button
                 x:Uid="AddEntryBtn"
-                Height="36"
-                Margin="18,0,0,0"
                 Command="{x:Bind NewDialogCommand}">
                 <StackPanel
                     Orientation="Horizontal"
                     Spacing="8">
                     <FontIcon
                         x:Name="Icon"
-                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                         FontSize="16"
                         Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                         Glyph="&#xe710;" />
@@ -69,26 +67,24 @@
             </Button>
 
             <StackPanel
-                Padding="0,0,18,0"
                 HorizontalAlignment="Right"
-                Orientation="Horizontal">
+                Orientation="Horizontal"
+                Spacing="4">
                 <Button
                     x:Uid="AdditionalLinesBtn"
-                    Height="36"
+                    Height="32"
                     Command="{x:Bind AdditionalLinesDialogCommand}"
                     Style="{StaticResource SubtleButtonStyle}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="16"
                         Glyph="&#xe8a5;" />
                 </Button>
 
                 <Button
                     x:Uid="FilterBtn"
-                    Height="36"
+                    Height="32"
                     Style="{StaticResource SubtleButtonStyle}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="16"
                         Glyph="&#xe71c;" />
                     <Button.Flyout>
@@ -133,10 +129,10 @@
                                     IsOn="{x:Bind ViewModel.ShowOnlyDuplicates, Mode=TwoWay}" />
                                 <Button
                                     x:Uid="ClearFiltersBtn"
-                                    Margin="0,6,0,0"
                                     HorizontalAlignment="Right"
                                     Command="{x:Bind ViewModel.ClearFiltersCommand}"
-                                    Style="{StaticResource AccentButtonStyle}" />
+                                    Style="{StaticResource AccentButtonStyle}"
+                                    IsEnabled="{x:Bind ViewModel.Filtered, Mode=OneWay}"/>
                             </StackPanel>
                         </Flyout>
                     </Button.Flyout>
@@ -144,50 +140,26 @@
 
                 <Button
                     x:Uid="OpenHostsFileBtn"
-                    Height="36"
+                    Height="32"
                     Command="{x:Bind ViewModel.OpenHostsFileCommand}"
                     Style="{StaticResource SubtleButtonStyle}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="16"
                         Glyph="&#xe8a7;" />
                 </Button>
 
                 <Button
                     x:Uid="SettingsBtn"
-                    Height="36"
+                    Height="32"
                     Command="{x:Bind ViewModel.OpenSettingsCommand}"
                     Style="{StaticResource SubtleButtonStyle}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="16"
                         Glyph="&#xe713;" />
                 </Button>
             </StackPanel>
         </Grid>
 
-        <StackPanel
-            Grid.Row="2"
-            Orientation="Vertical"
-            Visibility="Visible">
-            <InfoBar
-                x:Uid="FileSaveError"
-                CornerRadius="0"
-                IsOpen="{x:Bind ViewModel.Error, Mode=TwoWay}"
-                Severity="Error" />
-
-            <InfoBar
-                x:Uid="FileChanged"
-                IsOpen="{x:Bind ViewModel.FileChanged, Mode=TwoWay}"
-                Severity="Informational">
-                <InfoBar.ActionButton>
-                    <Button
-                        x:Uid="Reload"
-                        Command="{x:Bind ViewModel.ReadHostsCommand}" />
-                </InfoBar.ActionButton>
-            </InfoBar>
-        </StackPanel>
-
         <!--
             https://github.com/microsoft/microsoft-ui-xaml/issues/7690
             AllowDrop="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
@@ -196,36 +168,39 @@
         -->
         <Grid
             Grid.Row="1"
-            Visibility="{x:Bind ViewModel.IsLoading, Converter={StaticResource BoolToInvertedVisibilityConverter}, Mode=OneWay}">          
+            Visibility="{x:Bind ViewModel.IsLoading, Converter={StaticResource BoolToInvertedVisibilityConverter}, Mode=OneWay}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+
             <ListView
                 x:Name="Entries"
                 x:Uid="Entries"
-                Grid.Row="1"
-                Margin="16,8,16,16"
                 Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
-                CornerRadius="8"
+                CornerRadius="{StaticResource OverlayCornerRadius}"
                 IsItemClickEnabled="True"
                 ItemClick="Entries_ItemClick"
                 KeyDown="Entries_KeyDown"
                 GotFocus="Entries_GotFocus"
                 ItemsSource="{x:Bind ViewModel.Entries, Mode=TwoWay}"
-                SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}"
+                SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}">
-                Visibility="{x:Bind ViewModel.IsLoading, Converter={StaticResource BoolToInvertedVisibilityConverter}, Mode=OneWay}">
                 <ListView.ItemTemplate>
                     <DataTemplate x:DataType="models:Entry">
                         <Grid
                             AutomationProperties.Name="{x:Bind Address, Mode=OneWay}"
                             Background="Transparent"
                             IsRightTapEnabled="True"
-                            RightTapped="Grid_RightTapped">
+                            RightTapped="Grid_RightTapped"
+                            ColumnSpacing="8">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="300" />
+                                <ColumnDefinition Width="256"/><!--address-->
-                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="*"/><!--comment-->
-                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto"/><!--status-->
-                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto"/><!--duplicate-->
-                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto"/><!--toggleswitch-->
                             </Grid.ColumnDefinitions>
                             <FlyoutBase.AttachedFlyout>
                                 <MenuFlyout Opened="MenuFlyout_Opened">
@@ -270,7 +245,7 @@
                                         x:Uid="Delete"
                                         Click="Delete_Click"
                                         Icon="Delete">
-                                         <MenuFlyoutItem.KeyboardAccelerators>
+                                        <MenuFlyoutItem.KeyboardAccelerators>
                                             <KeyboardAccelerator Key="Delete" />
                                         </MenuFlyoutItem.KeyboardAccelerators>
                                     </MenuFlyoutItem>
@@ -292,15 +267,12 @@
                                 Grid.Column="2"
                                 Width="20"
                                 Height="20"
-                                Margin="0,0,8,0"
                                 IsActive="{x:Bind Pinging, Mode=OneWay}" />
                             <FontIcon
                                 x:Uid="PingIcon"
                                 x:Name="PingIcon"
                                 Grid.Column="2"
-                                Margin="0,0,8,0"
+                                FontSize="16"
-                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                FontSize="18"
                                 Visibility="Collapsed">
                                 <i:Interaction.Behaviors>
                                     <ic:DataTriggerBehavior
@@ -351,10 +323,8 @@
                             <FontIcon
                                 x:Uid="DuplicateEntryIcon"
                                 Grid.Column="3"
-                                Margin="0,0,8,0"
                                 Foreground="{StaticResource SystemControlErrorTextForegroundBrush}"
-                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                FontSize="16"
-                                FontSize="18"
                                 Glyph="&#xe7BA;"
                                 Visibility="{x:Bind Duplicate, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                             <ToggleSwitch
@@ -370,7 +340,7 @@
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
-            
+
             <StackPanel
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
@@ -381,7 +351,6 @@
                     Spacing="8"
                     Visibility="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="32"
                         Glyph="&#xe774;" />
                     <TextBlock
@@ -394,14 +363,13 @@
                         HorizontalAlignment="Center"
                         Command="{x:Bind NewDialogCommand}" />
                 </StackPanel>
-                
+
                 <StackPanel
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Spacing="8"
                     Visibility="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
                     <FontIcon
-                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                         FontSize="32"
                         Glyph="&#xf78b;" />
                     <TextBlock
@@ -415,14 +383,37 @@
                         Command="{x:Bind ViewModel.ClearFiltersCommand}" />
                 </StackPanel>
             </StackPanel>
+
+            <StackPanel
+                Grid.Row="1">
+                <InfoBar
+                    x:Uid="FileSaveError"
+                    Margin="0,8,0,0"
+                    Severity="Error"
+                    IsOpen="{x:Bind ViewModel.Error, Mode=TwoWay}"
+                    Visibility="{x:Bind ViewModel.Error, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}" />
+
+                <InfoBar
+                    x:Uid="FileChanged"
+                    Margin="0,8,0,0"
+                    Severity="Informational"
+                    IsOpen="{x:Bind ViewModel.FileChanged, Mode=TwoWay}"
+                    Visibility="{x:Bind ViewModel.FileChanged, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
+                    <InfoBar.ActionButton>
+                        <Button
+                            x:Uid="Reload"
+                            Command="{x:Bind ViewModel.ReadHostsCommand}" />
+                    </InfoBar.ActionButton>
+                </InfoBar>
+            </StackPanel>
         </Grid>
-        
+
         <ProgressRing
             Width="48"
             Height="48"
             Grid.Row="1"
             IsActive="{x:Bind ViewModel.IsLoading, Mode=OneWay}" />
-        
+
         <ContentDialog
             x:Name="EntryDialog"
             x:Uid="EntryDialog"
@@ -431,14 +422,11 @@
             <ContentDialog.DataContext>
                 <models:Entry />
             </ContentDialog.DataContext>
-            <ScrollViewer
+            <ScrollViewer>
-                HorizontalScrollBarVisibility="Auto"
-                HorizontalScrollMode="Auto">
                 <StackPanel
-                    Width="480"
+                    MinWidth="320"
-                    Margin="0,12,0,0"
                     HorizontalAlignment="Stretch"
-                    Spacing="24">
+                    Spacing="12">
                     <TextBox
                         x:Uid="Address"
                         IsSpellCheckEnabled="False"
@@ -448,7 +436,6 @@
                         IsSpellCheckEnabled="False"
                         AcceptsReturn="False"
                         TextWrapping="Wrap"
-                        Height="100"
                         ScrollViewer.IsVerticalRailEnabled="True"
                         ScrollViewer.VerticalScrollBarVisibility="Visible"
                         ScrollViewer.VerticalScrollMode="Enabled"
@@ -458,7 +445,6 @@
                         IsSpellCheckEnabled="False" 
                         AcceptsReturn="False"
                         TextWrapping="Wrap"
-                        Height="100"
                         ScrollViewer.IsVerticalRailEnabled="True"
                         ScrollViewer.VerticalScrollBarVisibility="Visible"
                         ScrollViewer.VerticalScrollMode="Enabled"
@@ -488,17 +474,16 @@
 
             <TextBox
                 x:Name="AdditionalLines"
-                Height="300"
-                MinWidth="480"
-                Margin="0,12,0,0"
                 HorizontalAlignment="Stretch"
+                MinHeight="40"
+                Padding="16,0"
                 AcceptsReturn="True"
                 ScrollViewer.IsVerticalRailEnabled="True"
                 ScrollViewer.VerticalScrollBarVisibility="Visible"
                 ScrollViewer.VerticalScrollMode="Enabled"
                 TextWrapping="Wrap" />
         </ContentDialog>
-        
+
         <TeachingTip
             x:Uid="TooManyHostsTeachingTip"
             IsOpen="{x:Bind ViewModel.ShowSplittedEntriesTooltip, Mode=OneWay}"
@@ -509,8 +494,7 @@
             </TeachingTip.IconSource>
             <TeachingTip.Content>
                 <TextBlock x:Uid="TooManyHostsTeachingTipContent"
-                           TextWrapping="Wrap"
+                           TextWrapping="Wrap"/>
-                           Margin="0,16,0,0" />
             </TeachingTip.Content>
         </TeachingTip>
     </Grid>