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

<Page
    x:Class="Hosts.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:Hosts.Helpers"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
    xmlns:local="using:Hosts.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Hosts.Models"
    x:Name="Page"
    Loaded="Page_Loaded"
    mc:Ignorable="d">
    <i:Interaction.Behaviors>
        <ic:EventTriggerBehavior EventName="Loaded">
            <ic:InvokeCommandAction Command="{x:Bind ViewModel.ReadHostsCommand}" />
        </ic:EventTriggerBehavior>
    </i:Interaction.Behaviors>

    <Page.Resources>
        <converters:StringVisibilityConverter
            x:Key="StringVisibilityConverter"
            EmptyValue="Collapsed"
            NotEmptyValue="Visible" />
        <converters:BoolNegationConverter x:Key="BoolNegationConverter" />
        <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
        <converters:BoolToVisibilityConverter
            x:Key="BoolToInvertedVisibilityConverter"
            TrueValue="Collapsed"
            FalseValue="Visible" />
        <converters:DoubleToVisibilityConverter
            x:Key="DoubleToVisibilityConverter"
            FalseValue="Visible"
            GreaterThan="0"
            TrueValue="Collapsed" />
    </Page.Resources>

    <Grid
        Margin="16"
        RowSpacing="8">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" /><!-- buttons -->
            <RowDefinition Height="*" /><!-- content -->
        </Grid.RowDefinitions>

        <Grid><!-- buttons -->
            <Button
                x:Uid="AddEntryBtn"
                Command="{x:Bind NewDialogCommand}">
                <StackPanel
                    Orientation="Horizontal"
                    Spacing="8">
                    <FontIcon
                        x:Name="Icon"
                        FontSize="16"
                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                        Glyph="&#xe710;" />
                    <TextBlock x:Uid="AddEntry" />
                </StackPanel>
                <Button.KeyboardAccelerators>
                    <KeyboardAccelerator
                        Modifiers="Control"
                        Key="N" />
                </Button.KeyboardAccelerators>
            </Button>

            <StackPanel
                HorizontalAlignment="Right"
                Orientation="Horizontal"
                Spacing="4">
                <Button
                    x:Uid="AdditionalLinesBtn"
                    Height="32"
                    Command="{x:Bind AdditionalLinesDialogCommand}"
                    Style="{StaticResource SubtleButtonStyle}">
                    <FontIcon
                        FontSize="16"
                        Glyph="&#xe8a5;" />
                </Button>

                <Button
                    x:Uid="FilterBtn"
                    Height="32"
                    Style="{StaticResource SubtleButtonStyle}">
                    <FontIcon
                        FontSize="16"
                        Glyph="&#xe71c;" />
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel
                                Width="320"
                                HorizontalAlignment="Stretch"
                                Spacing="12">
                                <AutoSuggestBox
                                    x:Uid="AddressFilter"
                                    PlaceholderText=""
                                    QueryIcon="Find"
                                    Text="{x:Bind ViewModel.AddressFilter, Mode=TwoWay}">
                                    <i:Interaction.Behaviors>
                                        <ic:EventTriggerBehavior EventName="TextChanged">
                                            <ic:InvokeCommandAction Command="{x:Bind ViewModel.ApplyFiltersCommand}" />
                                        </ic:EventTriggerBehavior>
                                    </i:Interaction.Behaviors>
                                </AutoSuggestBox>
                                <AutoSuggestBox
                                    x:Uid="HostsFilter"
                                    QueryIcon="Find"
                                    Text="{x:Bind ViewModel.HostsFilter, Mode=TwoWay}">
                                    <i:Interaction.Behaviors>
                                        <ic:EventTriggerBehavior EventName="TextChanged">
                                            <ic:InvokeCommandAction Command="{x:Bind ViewModel.ApplyFiltersCommand}" />
                                        </ic:EventTriggerBehavior>
                                    </i:Interaction.Behaviors>
                                </AutoSuggestBox>
                                <AutoSuggestBox
                                    x:Uid="CommentFilter"
                                    QueryIcon="Find"
                                    Text="{x:Bind ViewModel.CommentFilter, Mode=TwoWay}">
                                    <i:Interaction.Behaviors>
                                        <ic:EventTriggerBehavior EventName="TextChanged">
                                            <ic:InvokeCommandAction Command="{x:Bind ViewModel.ApplyFiltersCommand}" />
                                        </ic:EventTriggerBehavior>
                                    </i:Interaction.Behaviors>
                                </AutoSuggestBox>
                                <ToggleSwitch
                                    x:Uid="ShowOnlyDuplicates"
                                    IsOn="{x:Bind ViewModel.ShowOnlyDuplicates, Mode=TwoWay}" />
                                <Button
                                    x:Uid="ClearFiltersBtn"
                                    HorizontalAlignment="Right"
                                    Command="{x:Bind ViewModel.ClearFiltersCommand}"
                                    Style="{StaticResource AccentButtonStyle}"
                                    IsEnabled="{x:Bind ViewModel.Filtered, Mode=OneWay}"/>
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>

                <Button
                    x:Uid="OpenHostsFileBtn"
                    Height="32"
                    Command="{x:Bind ViewModel.OpenHostsFileCommand}"
                    Style="{StaticResource SubtleButtonStyle}">
                    <FontIcon
                        FontSize="16"
                        Glyph="&#xe8a7;" />
                </Button>

                <Button
                    x:Uid="SettingsBtn"
                    Height="32"
                    Command="{x:Bind ViewModel.OpenSettingsCommand}"
                    Style="{StaticResource SubtleButtonStyle}">
                    <FontIcon
                        FontSize="16"
                        Glyph="&#xe713;" />
                </Button>
            </StackPanel>
        </Grid>

        <!--
            https://github.com/microsoft/microsoft-ui-xaml/issues/7690
            AllowDrop="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
            CanDragItems="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
            CanReorderItems="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
        -->
        <Grid
            Grid.Row="1"
            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"
                Background="{ThemeResource LayerFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                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}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:Entry">
                        <Grid
                            AutomationProperties.Name="{x:Bind Address, Mode=OneWay}"
                            Background="Transparent"
                            IsRightTapEnabled="True"
                            RightTapped="Grid_RightTapped"
                            ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="256"/><!--address-->
                                <ColumnDefinition Width="*"/><!--comment-->
                                <ColumnDefinition Width="Auto"/><!--status-->
                                <ColumnDefinition Width="Auto"/><!--duplicate-->
                                <ColumnDefinition Width="Auto"/><!--toggleswitch-->
                            </Grid.ColumnDefinitions>
                            <FlyoutBase.AttachedFlyout>
                                <MenuFlyout Opened="MenuFlyout_Opened">
                                    <MenuFlyoutItem
                                        x:Uid="Edit"
                                        Click="Edit_Click"
                                        Icon="Edit">
                                        <MenuFlyoutItem.KeyboardAccelerators>
                                            <KeyboardAccelerator
                                                Modifiers="Control"
                                                Key="E" />
                                        </MenuFlyoutItem.KeyboardAccelerators>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem
                                        x:Uid="Ping"
                                        Click="Ping_Click"
                                        Icon="TwoBars">
                                        <MenuFlyoutItem.KeyboardAccelerators>
                                            <KeyboardAccelerator
                                                Modifiers="Control"
                                                Key="P" />
                                        </MenuFlyoutItem.KeyboardAccelerators>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem
                                        x:Uid="MoveUp"
                                        Click="ReorderButtonUp_Click"
                                        IsEnabled="{Binding DataContext.Filtered, ElementName=Page, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE74A;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem
                                        x:Uid="MoveDown"
                                        Click="ReorderButtonDown_Click"
                                        IsEnabled="{Binding DataContext.Filtered, ElementName=Page, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE74B;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem
                                        x:Uid="Delete"
                                        Click="Delete_Click"
                                        Icon="Delete">
                                        <MenuFlyoutItem.KeyboardAccelerators>
                                            <KeyboardAccelerator Key="Delete" />
                                        </MenuFlyoutItem.KeyboardAccelerators>
                                    </MenuFlyoutItem>
                                </MenuFlyout>
                            </FlyoutBase.AttachedFlyout>
                            <TextBlock
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                Text="{x:Bind Address, Mode=OneWay}"
                                TextWrapping="Wrap" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="{x:Bind helpers:StringHelper.GetHostsWithComment(Hosts, Comment), Mode=OneWay}"
                                TextWrapping="WrapWholeWords" />
                            <ProgressRing
                                Grid.Column="2"
                                Width="20"
                                Height="20"
                                IsActive="{x:Bind Pinging, Mode=OneWay}" />
                            <FontIcon
                                x:Uid="PingIcon"
                                x:Name="PingIcon"
                                Grid.Column="2"
                                FontSize="16"
                                Visibility="Collapsed">
                                <i:Interaction.Behaviors>
                                    <ic:DataTriggerBehavior
                                        Binding="{x:Bind Ping, Mode=OneWay}"
                                        ComparisonCondition="Equal"
                                        Value="True">
                                        <ic:ChangePropertyAction
                                            PropertyName="Glyph"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="&#xe8fb;" />
                                        <ic:ChangePropertyAction
                                            PropertyName="Visibility"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="Visible" />
                                        <ic:ChangePropertyAction
                                            PropertyName="Foreground"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="{StaticResource SystemFillColorSuccessBrush}" />
                                    </ic:DataTriggerBehavior>
                                    <ic:DataTriggerBehavior
                                        Binding="{x:Bind Ping, Mode=OneWay}"
                                        ComparisonCondition="Equal"
                                        Value="False">
                                        <ic:ChangePropertyAction
                                            PropertyName="Glyph"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="&#xe894;" />
                                        <ic:ChangePropertyAction
                                            PropertyName="Visibility"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="Visible" />
                                        <ic:ChangePropertyAction
                                            PropertyName="Foreground"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="{StaticResource SystemFillColorCriticalBrush}" />
                                    </ic:DataTriggerBehavior>
                                    <ic:DataTriggerBehavior
                                        Binding="{x:Bind Ping, Mode=OneWay}"
                                        ComparisonCondition="Equal"
                                        Value="{x:Null}">
                                        <ic:ChangePropertyAction
                                            PropertyName="Visibility"
                                            TargetObject="{Binding ElementName=PingIcon}"
                                            Value="Collapsed" />
                                    </ic:DataTriggerBehavior>
                                </i:Interaction.Behaviors>
                            </FontIcon>
                            <FontIcon
                                x:Uid="DuplicateEntryIcon"
                                Grid.Column="3"
                                Foreground="{StaticResource SystemControlErrorTextForegroundBrush}"
                                FontSize="16"
                                Glyph="&#xe7BA;"
                                Visibility="{x:Bind Duplicate, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                            <ToggleSwitch
                                x:Uid="ActiveToggle"
                                Grid.Column="4"
                                Width="40"
                                MinWidth="0"
                                HorizontalAlignment="Right"
                                IsOn="{x:Bind Active, Mode=TwoWay}"
                                OffContent=""
                                OnContent="" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <StackPanel
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Visibility="{x:Bind ViewModel.Entries.Count, Mode=OneWay, Converter={StaticResource DoubleToVisibilityConverter}}">
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Spacing="8"
                    Visibility="{x:Bind ViewModel.Filtered, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
                    <FontIcon
                        FontSize="32"
                        Glyph="&#xe774;" />
                    <TextBlock
                        x:Uid="EmptyHosts"
                        HorizontalAlignment="Center"
                        TextWrapping="Wrap"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    <HyperlinkButton
                        x:Uid="AddEntryLink"
                        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
                        FontSize="32"
                        Glyph="&#xf78b;" />
                    <TextBlock
                        x:Uid="EmptyFilterResults"
                        HorizontalAlignment="Center"
                        TextWrapping="Wrap"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    <HyperlinkButton
                        x:Uid="ClearFiltersLink"
                        HorizontalAlignment="Center"
                        Command="{x:Bind ViewModel.ClearFiltersCommand}" />
                </StackPanel>
            </StackPanel>

            <StackPanel
                Grid.Row="1">
                <InfoBar
                    x:Uid="FileSaveError"
                    Margin="0,8,0,0"
                    Severity="Error"
                    Message="{x:Bind ViewModel.ErrorMessage, Mode=TwoWay}"
                    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"
            IsPrimaryButtonEnabled="{Binding Valid, Mode=OneWay}"
            PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
            <ContentDialog.DataContext>
                <models:Entry />
            </ContentDialog.DataContext>
            <ScrollViewer>
                <StackPanel
                    MinWidth="320"
                    HorizontalAlignment="Stretch"
                    Spacing="12">
                    <TextBox
                        x:Uid="Address"
                        IsSpellCheckEnabled="False"
                        Text="{Binding Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                    <TextBox
                        x:Uid="Hosts"
                        IsSpellCheckEnabled="False"
                        AcceptsReturn="False"
                        TextWrapping="Wrap"
                        ScrollViewer.IsVerticalRailEnabled="True"
                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                        ScrollViewer.VerticalScrollMode="Enabled"
                        Text="{Binding Hosts, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                    <TextBox
                        x:Uid="Comment"
                        IsSpellCheckEnabled="False" 
                        AcceptsReturn="False"
                        TextWrapping="Wrap"
                        ScrollViewer.IsVerticalRailEnabled="True"
                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                        ScrollViewer.VerticalScrollMode="Enabled"
                        Text="{Binding Comment, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                    <ToggleSwitch
                        x:Uid="Active"
                        IsOn="{Binding Active, Mode=TwoWay}"
                        OffContent=""
                        OnContent="" />
                </StackPanel>
            </ScrollViewer>
        </ContentDialog>

        <ContentDialog
            x:Name="DeleteDialog"
            x:Uid="DeleteDialog"
            PrimaryButtonCommand="{x:Bind DeleteCommand}"
            PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
            <TextBlock x:Uid="DeleteDialogAreYouSure" />
        </ContentDialog>

        <ContentDialog
            x:Name="AdditionalLinesDialog"
            x:Uid="AdditionalLinesDialog"
            PrimaryButtonCommand="{x:Bind UpdateAdditionalLinesCommand}"
            PrimaryButtonStyle="{StaticResource AccentButtonStyle}">

            <TextBox
                x:Name="AdditionalLines"
                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}"
	        PreferredPlacement="Top"
	        PlacementMargin="20">
            <TeachingTip.IconSource>
                <FontIconSource Glyph="&#xe946;" />
            </TeachingTip.IconSource>
            <TeachingTip.Content>
                <TextBlock x:Uid="TooManyHostsTeachingTipContent"
                           TextWrapping="Wrap"/>
            </TeachingTip.Content>
        </TeachingTip>
    </Grid>
</Page>