PowerToys/src/modules/Projects/ProjectsEditor/MainPage.xaml

<Page
    x:Class="ProjectsEditor.MainPage"
    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" 
    xmlns:props="clr-namespace:ProjectsEditor.Properties"
    xmlns:converters="clr-namespace:ProjectsEditor.Converters"
    xmlns:local="clr-namespace:ProjectsEditor"
    mc:Ignorable="d" 
    d:DesignHeight="450" d:DesignWidth="800"
    Title="MainPage">
    <Page.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVis" />
        <converters:BooleanToInvertedVisibilityConverter x:Key="BooleanToInvertedVisibilityConverter" />
        <Thickness x:Key="ContentDialogPadding">24,16,0,24</Thickness>
        <Thickness x:Key="ContentDialogCommandSpaceMargin">0,24,24,0</Thickness>
        <Style x:Key="DeleteButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{DynamicResource TertiaryBackgroundBrush}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="Transparent" Padding="26,6,26,6">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="{DynamicResource TitleBarSecondaryForegroundBrush}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Background" Value="{DynamicResource TitleBarSecondaryForegroundBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <local:HeadingTextBlock
            x:Name="ProjectsHeaderBlock"
            AutomationProperties.HeadingLevel="Level1"
            FontSize="24"
            FontWeight="SemiBold"
            Text="{x:Static props:Resources.Projects}"
            Foreground="{DynamicResource PrimaryForegroundBrush}"
            Grid.Row="0"
            Margin="40,20,40,20"/>

        <Button
            x:Name="NewProjectButton"
            Height="36"
            Padding="0"
            Grid.Row="0"
            Margin="0,20,40,20"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            AutomationProperties.Name="{x:Static props:Resources.CreateProject}"
            Click="NewProjectButton_Click"
            Style="{StaticResource AccentButtonStyle}"
            TabIndex="3">
            <StackPanel Margin="12, 8, 12, 8" Orientation="Horizontal">
                <TextBlock
                    AutomationProperties.Name="{x:Static props:Resources.CreateProject}"
                    FontFamily="{DynamicResource SymbolThemeFontFamily}"
                    Foreground="{DynamicResource AccentButtonForeground}"
                    Text="&#xE710;" />
                <TextBlock
                    Margin="12,-3,0,0"
                    Foreground="{DynamicResource AccentButtonForeground}"
                    Text="{x:Static props:Resources.CreateProject}" />
            </StackPanel>
            <Button.Effect>
                <DropShadowEffect
                    BlurRadius="6"
                    Opacity="0.32"
                    ShadowDepth="1" />
            </Button.Effect>
        </Button>

        <Border
            HorizontalAlignment="Left"
            Grid.Row="1"
            Margin="40,0,0,0"
            BorderThickness="2"
            VerticalAlignment="Center"
            CornerRadius="5">
            <StackPanel
                Orientation="Horizontal">
                <Grid>
                    <TextBox
                        x:Name="SearchTextBox"
                        Width="320"
                        Text="{Binding SearchTerm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        Background="{DynamicResource SecondaryBackgroundBrush}"
                        BorderBrush="{DynamicResource PrimaryBorderBrush}"
                        ToolTip="{x:Static props:Resources.SearchExplanation}"
                        />
                    <TextBlock
                        IsHitTestVisible="False"
                        Text="{x:Static props:Resources.Search}"
                        VerticalAlignment="Center"
                        Foreground="{DynamicResource SecondaryForegroundBrush}"
                        ToolTip="{x:Static props:Resources.SearchExplanation}"
                        Margin="10,0,0,0">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Text, ElementName=SearchTextBox}" Value="">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </Grid>
                <TextBlock
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Margin="-50,0,34,0"
                    AutomationProperties.Name="{x:Static props:Resources.Search}"
                    FontFamily="{DynamicResource SymbolThemeFontFamily}"
                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                    Text="&#xE71E;" />
            </StackPanel>
        </Border>

        <StackPanel
            Grid.Row="1"
            HorizontalAlignment="Right"
            Orientation="Horizontal"
            Margin="0,0,40,0">
            <TextBlock
                VerticalAlignment="Center"
                Margin="10,0,10,0"
                Text="{x:Static props:Resources.SortBy}"
                Foreground="{DynamicResource PrimaryForegroundBrush}"
                />
            <ComboBox
                Width="140"
                Background="{DynamicResource SecondaryBackgroundBrush}"
                BorderBrush="{DynamicResource PrimaryBorderBrush}"
                SelectedIndex="{Binding OrderByIndex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <ComboBoxItem Content="{x:Static props:Resources.LastLaunched}" />
                <ComboBoxItem Content="{x:Static props:Resources.Created}" />
                <ComboBoxItem Content="{x:Static props:Resources.Name}" />
            </ComboBox>
        </StackPanel>
        <TextBlock
            Grid.Row="2"
            Text="{Binding EmptyProjectsViewMessage, UpdateSourceTrigger=PropertyChanged}"
            FontSize="20"
            Foreground="{DynamicResource PrimaryForegroundBrush}"
            Margin="40,40,40,40"
            Visibility="{Binding IsProjectsViewEmpty, Mode=OneWay, Converter={StaticResource BoolToVis}, UpdateSourceTrigger=PropertyChanged}"/>
        <ScrollViewer
            VerticalContentAlignment="Stretch"
            VerticalScrollBarVisibility="Auto"
            Grid.Row="2"
            Margin="40,15,40,40"
            Visibility="{Binding IsProjectsViewEmpty, Mode=OneWay, Converter={StaticResource BooleanToInvertedVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}">
            <ItemsControl ItemsSource="{Binding ProjectsView, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel
                            IsItemsHost="True"
                            Orientation="Vertical"
                            HorizontalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="models:Project">
                        <Button
                            x:Name="EditButton"
                            AutomationProperties.Name="{x:Static props:Resources.Edit}"
                            Margin="0,12,0,0"
                            Click="EditButtonClicked"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="{DynamicResource SecondaryBackgroundBrush}"
                            Padding="1">
                            <Border Background="{DynamicResource SecondaryBackgroundBrush}"
                                    HorizontalAlignment="Stretch"
                                    CornerRadius="5">
                                <Grid HorizontalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="110" />
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="12,14,10,10">
                                        <TextBlock
                                            Text="{Binding Name, Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"
                                            FontSize="16"
                                            Margin="0,0,0,8"
                                            FontWeight="SemiBold"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"/>
                                        <StackPanel
                                            Orientation="Horizontal"
                                            VerticalAlignment="Center"
                                            Margin="0,0,0,8" >
                                            <Image
                                                Source="{Binding PreviewImage, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                                                Height="20" />
                                            <TextBlock
                                                Text="{Binding AppsCountString}"
                                                Margin="6,0,4,0"
                                                VerticalAlignment="Center"/>
                                        </StackPanel>
                                        <StackPanel
                                            Orientation="Horizontal"
                                            VerticalAlignment="Center">
                                            <TextBlock
                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                Text="&#xE81C;"
                                                Margin="0,3,10,0"/>
                                            <TextBlock Text="{Binding LastLaunched, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
                                        </StackPanel>
                                    </StackPanel>
                                    <StackPanel Orientation="Vertical" Grid.Column="1" Margin="12,12,12,12">
                                        <StackPanel
                                            Orientation="Horizontal"
                                            HorizontalAlignment="Right">
                                            <Button
                                                x:Name="MoreButton"
                                                HorizontalAlignment="Right"
                                                Style="{StaticResource IconOnlyButtonStyle}"
                                                Click="MoreButton_Click">
                                                <TextBlock
                                                    FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                    Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                    Text="&#xE712;"/>
                                            </Button>
                                            <Popup
                                                IsOpen="{Binding IsPopupVisible, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                                                StaysOpen="False"
                                                PlacementTarget="{Binding ElementName=MoreButton}"
                                                Placement="Left">
                                                <StackPanel 
                                                    Background="{DynamicResource PrimaryBackgroundBrush}"
                                                    Orientation="Vertical">
                                                    <Button
                                                        Style="{StaticResource DeleteButtonStyle}"
                                                        Margin="5"
                                                        AutomationProperties.Name="{x:Static props:Resources.Edit}"
                                                        Click="EditButtonClicked">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock
                                                                AutomationProperties.Name="{x:Static props:Resources.Edit}"
                                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                                Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                                Text="&#xE70F;" />
                                                            <TextBlock
                                                                Margin="10,0,0,0"
                                                                AutomationProperties.Name="{x:Static props:Resources.Edit}"
                                                                Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                                Text="{x:Static props:Resources.Edit}" />
                                                        </StackPanel>
                                                    </Button>
                                                    <Button
                                                        Style="{StaticResource DeleteButtonStyle}"
                                                        Margin="5"
                                                        AutomationProperties.Name="{x:Static props:Resources.Delete}"
                                                        Click="DeleteButtonClicked">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock
                                                                AutomationProperties.Name="{x:Static props:Resources.Delete}"
                                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                                Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                                Text="&#xE74D;" />
                                                            <TextBlock
                                                                Margin="10,0,0,0"
                                                                AutomationProperties.Name="{x:Static props:Resources.Delete}"
                                                                Foreground="{DynamicResource PrimaryForegroundBrush}"
                                                                Text="{x:Static props:Resources.Delete}" />
                                                        </StackPanel>
                                                    </Button>
                                                </StackPanel>
                                            </Popup>
                                        </StackPanel>
                                        <Button
                                            Padding="20,4,20,4"
                                            Margin="0,6,0,0"
                                            AutomationProperties.Name="{x:Static props:Resources.Launch}"
                                            Content="{x:Static props:Resources.Launch}"
                                            HorizontalAlignment="Right"
                                            Background="{DynamicResource TertiaryBackgroundBrush}"
                                            BorderBrush="{DynamicResource SecondaryBorderBrush}"
                                            BorderThickness="1"
                                            Click="LaunchButton_Click"/>
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Page>