246 lines
12 KiB
XML
246 lines
12 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
|
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
|
xmlns:onboard="clr-namespace:MarketAlly.SpotlightTour.Maui;assembly=MarketAlly.SpotlightTour.Maui"
|
|
x:Class="Test.SpotlightTour.Pages.StepActionsPage"
|
|
Title="Step Actions">
|
|
|
|
<Grid RowDefinitions="Auto,*,Auto">
|
|
|
|
<!-- Header -->
|
|
<Border Grid.Row="0" Padding="20" StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark=#1E3A5F}">
|
|
<VerticalStackLayout Spacing="8">
|
|
<Label
|
|
Text="Step Actions Demo"
|
|
FontSize="24"
|
|
FontAttributes="Bold"
|
|
TextColor="White"
|
|
onboard:Onboarding.StepKey="header"
|
|
onboard:Onboarding.Title="Step Actions"
|
|
onboard:Onboarding.Description="This demo shows how to execute custom code when entering or leaving tour steps."
|
|
onboard:Onboarding.Order="1" />
|
|
|
|
<Label
|
|
Text="Watch tabs switch automatically as the tour progresses!"
|
|
TextColor="{AppThemeBinding Light=#FFFFFFCC, Dark=#FFFFFFAA}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Main Content with Tabs -->
|
|
<Grid Grid.Row="1">
|
|
|
|
<!-- Tab Bar -->
|
|
<Grid RowDefinitions="Auto,*">
|
|
<HorizontalStackLayout
|
|
x:Name="TabBar"
|
|
Spacing="0"
|
|
BackgroundColor="{AppThemeBinding Light=#F5F5F5, Dark=#2C2C2E}"
|
|
onboard:Onboarding.StepKey="tab-bar"
|
|
onboard:Onboarding.Title="Tab Navigation"
|
|
onboard:Onboarding.Description="The tour will automatically switch tabs to show you different features."
|
|
onboard:Onboarding.Order="2">
|
|
|
|
<Button
|
|
x:Name="HomeTabBtn"
|
|
Text="Home"
|
|
BackgroundColor="{StaticResource Primary}"
|
|
TextColor="White"
|
|
CornerRadius="0"
|
|
WidthRequest="120"
|
|
Clicked="OnHomeTabClicked" />
|
|
|
|
<Button
|
|
x:Name="SettingsTabBtn"
|
|
Text="Settings"
|
|
BackgroundColor="{AppThemeBinding Light=#E0E0E0, Dark=#3A3A3C}"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}"
|
|
CornerRadius="0"
|
|
WidthRequest="120"
|
|
Clicked="OnSettingsTabClicked" />
|
|
|
|
<Button
|
|
x:Name="ProfileTabBtn"
|
|
Text="Profile"
|
|
BackgroundColor="{AppThemeBinding Light=#E0E0E0, Dark=#3A3A3C}"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}"
|
|
CornerRadius="0"
|
|
WidthRequest="120"
|
|
Clicked="OnProfileTabClicked" />
|
|
|
|
</HorizontalStackLayout>
|
|
|
|
<!-- Tab Content -->
|
|
<Grid Grid.Row="1" BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#1C1C1E}">
|
|
|
|
<!-- Home Tab Content -->
|
|
<VerticalStackLayout
|
|
x:Name="HomeContent"
|
|
Padding="20"
|
|
Spacing="15"
|
|
IsVisible="True">
|
|
|
|
<Label Text="Home" FontSize="20" FontAttributes="Bold" />
|
|
|
|
<Border
|
|
Padding="15"
|
|
StrokeShape="RoundRectangle 8"
|
|
BackgroundColor="{AppThemeBinding Light=#E3F2FD, Dark=#1A2F3D}"
|
|
Stroke="{AppThemeBinding Light=Transparent, Dark=#2A4A5C}"
|
|
onboard:Onboarding.StepKey="home-card"
|
|
onboard:Onboarding.Title="Home Dashboard"
|
|
onboard:Onboarding.Description="This is your home dashboard. Next, we'll automatically switch to the Settings tab!"
|
|
onboard:Onboarding.Order="3">
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Welcome back!" FontAttributes="Bold" />
|
|
<Label Text="Your dashboard shows key metrics and quick actions."
|
|
TextColor="{AppThemeBinding Light=Gray, Dark=#ABABAB}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
</VerticalStackLayout>
|
|
|
|
<!-- Settings Tab Content -->
|
|
<VerticalStackLayout
|
|
x:Name="SettingsContent"
|
|
Padding="20"
|
|
Spacing="15"
|
|
IsVisible="False">
|
|
|
|
<Label Text="Settings" FontSize="20" FontAttributes="Bold" />
|
|
|
|
<Border
|
|
Padding="15"
|
|
StrokeShape="RoundRectangle 8"
|
|
x:Name="SettingsCard"
|
|
BackgroundColor="{AppThemeBinding Light=#FFF3E0, Dark=#3D2E1A}"
|
|
Stroke="{AppThemeBinding Light=Transparent, Dark=#5C4A2A}"
|
|
onboard:Onboarding.StepKey="settings-card"
|
|
onboard:Onboarding.Title="Settings Panel"
|
|
onboard:Onboarding.Description="The tour switched to Settings automatically! OnEntering action changed the tab."
|
|
onboard:Onboarding.Order="4">
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="App Settings" FontAttributes="Bold" />
|
|
<Label Text="Configure notifications, theme, and preferences."
|
|
TextColor="{AppThemeBinding Light=Gray, Dark=#ABABAB}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<Border
|
|
Padding="15"
|
|
StrokeShape="RoundRectangle 8"
|
|
BackgroundColor="{AppThemeBinding Light=#FFEBEE, Dark=#3D1A1A}"
|
|
Stroke="{AppThemeBinding Light=Transparent, Dark=#5C2A2A}"
|
|
onboard:Onboarding.StepKey="premium-feature"
|
|
onboard:Onboarding.Title="Premium Feature"
|
|
onboard:Onboarding.Description="This step can be conditionally skipped using the StepEntering event."
|
|
onboard:Onboarding.Order="5">
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Premium Settings" FontAttributes="Bold"
|
|
TextColor="{AppThemeBinding Light=#D32F2F, Dark=#EF5350}" />
|
|
<Label Text="Advanced features for premium users."
|
|
TextColor="{AppThemeBinding Light=Gray, Dark=#ABABAB}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
</VerticalStackLayout>
|
|
|
|
<!-- Profile Tab Content -->
|
|
<VerticalStackLayout
|
|
x:Name="ProfileContent"
|
|
Padding="20"
|
|
Spacing="15"
|
|
IsVisible="False">
|
|
|
|
<Label Text="Profile" FontSize="20" FontAttributes="Bold" />
|
|
|
|
<Border
|
|
Padding="15"
|
|
StrokeShape="RoundRectangle 8"
|
|
BackgroundColor="{AppThemeBinding Light=#E8F5E9, Dark=#1B3D1F}"
|
|
Stroke="{AppThemeBinding Light=Transparent, Dark=#2E5432}"
|
|
onboard:Onboarding.StepKey="profile-card"
|
|
onboard:Onboarding.Title="Your Profile"
|
|
onboard:Onboarding.Description="Finally, we switched to the Profile tab. This is the last step!"
|
|
onboard:Onboarding.Order="6">
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="User Profile" FontAttributes="Bold" />
|
|
<Label Text="View and edit your profile information."
|
|
TextColor="{AppThemeBinding Light=Gray, Dark=#ABABAB}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
</VerticalStackLayout>
|
|
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<!-- Side Panel (Drawer simulation) -->
|
|
<Border
|
|
x:Name="SidePanel"
|
|
Padding="20"
|
|
StrokeThickness="0"
|
|
IsVisible="False"
|
|
HorizontalOptions="Start"
|
|
VerticalOptions="Fill"
|
|
WidthRequest="280"
|
|
BackgroundColor="{AppThemeBinding Light=White, Dark=#2C2C2E}"
|
|
Shadow="{Shadow Brush=Black, Opacity=0.3, Offset='5,0'}">
|
|
<VerticalStackLayout Spacing="15">
|
|
<Label Text="Side Panel" FontSize="18" FontAttributes="Bold" />
|
|
<Label Text="This panel was opened by a step action!"
|
|
TextColor="{AppThemeBinding Light=Gray, Dark=#ABABAB}" />
|
|
<Button Text="Close" Clicked="OnClosePanelClicked"
|
|
BackgroundColor="{AppThemeBinding Light=#EEEEEE, Dark=#3A3A3C}"
|
|
TextColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}" />
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
</Grid>
|
|
|
|
<!-- Footer with Controls -->
|
|
<Border Grid.Row="2" Padding="20" StrokeThickness="0"
|
|
BackgroundColor="{AppThemeBinding Light=#F5F5F5, Dark=#2C2C2E}">
|
|
<VerticalStackLayout Spacing="12">
|
|
|
|
<HorizontalStackLayout Spacing="10" HorizontalOptions="Center">
|
|
<Switch x:Name="SkipPremiumSwitch" IsToggled="False" />
|
|
<Label Text="Skip Premium Step" VerticalOptions="Center" />
|
|
</HorizontalStackLayout>
|
|
|
|
<Button
|
|
x:Name="StartTourBtn"
|
|
Text="Start Step Actions Tour"
|
|
Clicked="OnStartTourClicked"
|
|
BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark=#1E88E5}"
|
|
TextColor="White"
|
|
FontAttributes="Bold" />
|
|
|
|
<Border Padding="10" StrokeShape="RoundRectangle 6"
|
|
BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#1C1C1E}"
|
|
Stroke="{AppThemeBinding Light=#E0E0E0, Dark=#3A3A3C}">
|
|
<Label
|
|
x:Name="LogLabel"
|
|
Text="Action log will appear here..."
|
|
FontSize="11"
|
|
FontFamily="Consolas"
|
|
TextColor="{AppThemeBinding Light=#666666, Dark=#ABABAB}"
|
|
LineBreakMode="WordWrap" />
|
|
</Border>
|
|
|
|
</VerticalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Onboarding Host -->
|
|
<onboard:OnboardingHost
|
|
x:Name="TourHost"
|
|
Grid.RowSpan="3"
|
|
ShowCornerNavigator="True"
|
|
ShowSkipButton="True"
|
|
DimOpacity="0.75"
|
|
Theme="System" />
|
|
|
|
</Grid>
|
|
|
|
</ContentPage>
|