243 lines
12 KiB
XML
243 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.MainPage"
|
|
Title="MarketAlly SpotlightTour Demo">
|
|
|
|
<Grid>
|
|
<ScrollView>
|
|
<VerticalStackLayout Padding="20" Spacing="20">
|
|
|
|
<Image
|
|
x:Name="LogoImage"
|
|
Source="dotnet_bot.png"
|
|
HeightRequest="150"
|
|
Aspect="AspectFit"
|
|
onboard:Onboarding.Title="Welcome to MASpotlightTour!"
|
|
onboard:Onboarding.Description="This library helps you create beautiful onboarding experiences for your .NET MAUI apps."
|
|
onboard:Onboarding.Order="1"
|
|
onboard:Onboarding.SpotlightShape="Circle" />
|
|
|
|
<Label
|
|
Text="MASpotlightTour"
|
|
FontSize="28"
|
|
FontAttributes="Bold"
|
|
HorizontalOptions="Center" />
|
|
|
|
<Label
|
|
Text="A XAML-driven onboarding and coach-marks system for .NET MAUI"
|
|
FontSize="16"
|
|
HorizontalTextAlignment="Center"
|
|
TextColor="Gray" />
|
|
|
|
<BoxView HeightRequest="10" Color="Transparent" />
|
|
|
|
<Button
|
|
x:Name="TakeTourButton"
|
|
Text="Take a Quick Tour"
|
|
BackgroundColor="#E91E63"
|
|
TextColor="White"
|
|
FontAttributes="Bold"
|
|
Clicked="OnTakeTourClicked"
|
|
onboard:Onboarding.Title="Start Here!"
|
|
onboard:Onboarding.Description="Tap this button anytime to take the tour again and explore all the features."
|
|
onboard:Onboarding.Order="6" />
|
|
|
|
<BoxView HeightRequest="5" Color="Transparent" />
|
|
|
|
<Label
|
|
Text="Explore the Demos"
|
|
FontSize="18"
|
|
FontAttributes="Bold"
|
|
onboard:Onboarding.Title="Demo Gallery"
|
|
onboard:Onboarding.Description="Each card below demonstrates a different feature. Tap any card to try it out!"
|
|
onboard:Onboarding.Order="2" />
|
|
|
|
<Frame BackgroundColor="{StaticResource Primary}" Padding="15" CornerRadius="8"
|
|
onboard:Onboarding.Title="Basic Tour"
|
|
onboard:Onboarding.Description="Start here to learn the fundamentals. This demo shows a simple spotlight tour triggered by a button."
|
|
onboard:Onboarding.Order="3">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnBasicTourTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Basic Tour" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Simple spotlight tour with manual trigger button" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#9C27B0" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnShapesTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Spotlight Shapes" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Rectangle, RoundedRectangle, and Circle shapes" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#FF9800" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnAutoStartTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Auto Features" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Auto-start and auto-advance for hands-free demos" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#2196F3" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnScrollDemoTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Scroll Support" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Auto-scroll to off-screen elements" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#607D8B" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnDisplayModesTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Display Modes" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="SpotlightWithCallout, CalloutOnly, SpotlightWithInlineLabel" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#00BCD4" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnPositioningModesTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Positioning Modes" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Following, FixedCorner, and AutoCorner callout positioning" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#795548" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnThemesTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Themes" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Light, Dark, and System theme support" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#673AB7" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnIntroTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Intro View + Action Chaining" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Welcome screen and awaitable tour with chained actions" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#E91E63" Padding="15" CornerRadius="8"
|
|
onboard:Onboarding.Title="Animation Effects"
|
|
onboard:Onboarding.Description="Our newest feature! Explore entrance animations, spotlight effects like Pulse and Breathe, and smooth step transitions."
|
|
onboard:Onboarding.Order="4">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnAnimationsTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Animation Effects" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Entrance/exit animations, spotlight effects, and presets" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<Frame BackgroundColor="#009688" Padding="15" CornerRadius="8">
|
|
<Frame.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnStepActionsTapped" />
|
|
</Frame.GestureRecognizers>
|
|
<VerticalStackLayout Spacing="5">
|
|
<Label Text="Step Actions" FontAttributes="Bold" TextColor="White" />
|
|
<Label Text="Execute code when entering/leaving steps (tab switching, drawers)" TextColor="White" FontSize="12" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
|
|
<BoxView HeightRequest="10" Color="Transparent" />
|
|
|
|
<Label
|
|
Text="Built with precision by MarketAlly"
|
|
FontSize="12"
|
|
TextColor="Gray"
|
|
HorizontalOptions="Center"
|
|
onboard:Onboarding.Title="That's It!"
|
|
onboard:Onboarding.Description="You're all set to explore. Have fun building amazing onboarding experiences!"
|
|
onboard:Onboarding.Order="5" />
|
|
|
|
<BoxView HeightRequest="20" Color="Transparent" />
|
|
|
|
</VerticalStackLayout>
|
|
</ScrollView>
|
|
|
|
<!-- Onboarding Host with Intro View -->
|
|
<onboard:OnboardingHost
|
|
x:Name="TourHost"
|
|
ShowCornerNavigator="True"
|
|
ShowSkipButton="True"
|
|
ShowIntro="True"
|
|
CornerNavigatorPlacement="Auto"
|
|
CalloutPositionMode="Following"
|
|
Theme="System"
|
|
AutoStartDelay="500"
|
|
DimOpacity="0.8"
|
|
AllowTapAnywhereToDismissIntro="True">
|
|
|
|
<!-- Welcome Intro View -->
|
|
<onboard:OnboardingHost.IntroView>
|
|
<Frame
|
|
BackgroundColor="White"
|
|
CornerRadius="20"
|
|
Padding="30"
|
|
HasShadow="True"
|
|
HorizontalOptions="Center"
|
|
VerticalOptions="Center"
|
|
MaximumWidthRequest="350">
|
|
<VerticalStackLayout Spacing="20">
|
|
<Image
|
|
Source="dotnet_bot.png"
|
|
HeightRequest="100"
|
|
Aspect="AspectFit" />
|
|
|
|
<Label
|
|
Text="Welcome!"
|
|
FontSize="28"
|
|
FontAttributes="Bold"
|
|
HorizontalOptions="Center"
|
|
TextColor="#333" />
|
|
|
|
<Label
|
|
Text="Let us show you around the MASpotlightTour demo app. You'll discover all the amazing features this library has to offer."
|
|
FontSize="15"
|
|
HorizontalTextAlignment="Center"
|
|
TextColor="#666" />
|
|
|
|
<Button
|
|
Text="Let's Go!"
|
|
BackgroundColor="#E91E63"
|
|
TextColor="White"
|
|
FontAttributes="Bold"
|
|
CornerRadius="25"
|
|
HeightRequest="50"
|
|
Clicked="OnIntroStartClicked" />
|
|
|
|
<Label
|
|
Text="or tap anywhere to skip"
|
|
FontSize="12"
|
|
TextColor="#999"
|
|
HorizontalOptions="Center" />
|
|
</VerticalStackLayout>
|
|
</Frame>
|
|
</onboard:OnboardingHost.IntroView>
|
|
|
|
</onboard:OnboardingHost>
|
|
</Grid>
|
|
|
|
</ContentPage>
|