csharpc-sharpdotnetxamlavaloniauicross-platformcross-platform-xamlavaloniaguimulti-platformuser-interfacedotnetcore
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
14 KiB
302 lines
14 KiB
<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 & 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>
|
|
|