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.
346 lines
18 KiB
346 lines
18 KiB
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
x:Class="ControlCatalog.Pages.RetroGamingHomeView">
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
|
<StackPanel Spacing="0">
|
|
|
|
<!-- GAME OF THE DAY header -->
|
|
<Grid ColumnDefinitions="*,Auto" Margin="16,16,16,8">
|
|
<TextBlock Text="> GAME OF THE DAY"
|
|
FontFamily="Courier New, monospace" FontSize="11" FontWeight="Bold"
|
|
Foreground="#00ffff" VerticalAlignment="Center"/>
|
|
<Border Grid.Column="1" Background="#ffff00" Padding="8,3" VerticalAlignment="Center">
|
|
<TextBlock Text="NEW!" FontFamily="Courier New, monospace" FontSize="9"
|
|
FontWeight="Bold" Foreground="#120a1f"/>
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Hero Section: Cyber Ninja 2084 -->
|
|
<Border Margin="16,0,16,0" BorderBrush="#00ffff" BorderThickness="2">
|
|
<StackPanel Spacing="0">
|
|
<Border Height="180" ClipToBounds="True">
|
|
<Panel>
|
|
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/hero.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<Border>
|
|
<Border.Background>
|
|
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
|
<GradientStop Color="#20000000" Offset="0"/>
|
|
<GradientStop Color="#D0000000" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
</Border.Background>
|
|
</Border>
|
|
<!-- Pixel decorations (right side) -->
|
|
<Canvas Width="220" Height="150" HorizontalAlignment="Right">
|
|
<Border Canvas.Left="20" Canvas.Top="20" Width="8" Height="8" Background="#00ffff"/>
|
|
<Border Canvas.Left="30" Canvas.Top="12" Width="8" Height="8" Background="#00ffff"/>
|
|
<Border Canvas.Left="30" Canvas.Top="20" Width="8" Height="8" Background="#00ffff"/>
|
|
<Border Canvas.Left="40" Canvas.Top="20" Width="8" Height="8" Background="#00ffff"/>
|
|
<Border Canvas.Left="30" Canvas.Top="28" Width="8" Height="8" Background="#00ffff"/>
|
|
<Border Canvas.Left="80" Canvas.Top="35" Width="12" Height="12" Background="#ad2bee"/>
|
|
<Border Canvas.Left="92" Canvas.Top="22" Width="12" Height="12" Background="#ad2bee"/>
|
|
<Border Canvas.Left="104" Canvas.Top="35" Width="12" Height="12" Background="#ad2bee"/>
|
|
<Border Canvas.Left="92" Canvas.Top="47" Width="12" Height="12" Background="#ad2bee"/>
|
|
<Border Canvas.Left="150" Canvas.Top="18" Width="10" Height="10" Background="#ffff00"/>
|
|
<Border Canvas.Left="150" Canvas.Top="42" Width="10" Height="10" Background="#ffff00"/>
|
|
<Border Canvas.Left="165" Canvas.Top="30" Width="8" Height="8" Background="#ff4466"/>
|
|
<Border Canvas.Left="190" Canvas.Top="15" Width="6" Height="6" Background="#00ffff"/>
|
|
<Border Canvas.Left="200" Canvas.Top="25" Width="4" Height="4" Background="#ad2bee"/>
|
|
<Border Canvas.Left="180" Canvas.Top="60" Width="8" Height="8" Background="#ffff00"/>
|
|
</Canvas>
|
|
<!-- Genre badges -->
|
|
<StackPanel Orientation="Horizontal" Spacing="6"
|
|
HorizontalAlignment="Left" VerticalAlignment="Top"
|
|
Margin="10,10,0,0">
|
|
<Border Background="#00ffff" BorderBrush="#00ffff" BorderThickness="1" Padding="5,2">
|
|
<TextBlock Text="ACTION" FontFamily="Courier New, monospace"
|
|
FontSize="7" FontWeight="Bold" Foreground="#120a1f"/>
|
|
</Border>
|
|
<Border Background="#4050ad2b" BorderBrush="#7856a8" BorderThickness="1" Padding="5,2">
|
|
<TextBlock Text="RPG" FontFamily="Courier New, monospace"
|
|
FontSize="7" FontWeight="Bold" Foreground="#7856a8"/>
|
|
</Border>
|
|
</StackPanel>
|
|
<!-- Title overlay -->
|
|
<StackPanel VerticalAlignment="Bottom" Margin="10,0,10,10" Spacing="4">
|
|
<WrapPanel Orientation="Horizontal">
|
|
<TextBlock Text="CYBER " FontFamily="Courier New, monospace"
|
|
FontSize="20" FontWeight="Bold" Foreground="#ff00ff"/>
|
|
<TextBlock Text="NINJA" FontFamily="Courier New, monospace"
|
|
FontSize="20" FontWeight="Bold" Foreground="White"/>
|
|
</WrapPanel>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<TextBlock Text="2084 " FontFamily="Courier New, monospace"
|
|
FontSize="20" FontWeight="Bold" Foreground="White"/>
|
|
<TextBlock Text="₿" FontFamily="Courier New, monospace"
|
|
FontSize="18" FontWeight="Bold" Foreground="#ffff00"
|
|
VerticalAlignment="Center"/>
|
|
</WrapPanel>
|
|
<TextBlock Text="Hack the mainframe. Slice the AI."
|
|
FontFamily="Courier New, monospace" FontSize="9"
|
|
Foreground="#D2E0D0FF"/>
|
|
</StackPanel>
|
|
</Panel>
|
|
</Border>
|
|
<!-- Play button -->
|
|
<Button x:Name="HeroPlayBtn"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Center"
|
|
Margin="0" Padding="0,14" CornerRadius="0"
|
|
Classes="retro-primary-btn">
|
|
<TextBlock Text="▶ INSERT COIN TO PLAY"
|
|
FontFamily="Courier New, monospace" FontSize="10"
|
|
FontWeight="Bold" Foreground="White"/>
|
|
</Button>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- CONTINUE PLAYING header -->
|
|
<Grid ColumnDefinitions="*,Auto" Margin="16,16,16,8">
|
|
<StackPanel Orientation="Horizontal" Spacing="6" VerticalAlignment="Center">
|
|
<PathIcon Width="13" Height="13" Foreground="#00ffff"
|
|
Data="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"/>
|
|
<TextBlock Text="CONTINUE PLAYING"
|
|
FontFamily="Courier New, monospace" FontSize="11" FontWeight="Bold"
|
|
Foreground="#00ffff" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
<!-- Continue Playing cards (horizontal scroll) -->
|
|
<ScrollViewer HorizontalScrollBarVisibility="Auto"
|
|
VerticalScrollBarVisibility="Disabled"
|
|
Margin="0,0,0,4">
|
|
<StackPanel Orientation="Horizontal" Spacing="10" Margin="16,0">
|
|
|
|
<!-- Pixel Quest card -->
|
|
<Button x:Name="ContinuePixelQuestBtn" Padding="0" Background="Transparent"
|
|
CornerRadius="0" MinWidth="240" Classes="retro-list-btn">
|
|
<Border Background="#1a0a33"
|
|
BorderBrush="#3300ffff" BorderThickness="1" ClipToBounds="True">
|
|
<StackPanel Spacing="0">
|
|
<Grid ColumnDefinitions="80,*,40" MinHeight="80">
|
|
<Border Width="80" ClipToBounds="True">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/pixel_quest.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<StackPanel Grid.Column="1" Spacing="4" VerticalAlignment="Center"
|
|
Margin="10,10,0,10">
|
|
<TextBlock Text="PIXEL QUEST" FontFamily="Courier New, monospace"
|
|
FontSize="11" FontWeight="Bold" Foreground="#00ffff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="LVL 4 - DUNGEON" FontFamily="Courier New, monospace"
|
|
FontSize="9" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
<Panel Width="40" Grid.Column="2">
|
|
<Border Width="40" Height="40" Background="#ffff00" VerticalAlignment="Center">
|
|
<PathIcon Width="16" Height="16" Foreground="#120a1f"
|
|
Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
|
|
</Border>
|
|
</Panel>
|
|
</Grid>
|
|
<Grid ColumnDefinitions="*,Auto" Margin="10,4,10,2">
|
|
<TextBlock Text="HP" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
<TextBlock Grid.Column="1" Text="65%"
|
|
FontFamily="Courier New, monospace" FontSize="8"
|
|
FontWeight="Bold" Foreground="#ffff00"
|
|
HorizontalAlignment="Right"/>
|
|
</Grid>
|
|
<Grid ColumnDefinitions="65*,35*" Height="5">
|
|
<Border Background="#ad2bee"/>
|
|
<Border Grid.Column="1" Background="#33ad2bee"/>
|
|
</Grid>
|
|
</StackPanel>
|
|
</Border>
|
|
</Button>
|
|
|
|
<!-- Space Voids card -->
|
|
<Button x:Name="ContinueSpaceVoidsBtn" Padding="0" Background="Transparent"
|
|
CornerRadius="0" MinWidth="240" Classes="retro-list-btn">
|
|
<Border Background="#1a0a33"
|
|
BorderBrush="#33ffff00" BorderThickness="1" ClipToBounds="True">
|
|
<StackPanel Spacing="0">
|
|
<Grid ColumnDefinitions="80,*,40" MinHeight="80">
|
|
<Border Width="80" ClipToBounds="True">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/space_voids.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<StackPanel Grid.Column="1" Spacing="4" VerticalAlignment="Center"
|
|
Margin="10,10,0,10">
|
|
<TextBlock Text="SPACE VOIDS" FontFamily="Courier New, monospace"
|
|
FontSize="11" FontWeight="Bold" Foreground="#00ffff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="SECTOR 7" FontFamily="Courier New, monospace"
|
|
FontSize="9" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
<Panel Width="40" Grid.Column="2">
|
|
<Border Width="40" Height="40" Background="#ffff00" VerticalAlignment="Center">
|
|
<PathIcon Width="16" Height="16" Foreground="#120a1f"
|
|
Data="M8,5.14V19.14L19,12.14L8,5.14Z"/>
|
|
</Border>
|
|
</Panel>
|
|
</Grid>
|
|
<Grid ColumnDefinitions="*,Auto" Margin="10,4,10,2">
|
|
<TextBlock Text="HP" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
<TextBlock Grid.Column="1" Text="32%"
|
|
FontFamily="Courier New, monospace" FontSize="8"
|
|
FontWeight="Bold" Foreground="#ffff00"
|
|
HorizontalAlignment="Right"/>
|
|
</Grid>
|
|
<Grid ColumnDefinitions="32*,68*" Height="5">
|
|
<Border Background="#ad2bee"/>
|
|
<Border Grid.Column="1" Background="#33ad2bee"/>
|
|
</Grid>
|
|
</StackPanel>
|
|
</Border>
|
|
</Button>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
<!-- NEW RELEASES header -->
|
|
<Grid ColumnDefinitions="*,Auto" Margin="16,20,16,10">
|
|
<StackPanel Grid.Column="0" Spacing="3">
|
|
<TextBlock Text="~NEW RELEASES" FontFamily="Courier New, monospace"
|
|
FontSize="12" FontWeight="Bold" Foreground="#e0d0ff"/>
|
|
<Border Height="1" Background="#ad2bee"/>
|
|
</StackPanel>
|
|
<TextBlock Grid.Column="1" Text="VIEW ALL >"
|
|
FontFamily="Courier New, monospace" FontSize="9" FontWeight="Bold"
|
|
Foreground="#ad2bee" VerticalAlignment="Top"/>
|
|
</Grid>
|
|
|
|
<!-- New Releases row (horizontal scroll) -->
|
|
<ScrollViewer HorizontalScrollBarVisibility="Auto"
|
|
VerticalScrollBarVisibility="Disabled">
|
|
<StackPanel Orientation="Horizontal" Spacing="8" Margin="16,0">
|
|
|
|
<!-- Neon Racer -->
|
|
<Button x:Name="NewReleaseNeonRacerBtn" Padding="0" Width="100"
|
|
Background="Transparent" CornerRadius="0" Classes="retro-list-btn">
|
|
<StackPanel Spacing="0">
|
|
<Border Height="115" ClipToBounds="True">
|
|
<Panel>
|
|
<Border>
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/neon_racer.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<Border Background="#ff4466" Padding="4,2"
|
|
HorizontalAlignment="Left" VerticalAlignment="Top">
|
|
<TextBlock Text="HOT" FontFamily="Courier New, monospace"
|
|
FontSize="7" FontWeight="Bold" Foreground="White"/>
|
|
</Border>
|
|
</Panel>
|
|
</Border>
|
|
<StackPanel Spacing="2" Margin="2,6,2,4">
|
|
<TextBlock Text="Neon Racer" FontFamily="Courier New, monospace"
|
|
FontSize="9" FontWeight="Bold" Foreground="#e0d0ff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="Racing" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<!-- Dungeon Bit -->
|
|
<Button x:Name="NewReleaseDungeonBitBtn" Padding="0" Width="100"
|
|
Background="Transparent" CornerRadius="0" Classes="retro-list-btn">
|
|
<StackPanel Spacing="0">
|
|
<Border Height="115" ClipToBounds="True">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/dungeon_bit.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<StackPanel Spacing="2" Margin="2,6,2,4">
|
|
<TextBlock Text="Dungeon Bit" FontFamily="Courier New, monospace"
|
|
FontSize="9" FontWeight="Bold" Foreground="#e0d0ff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="Adventure" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<!-- Forest Spirit -->
|
|
<Button x:Name="NewReleaseForestSpiritBtn" Padding="0" Width="100"
|
|
Background="Transparent" CornerRadius="0" Classes="retro-list-btn">
|
|
<StackPanel Spacing="0">
|
|
<Border Height="115" ClipToBounds="True">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/forest_spirit.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<StackPanel Spacing="2" Margin="2,6,2,4">
|
|
<TextBlock Text="Forest Spirit" FontFamily="Courier New, monospace"
|
|
FontSize="9" FontWeight="Bold" Foreground="#e0d0ff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="Platform" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<!-- Cyber City -->
|
|
<Button x:Name="NewReleaseCyberCityBtn" Padding="0" Width="100"
|
|
Background="Transparent" CornerRadius="0" Classes="retro-list-btn">
|
|
<StackPanel Spacing="0">
|
|
<Border Height="115" ClipToBounds="True">
|
|
<Border.Background>
|
|
<ImageBrush Source="avares://ControlCatalog/Assets/RetroGaming/cyber_city.jpg"
|
|
Stretch="UniformToFill"/>
|
|
</Border.Background>
|
|
</Border>
|
|
<StackPanel Spacing="2" Margin="2,6,2,4">
|
|
<TextBlock Text="Cyber City" FontFamily="Courier New, monospace"
|
|
FontSize="9" FontWeight="Bold" Foreground="#e0d0ff"
|
|
TextTrimming="CharacterEllipsis"/>
|
|
<TextBlock Text="Strategy" FontFamily="Courier New, monospace"
|
|
FontSize="8" Foreground="#7856a8"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
<!-- Category bar -->
|
|
<WrapPanel Orientation="Horizontal" Margin="16,14,16,24">
|
|
<Button Content="ARCADE" Padding="14,8" CornerRadius="0"
|
|
Margin="0,0,8,8" Classes="retro-cat-selected">
|
|
<Button.ContentTemplate>
|
|
<DataTemplate>
|
|
<TextBlock Text="ARCADE" FontFamily="Courier New, monospace"
|
|
FontSize="10" FontWeight="Bold" Foreground="White"/>
|
|
</DataTemplate>
|
|
</Button.ContentTemplate>
|
|
</Button>
|
|
<Button Padding="14,8" CornerRadius="0" Margin="0,0,8,8" Classes="retro-cat-btn">
|
|
<TextBlock Text="STRATEGY" FontFamily="Courier New, monospace"
|
|
FontSize="10" FontWeight="Bold" Foreground="#e0d0ff"/>
|
|
</Button>
|
|
<Button Padding="14,8" CornerRadius="0" Margin="0,0,8,8" Classes="retro-cat-btn">
|
|
<TextBlock Text="RPG" FontFamily="Courier New, monospace"
|
|
FontSize="10" FontWeight="Bold" Foreground="#e0d0ff"/>
|
|
</Button>
|
|
<Button Padding="14,8" CornerRadius="0" Margin="0,0,8,8" Classes="retro-cat-btn">
|
|
<TextBlock Text="PUZZLE" FontFamily="Courier New, monospace"
|
|
FontSize="10" FontWeight="Bold" Foreground="#e0d0ff"/>
|
|
</Button>
|
|
</WrapPanel>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</UserControl>
|
|
|