Avalonia/samples/ControlCatalog/Pages/NavigationPage/AvaloniaFlixSearchView.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.AvaloniaFlixSearchView"
             Background="#0A0A0A">
  <DockPanel>

    <!-- Top bar: search field, mic, close -->
    <Grid DockPanel.Dock="Top"
          ColumnDefinitions="*,Auto,Auto"
          Margin="16,12,12,8">
      <!-- Search Bar -->
      <Border CornerRadius="4" Background="#222222" Padding="12,8"
              VerticalAlignment="Center">
        <Grid ColumnDefinitions="Auto,*">
          <PathIcon Grid.Column="0" Width="15" Height="15" Foreground="#888888"
                    VerticalAlignment="Center" Margin="0,0,8,0"
                    Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
          <TextBlock Grid.Column="1" Text="Search AvaloniaFlix" FontSize="13"
                     Foreground="#888888" VerticalAlignment="Center"/>
        </Grid>
      </Border>
      <!-- Mic Button -->
      <Button Grid.Column="1" Classes="flixTransparent"
              Padding="8" Margin="6,0,0,0">
        <PathIcon Width="20" Height="20" Foreground="White"
                  Data="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
      </Button>
      <!-- Close Button -->
      <Button x:Name="CloseButton" Grid.Column="2" Classes="flixTransparent"
              Padding="8" Margin="2,0,0,0" Click="OnCloseClick">
        <PathIcon Width="18" Height="18" Foreground="White"
                  Data="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
      </Button>
    </Grid>

    <!-- Scrollable content -->
    <ScrollViewer VerticalScrollBarVisibility="Auto">
      <StackPanel Spacing="0">

        <!-- Popular Searches -->
        <TextBlock Text="Popular Searches" FontSize="18" FontWeight="SemiBold"
                   Foreground="White" Margin="16,8,16,10"/>

        <!-- Popular 1: Neon Horizon -->
        <Button Background="Transparent" Padding="0"
                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                Tag="Neon Horizon" Cursor="Hand" Click="OnMovieClick">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <Border Grid.Column="0" Width="130" Height="73" ClipToBounds="True">
              <Border.Background>
                <ImageBrush Source="avares://ControlCatalog/Assets/Movies/trending1.jpg"
                            Stretch="UniformToFill"/>
              </Border.Background>
            </Border>
            <TextBlock Grid.Column="1" Text="Neon Horizon" FontSize="14" FontWeight="Medium"
                       Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <Border Grid.Column="2" Width="36" Height="36" CornerRadius="18"
                    Background="#E50914" Margin="0,0,16,0" VerticalAlignment="Center">
              <PathIcon Width="16" Height="16" Foreground="White"
                        Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
            </Border>
          </Grid>
        </Button>

        <!-- Divider + Popular 2: Shadow Protocol -->
        <Border Height="1" Background="#222222"/>
        <Button Background="Transparent" Padding="0"
                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                Tag="Shadow Protocol" Cursor="Hand" Click="OnMovieClick">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <Border Grid.Column="0" Width="130" Height="73" ClipToBounds="True">
              <Border.Background>
                <ImageBrush Source="avares://ControlCatalog/Assets/Movies/trending2.jpg"
                            Stretch="UniformToFill"/>
              </Border.Background>
            </Border>
            <TextBlock Grid.Column="1" Text="Shadow Protocol" FontSize="14" FontWeight="Medium"
                       Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <Border Grid.Column="2" Width="36" Height="36" CornerRadius="18"
                    Background="#E50914" Margin="0,0,16,0" VerticalAlignment="Center">
              <PathIcon Width="16" Height="16" Foreground="White"
                        Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
            </Border>
          </Grid>
        </Button>

        <!-- Divider + Popular 3: Iron Bloom -->
        <Border Height="1" Background="#222222"/>
        <Button Background="Transparent" Padding="0"
                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                Tag="Iron Bloom" Cursor="Hand" Click="OnMovieClick">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <Border Grid.Column="0" Width="130" Height="73" ClipToBounds="True">
              <Border.Background>
                <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated1.jpg"
                            Stretch="UniformToFill"/>
              </Border.Background>
            </Border>
            <TextBlock Grid.Column="1" Text="Iron Bloom" FontSize="14" FontWeight="Medium"
                       Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <Border Grid.Column="2" Width="36" Height="36" CornerRadius="18"
                    Background="#E50914" Margin="0,0,16,0" VerticalAlignment="Center">
              <PathIcon Width="16" Height="16" Foreground="White"
                        Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
            </Border>
          </Grid>
        </Button>

        <!-- Divider + Popular 4: Void Runners -->
        <Border Height="1" Background="#222222"/>
        <Button Background="Transparent" Padding="0"
                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                Tag="Void Runners" Cursor="Hand" Click="OnMovieClick">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <Border Grid.Column="0" Width="130" Height="73" ClipToBounds="True">
              <Border.Background>
                <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated2.jpg"
                            Stretch="UniformToFill"/>
              </Border.Background>
            </Border>
            <TextBlock Grid.Column="1" Text="Void Runners" FontSize="14" FontWeight="Medium"
                       Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <Border Grid.Column="2" Width="36" Height="36" CornerRadius="18"
                    Background="#E50914" Margin="0,0,16,0" VerticalAlignment="Center">
              <PathIcon Width="16" Height="16" Foreground="White"
                        Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
            </Border>
          </Grid>
        </Button>

        <!-- Divider + Popular 5: Eclipse Rising -->
        <Border Height="1" Background="#222222"/>
        <Button Background="Transparent" Padding="0"
                HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                Tag="Eclipse Rising" Cursor="Hand" Click="OnMovieClick">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <Border Grid.Column="0" Width="130" Height="73" ClipToBounds="True">
              <Border.Background>
                <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated3.jpg"
                            Stretch="UniformToFill"/>
              </Border.Background>
            </Border>
            <TextBlock Grid.Column="1" Text="Eclipse Rising" FontSize="14" FontWeight="Medium"
                       Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <Border Grid.Column="2" Width="36" Height="36" CornerRadius="18"
                    Background="#E50914" Margin="0,0,16,0" VerticalAlignment="Center">
              <PathIcon Width="16" Height="16" Foreground="White"
                        Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
            </Border>
          </Grid>
        </Button>

        <!-- Top Movies & TV -->
        <TextBlock Text="Top Movies &amp; TV" FontSize="18" FontWeight="SemiBold"
                   Foreground="White" Margin="16,12,16,10"/>
        <WrapPanel Orientation="Horizontal" Margin="12,0,12,24">

          <!-- Grid 1: Iron Bloom -->
          <Button Background="Transparent" Padding="4"
                  Tag="Iron Bloom" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated1.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 2: Void Runners -->
          <Button Background="Transparent" Padding="4"
                  Tag="Void Runners" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated2.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 3: Eclipse Rising (TOP 10 badge) -->
          <Button Background="Transparent" Padding="4"
                  Tag="Eclipse Rising" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated3.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
                <Border HorizontalAlignment="Right" VerticalAlignment="Top"
                        Margin="0,8,8,0" CornerRadius="2" Padding="6,3"
                        Background="#CC000000">
                  <TextBlock Text="TOP 10" FontSize="9" FontWeight="Bold"
                             Foreground="#E50914"/>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 4: Phantom Code (NEW EPISODES badge) -->
          <Button Background="Transparent" Padding="4"
                  Tag="Phantom Code" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/toprated4.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
                <Border HorizontalAlignment="Right" VerticalAlignment="Top"
                        Margin="0,8,8,0" CornerRadius="2" Padding="6,3"
                        Background="#CC000000">
                  <TextBlock Text="NEW EPISODES" FontSize="9" FontWeight="Bold"
                             Foreground="#E50914"/>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 5: Starfall Legacy -->
          <Button Background="Transparent" Padding="4"
                  Tag="Starfall Legacy" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/continue1.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 6: Crimson Depths (TOP 10 badge) -->
          <Button Background="Transparent" Padding="4"
                  Tag="Crimson Depths" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/morelike1.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
                <Border HorizontalAlignment="Right" VerticalAlignment="Top"
                        Margin="0,8,8,0" CornerRadius="2" Padding="6,3"
                        Background="#CC000000">
                  <TextBlock Text="TOP 10" FontSize="9" FontWeight="Bold"
                             Foreground="#E50914"/>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 7: Astral Divide -->
          <Button Background="Transparent" Padding="4"
                  Tag="Astral Divide" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/trending1.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
              </Panel>
            </Border>
          </Button>

          <!-- Grid 8: Binary Dawn -->
          <Button Background="Transparent" Padding="4"
                  Tag="Binary Dawn" Cursor="Hand" Width="160" Click="OnMovieClick">
            <Border Height="200" CornerRadius="6" ClipToBounds="True">
              <Panel>
                <Border>
                  <Border.Background>
                    <ImageBrush Source="avares://ControlCatalog/Assets/Movies/trending2.jpg"
                                Stretch="UniformToFill"/>
                  </Border.Background>
                </Border>
              </Panel>
            </Border>
          </Button>

        </WrapPanel>

      </StackPanel>
    </ScrollViewer>

  </DockPanel>
</UserControl>