🏗️
MauiReactor
  • What is MauiReactor?
  • What's new in Version 2
  • What's new in Version 3
  • Getting Started
  • Getting Started Version 2
  • Components
    • State-less Components
    • Stateful Components
      • Inline Components
    • Component life-cycle
    • Component Properties
    • Component with children
    • Component Parameters
    • Theming
    • Navigation
      • NavigationPage
      • Shell
      • Back button
    • Controls
      • Button
      • RadioButton
      • FlyoutPage
      • CollectionView
        • Interactions
        • Layout
        • Selection
        • Empty view
        • Scrolling
        • Grouping
      • IndicatorView
      • Picker
      • Shell
      • Label
    • Wrap 3rd party controls
      • Lottie animations
      • Provide DataTemplate to native controls
    • Accessing native controls
    • Animation
      • Property-Based
      • AnimationController
      • Timer
    • Graphics
      • CanvasView control
    • Window
    • Testing
    • XAML Integration
  • Deep dives
    • Native tree and Visual tree
    • Dependency injection
    • Working with the GraphicsView
    • Migrating from MVVM Model
    • Using XAML Resources
    • Behaviors
  • resources
    • Source and Sample Applications
  • Q&A
    • How to deal with state shared across Components?
    • Does this support ObservableCollection for CollectionView?
    • Do we need to add states to create simple animations such as ScaleTo, FadeTo, etc on tap?
    • How to deal with custom dialogs/popups?
  • How to create a Menu/ContextMenu?
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Components

Component Properties

Describes how to specify properties for a component

When creating a component you almost always need to pass props (or parameters/property values) to customize its appearance or behavior. In MauiReactor you can use plain properties.

Take for example this component that implements an activity indicator with a label:

partial class BusyComponent : Component
{
    [Prop]
    string _message;
    [Prop]
    bool _isBusy;
    
    public override VisualNode Render()
     => StackLayout(
            ActivityIndicator()
                .IsRunning(_isBusy),
            Label()
                .Text(_message)
        );
}

and this is how we can use it on a page:

class BusyPageState : IState
{
    public bool IsBusy { get; set; }
}

class BusyPageComponent : Component<BusyPageState>
{
    protected override void OnMounted()
    {
        SetState(_ => _.IsBusy = true);

        //OnMounted is called on UI Thread, move the slow code to a background thread
        Task.Run(async () =>
        {
            //Simulate lenghty work
            await Task.Delay(3000);

            SetState(_ => _.IsBusy = false);
        });

        base.OnMounted();
    }

    public override VisualNode Render()
      => ContentPage(
            State.IsBusy ?
            new BusyComponent()
                .Message("Loading")
                .IsBusy(true)
            :
            RenderPage()
        );

    private VisualNode RenderPage()
        => Label("Done!")
            .Center();
}
PreviousComponent life-cycleNextComponent with children

Last updated 1 year ago

Was this helpful?

If you need to set properties of components hosted on a different page you should use a Props object (see )

Navigation