Need help with Xam.Plugin.SimpleAppIntro?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

galadril
140 Stars 15 Forks MIT License 148 Commits 0 Opened issues

Description

Just a nice and simple AppIntro for your Xamarin Forms project

Services available

!
?

Need anything else?

Contributors list

# 136,624
Xamarin
C#
WPF
Kotlin
75 commits

nuget Nuget

Icon

Xam.Plugin.SimpleAppIntro

Just a nice and simple AppIntro for your Xamarin Forms project

Setup

  • Available on Nuget: https://www.nuget.org/packages/Xam.Plugin.SimpleAppIntro

!!Install into your .net standaard project. !!

Example

simpleappintro

Usage

You can now create new simple sliders and add them to a SimpleAppIntro page. We support 5 per-build types of slides at this moment, Slide/ButtonSlide/SwitchSlide/CheckboxSlide/RadioButtonSlide(new). I these doesn't work for you, you can always use a custom ContentView as a slide

 var welcomePage = new SimpleAppIntro(new List() {
            new Slide(new SlideConfig("Welcome", "This is a sample app showing off the new App Intro", "cup_icon.png",
            null, "#FFFFFF", "#FFFFFF",
            FontAttributes.Bold, FontAttributes.Italic, 24, 16)),

        new ButtonSlide(new ButtonSlideConfig("Slides", "You can add slides and have a clean app intro", "cup_icon.png",
        null, "Click here", null,"#FFFFFF", new Command(() => OnButtonClicked()), "#FFFFFF", "#FFFFFF",
        FontAttributes.Bold, FontAttributes.Italic, 24, 16)),

        new SwitchSlide(new SwitchSlideConfig("Other", "Tell your user what they can do with your app",  "cup_icon.png",
        null, true, new Command<bool>((value) =&gt; OnSwitchClicked(value)), "#FFFFFF", "#FFFFFF",
        FontAttributes.Bold, FontAttributes.Italic, 24, 16)),

        new SwitchSlide(new SwitchSlideConfig("Other", "Tell your user what they can do with your app",  "cup_icon.png",
        null, true, new Command<bool>((value) =&gt; OnSwitchClicked(value)), "#FFFFFF", "#FFFFFF",
        FontAttributes.Bold, FontAttributes.Italic, 24, 16)),

    new CheckboxSlide(new CheckboxSlideConfig("Checkbox", "Let your user set specific settings via a AppIntro screen.",          "cup_icon.png",
        null, true, new Command<bool>((value) =&gt; OnCheckboxClicked(value)), "#FFFFFF", "#FFFFFF",
        FontAttributes.Bold, FontAttributes.Italic, 24, 16)),


        new RadioButtonSlide(new RadioButtonSlideConfig("RadioButtons", "Let users flip some radiobuttons via the app intro:",  "world.json",
            null, new List<radiobuttonitem>()
            {
                new RadioButtonItem(){Content= "option 1 - group 1", GroupName="slide1", IsChecked = false, TextColor =  "#FFFFFF", FontAttributes = FontAttributes.None, FontSize = 16, Command =new Command<radiobuttonitem>((value) =&gt; OnRadioButtonChanged(value)) },
                new RadioButtonItem(){Content= "option 2 - group 1", GroupName="slide1", IsChecked = false, TextColor =  "#FFFFFF", FontAttributes = FontAttributes.None, FontSize = 16, Command =new Command<radiobuttonitem>((value) =&gt; OnRadioButtonChanged(value)) },
                new RadioButtonItem(){Content= "option 3 - group 2", GroupName="slide2", IsChecked = false, TextColor =  "#FFFFFF", FontAttributes = FontAttributes.None, FontSize = 16, Command =new Command<radiobuttonitem>((value) =&gt; OnRadioButtonChanged(value)) },
                new RadioButtonItem(){Content= "option 4 - group 2", GroupName="slide2", IsChecked = false, TextColor =  "#FFFFFF", FontAttributes = FontAttributes.None, FontSize = 16, Command =new Command<radiobuttonitem>((value) =&gt; OnRadioButtonChanged(value)) }
            }, "#FFFFFF", "#FFFFFF",

  });

MainPage.Navigation.PushModalAsync(welcomePage);

Animated

You can also specify your own Lottie animated icon for each slide. Just create an AnimatedSimpleAppIntro like: We support 5 types of slides at this moment, Slide/ButtonSlide/SwitchSlide/CheckboxSlide/RadioButtonSlide (same usage as above)

var welcomePage = new AnimatedSimpleAppIntro(new List() {
            new Slide(new SlideConfig("Welcome", "This is a sample app showing off the new App Intro", "world.json",
            null, "#FFFFFF", "#FFFFFF",
            FontAttributes.Bold, FontAttributes.Italic, 24, 16))

Properties

You can set the next properties

welcomePage.DoneText = "Finish";
welcomePage.SkipText = "Skip";
welcomePage.NextText = "Next";
welcomePage.BackText = "Next";

welcomePage.ShowPositionIndicator = true; welcomePage.ShowSkipButton = true; welcomePage.ShowNextButton = true; welcomePage.ShowBackButton = true;

// Vibrate // NOTE: you will probably need to ask VIBRATE permission in Manifest. welcomePage.Vibrate = true; welcomePage.VibrateDuration = 0.2;

Theming

You can set the next colors

welcomePage.BarColor = "#607D8B";
welcomePage.SkipButtonBackgroundColor = "#FF9700";
welcomePage.DoneButtonBackgroundColor = "#8AC149";
welcomePage.NextButtonBackgroundColor = "#8AC149";
welcomePage.BackButtonBackgroundColor = "#8AC149";

welcomePage.SkipButtonTextColor = "#FFFFFF"; welcomePage.NextButtonTextColor = "#FFFFFF"; welcomePage.BackButtonTextColor = "#FFFFFF"; welcomePage.DoneButtonTextColor = "#FFFFFF";

And you can also specify an image instead of the default skip/done/next buttons:

welcomePage.DoneButtonImage = "baseline_done_white_24.png";
welcomePage.BackButtonImage = "baseline_done_white_24.png";
welcomePage.NextButtonImage = "baseline_done_white_24.png";
welcomePage.SkipButtonImage = "baseline_done_white_24.png";

Custom ContentViews

You can now set a ContentView as a custom slide in this control!

 var welcomePage = new SimpleAppIntro(new List() {

            new CustomSlide
            {
                BindingContext = this
            },

  })

You can also use 2 interfaces while using custom slide views, ISave and IValidate. For example you have a custom contentview slide with a profile firstname/lastname view that needs to be validated and saved on the slide.

(See sample project for a custom view with implemented interfaces) ``` [XamlCompilation(XamlCompilationOptions.Compile)] public partial class CustomSlide : ContentView, IValidate, ISave {

...

public async void Save() { await viewmodel.SaveProfileName(); }

public bool Validate() { return viewmodel.ValidateName(); }

...

Callbacks

You can use the next callback methods to get more info on the events

  welcomePage.OnSkipButtonClicked = OnSkipButtonClicked;
  welcomePage.OnDoneButtonClicked = OnDoneButtonClicked;
  welcomePage.OnPositionChanged = OnPositionChanged;

///

/// On skip button clicked /// private void OnSkipButtonClicked() { DisplayAlert("Result", "Skip", "OK"); }

///

/// On done button clicked /// private void OnDoneButtonClicked() { DisplayAlert("Result", "Done", "OK"); }

///

/// On slide position changed event /// private void OnPositionChanged(int page) { Console.Write($"Slide changed to page {page}"); }

Donation

If you like to say thanks, you could always buy me a cup of coffee (/beer)!
(Thanks!)
PayPal donate button

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.