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.
305 lines
16 KiB
305 lines
16 KiB
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:ControlCatalog.Pages"
|
|
x:Class="ControlCatalog.Pages.TabbedPageFluidNavPage">
|
|
|
|
<DockPanel>
|
|
<ScrollViewer DockPanel.Dock="Right" Width="300">
|
|
<StackPanel Margin="16" Spacing="16">
|
|
<TextBlock Text="How It Works" FontSize="16" FontWeight="SemiBold"
|
|
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
|
|
|
|
<TextBlock Text="Three animation layers" FontSize="13" FontWeight="SemiBold" />
|
|
<StackPanel Spacing="6">
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="1. Background dip: cubic bezier 'U' shape travels horizontally (620 ms linear) and dips then elastic-bounces (300 ms down + 1200 ms ElasticOut)." />
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="2. Circle float: each tab button rises 16 px on select (1666 ms ElasticOut) and falls on deselect (833 ms EaseInQuint), with a vertical scale squish via CenteredElasticCurves." />
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="3. Icon fill: icon stroke is progressively drawn 0 to 100% using SKPathMeasure.GetSegment(), a direct port of Flutter's PathMeasure.extractPartialPath." />
|
|
</StackPanel>
|
|
|
|
<Separator />
|
|
|
|
<TextBlock Text="Skia rendering" FontSize="13" FontWeight="SemiBold" />
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="The entire bar (background + circles + icons) renders in a single ICustomDrawOperation that receives the raw SKCanvas from Avalonia's Skia backend. No XAML controls are used inside the bar." />
|
|
|
|
<Separator />
|
|
|
|
<TextBlock Text="Custom curves" FontSize="13" FontWeight="SemiBold" />
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="ElasticOut, CenteredElasticOut, CenteredElasticIn, LinearPointCurve: all ported verbatim from the Flutter vignette's curves.dart." />
|
|
|
|
<Separator />
|
|
|
|
<TextBlock Text="Integration" FontSize="13" FontWeight="SemiBold" />
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="FluidNavBar is a standalone Control, not a HeaderPanel. The built-in TabbedPage tab strip is hidden via a style. NavBar.SelectionChanged syncs to TabbedPage.SelectedIndex and vice-versa." />
|
|
|
|
<Separator />
|
|
|
|
<TextBlock x:Name="StatusText" Text="Active tab: Home (tap)" Opacity="0.7" FontSize="12" />
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
<!-- Height on the Border so the inner Panel can stretch and fill 100% -->
|
|
<Border CornerRadius="12"
|
|
Margin="16"
|
|
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
|
|
BorderThickness="1"
|
|
ClipToBounds="True">
|
|
<Panel Background="#75B7E1">
|
|
|
|
<!-- TabbedPage — built-in tab strip hidden, FluidNavBar takes its place -->
|
|
<TabbedPage x:Name="TabbedPageControl"
|
|
TabPlacement="Bottom"
|
|
Margin="0,0,0,56"
|
|
SafeAreaPadding="0">
|
|
<TabbedPage.Resources>
|
|
<x:Double x:Key="TabbedPageTabItemHeaderFontSize">12</x:Double>
|
|
</TabbedPage.Resources>
|
|
<TabbedPage.Styles>
|
|
|
|
<!-- Hide the built-in tab strip -->
|
|
<Style Selector="TabControl /template/ Border#PART_TabStrip">
|
|
<Setter Property="IsVisible" Value="False" />
|
|
</Style>
|
|
|
|
<!-- Pill-shaped toggle switch for the Profile settings card -->
|
|
<Style Selector="CheckBox">
|
|
<Setter Property="Template">
|
|
<ControlTemplate>
|
|
<Border Name="Track"
|
|
Width="44" Height="26"
|
|
CornerRadius="13"
|
|
Background="#44FFFFFF"
|
|
VerticalAlignment="Center">
|
|
<Border Name="Thumb"
|
|
Width="20" Height="20"
|
|
CornerRadius="10"
|
|
Background="White"
|
|
HorizontalAlignment="Left"
|
|
Margin="3,0,0,0" />
|
|
</Border>
|
|
</ControlTemplate>
|
|
</Setter>
|
|
</Style>
|
|
<Style Selector="CheckBox:checked /template/ Border#Track">
|
|
<Setter Property="Background" Value="#AAFFFFFF" />
|
|
</Style>
|
|
<Style Selector="CheckBox:checked /template/ Border#Thumb">
|
|
<Setter Property="HorizontalAlignment" Value="Right" />
|
|
<Setter Property="Margin" Value="0,0,3,0" />
|
|
</Style>
|
|
|
|
</TabbedPage.Styles>
|
|
|
|
<!-- Home -->
|
|
<ContentPage Header="Home" Background="#75B7E1">
|
|
<ScrollViewer>
|
|
<StackPanel Spacing="12" Margin="16,14">
|
|
|
|
<!-- Greeting -->
|
|
<StackPanel Spacing="1">
|
|
<TextBlock Text="Good morning" FontSize="12" Foreground="#99FFFFFF" />
|
|
<TextBlock Text="Alex Rivera" FontSize="20" FontWeight="Bold" Foreground="White" />
|
|
</StackPanel>
|
|
|
|
<!-- Weather card -->
|
|
<Border Background="#33FFFFFF" CornerRadius="14" Padding="14,12">
|
|
<Grid ColumnDefinitions="*,Auto">
|
|
<StackPanel Spacing="3">
|
|
<TextBlock Text="San Francisco" FontSize="11" Foreground="#88FFFFFF" />
|
|
<TextBlock Text="23° Sunny" FontSize="26" FontWeight="SemiBold" Foreground="White" />
|
|
<TextBlock Text="H: 26° L: 18° Feels like 21°"
|
|
FontSize="11" Foreground="#88FFFFFF" />
|
|
</StackPanel>
|
|
<!-- Sun icon: open-circle + 8 rays -->
|
|
<Path Grid.Column="1"
|
|
Width="42" Height="42"
|
|
Stretch="Uniform"
|
|
Stroke="#FFD580"
|
|
StrokeThickness="1.5"
|
|
StrokeLineCap="Round"
|
|
VerticalAlignment="Center"
|
|
Data="M12 2v2 M12 20v2 M4.93 4.93l1.41 1.41 M17.66 17.66l1.41 1.41 M2 12h2 M20 12h2 M4.93 19.07l1.41-1.41 M17.66 6.34l1.41-1.41 M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- Quick actions -->
|
|
<TextBlock Text="Quick actions" FontSize="12" FontWeight="SemiBold"
|
|
Foreground="#CCFFFFFF" />
|
|
<StackPanel Orientation="Horizontal" Spacing="8">
|
|
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Padding="0,12" Width="84">
|
|
<StackPanel Spacing="6" HorizontalAlignment="Center">
|
|
<Path Width="20" Height="20" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M8 2v4 M16 2v4 M3 10h18 M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
|
|
<TextBlock Text="Calendar" FontSize="10" Foreground="#DDFFFFFF"
|
|
TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Padding="0,12" Width="84">
|
|
<StackPanel Spacing="6" HorizontalAlignment="Center">
|
|
<Path Width="20" Height="20" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M2 8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z M18 11h-4a2 2 0 0 0 0 4h4v-4z" />
|
|
<TextBlock Text="Wallet" FontSize="10" Foreground="#DDFFFFFF"
|
|
TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Padding="0,12" Width="84">
|
|
<StackPanel Spacing="6" HorizontalAlignment="Center">
|
|
<Path Width="20" Height="20" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
|
|
<TextBlock Text="Camera" FontSize="10" Foreground="#DDFFFFFF"
|
|
TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</ContentPage>
|
|
|
|
<!-- Explore -->
|
|
<ContentPage Header="Explore" Background="#75B7E1">
|
|
<ScrollViewer>
|
|
<StackPanel Spacing="12" Margin="16,14">
|
|
<TextBlock Text="Explore" FontSize="20" FontWeight="Bold" Foreground="White" />
|
|
|
|
<Border Background="#33FFFFFF" CornerRadius="10" Padding="12,9">
|
|
<StackPanel Orientation="Horizontal" Spacing="8">
|
|
<Path Width="15" Height="15" Stretch="Uniform"
|
|
Stroke="#88FFFFFF" StrokeThickness="2" StrokeLineCap="Round"
|
|
Data="M21 21l-6-6 M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
|
|
<TextBlock Text="Search anything..." FontSize="13"
|
|
Foreground="#88FFFFFF" VerticalAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<TextBlock Text="Trending" FontSize="12" FontWeight="SemiBold"
|
|
Foreground="#CCFFFFFF" />
|
|
|
|
<UniformGrid Columns="2">
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Margin="0,0,4,4" Height="78">
|
|
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
|
|
<Path Width="24" Height="24" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M22 16.01l-6-1.5-4-8-4 8-6 1.5 2 2 4-1 4 7.5 4-7.5 4 1 2-2z" />
|
|
<TextBlock Text="Travel" FontSize="12" Foreground="White" TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Margin="4,0,0,4" Height="78">
|
|
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
|
|
<Path Width="24" Height="24" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M18 8h1a4 4 0 0 1 0 8h-1 M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z M6 1v3 M10 1v3 M14 1v3" />
|
|
<TextBlock Text="Food" FontSize="12" Foreground="White" TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Margin="0,4,4,0" Height="78">
|
|
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
|
|
<Path Width="24" Height="24" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M9 18V5l12-2v13 M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M18 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
|
|
<TextBlock Text="Music" FontSize="12" Foreground="White" TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Margin="4,4,0,0" Height="78">
|
|
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
|
|
<Path Width="24" Height="24" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10" />
|
|
<TextBlock Text="Interior" FontSize="12" Foreground="White" TextAlignment="Center" />
|
|
</StackPanel>
|
|
</Border>
|
|
</UniformGrid>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</ContentPage>
|
|
|
|
<!-- Profile -->
|
|
<ContentPage Header="Profile" Background="#75B7E1">
|
|
<ScrollViewer>
|
|
<StackPanel Spacing="14" Margin="16,14" HorizontalAlignment="Center">
|
|
|
|
<!-- Avatar -->
|
|
<Border Width="70" Height="70" CornerRadius="35"
|
|
Background="#33FFFFFF" HorizontalAlignment="Center">
|
|
<Path Width="36" Height="36" Stretch="Uniform"
|
|
Stroke="White" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
|
|
</Border>
|
|
|
|
<StackPanel Spacing="2" HorizontalAlignment="Center">
|
|
<TextBlock Text="Alex Rivera" FontSize="18" FontWeight="Bold"
|
|
Foreground="White" TextAlignment="Center" />
|
|
<TextBlock Text="@alex.rivera" FontSize="12" Foreground="#AAFFFFFF"
|
|
TextAlignment="Center" />
|
|
</StackPanel>
|
|
|
|
<!-- Settings card -->
|
|
<Border Background="#33FFFFFF" CornerRadius="12" Padding="14" Width="260">
|
|
<StackPanel Spacing="12">
|
|
|
|
<Grid ColumnDefinitions="Auto,*,Auto">
|
|
<Path Width="16" Height="16" Stretch="Uniform"
|
|
Stroke="#AAFFFFFF" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0" />
|
|
<TextBlock Grid.Column="1" Text="Notifications" Foreground="White"
|
|
VerticalAlignment="Center" Margin="10,0,0,0" FontSize="13" />
|
|
<CheckBox Grid.Column="2" IsChecked="True" />
|
|
</Grid>
|
|
|
|
<Separator Background="#33FFFFFF" />
|
|
|
|
<Grid ColumnDefinitions="Auto,*,Auto">
|
|
<Path Width="16" Height="16" Stretch="Uniform"
|
|
Stroke="#AAFFFFFF" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
<TextBlock Grid.Column="1" Text="Dark Mode" Foreground="White"
|
|
VerticalAlignment="Center" Margin="10,0,0,0" FontSize="13" />
|
|
<CheckBox Grid.Column="2" />
|
|
</Grid>
|
|
|
|
<Separator Background="#33FFFFFF" />
|
|
|
|
<Grid ColumnDefinitions="Auto,*,Auto">
|
|
<Path Width="16" Height="16" Stretch="Uniform"
|
|
Stroke="#AAFFFFFF" StrokeThickness="1.5" StrokeLineCap="Round"
|
|
Data="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
<TextBlock Grid.Column="1" Text="Privacy" Foreground="White"
|
|
VerticalAlignment="Center" Margin="10,0,0,0" FontSize="13" />
|
|
<Path Grid.Column="2" Width="12" Height="12" Stretch="Uniform"
|
|
Stroke="#AAFFFFFF" StrokeThickness="2" StrokeLineCap="Round"
|
|
Data="M9 18l6-6-6-6" />
|
|
</Grid>
|
|
|
|
</StackPanel>
|
|
</Border>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</ContentPage>
|
|
|
|
</TabbedPage>
|
|
|
|
<!-- Fluid nav bar — floats above the tab content -->
|
|
<local:FluidNavBar x:Name="NavBar"
|
|
VerticalAlignment="Bottom"
|
|
HorizontalAlignment="Stretch"
|
|
BarColor="White"
|
|
ButtonColor="#75B7E1"
|
|
ActiveIconColor="White"
|
|
InactiveIconColor="#AAFFFFFF" />
|
|
|
|
</Panel>
|
|
</Border>
|
|
|
|
</DockPanel>
|
|
</UserControl>
|
|
|