🏗️
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. Q&A

How to deal with state shared across Components?

Hi, given that you can choose the best approach that fits better for your project here are 3 different ways to achieve it in MauiReactor/C# that I can think of:

  1. Pass global state/parameters down to your component tree. For example, say you have a class that resembles your settings pass it down to your components:

class Settings
{
  public int MySettingValue {get;set;}
}

class MyComponent
{
   Settings? _settings;
    public MyComponent Settings(Settings settings)
    {
       _settings = settings;
      return this;
    }

    public override VisualNode Render()
    {
      //use _settings and pass down to components used here _settings object
    }
}
  1. Use dependency injection to "inject" your global state/parameters:

interface IGlobalSettings //->implemented somewhere and registered in MauiProgram.cs
{
    int MySettingValue {get;set;}
}

class MyComponent
{   
    public override VisualNode Render()
    {
          var settings = Services.GetRequiredService<IGlobalSettings>();
         //use settings, but no need to pass down to components used here (they can easily access the settings class with DI as well)
    }
}
  1. Use the "Parameters" feature provided by MauiReactor: it allows you to create a Parameter in a parent component and access it in read-write mode from child components:

class CustomParameter
{
    public int Numeric { get; set; }
}

class ParametersPage: Component
{
    private readonly IParameter<CustomParameter> _customParameter;

    public ParametersPage()
    {
        _customParameter = CreateParameter<CustomParameter>();
    }

    public override VisualNode Render()
    {
        return new ContentPage("Parameters Sample")
        {
            new VStack(spacing: 10)
            {
                new Button("Increment from parent", () => _customParameter.Set(_=>_.Numeric += 1   )),
                new Label(_customParameter.Value.Numeric),

                new ParameterChildComponent()
            }
            .VCenter()
            .HCenter()
        };
    }
}

class ParameterChildComponentc: Component
{
    public override VisualNode Render()
    {
        var customParameter = GetParameter<CustomParameter>();

        return new VStack(spacing: 10)
        {
            new Button("Increment from child", ()=> customParameter.Set(_=>_.Numeric++)),

            new Label(customParameter.Value.Numeric),
        };
    }
}

for more info on this specific feature please take a look at:

PreviousSource and Sample ApplicationsNextDoes this support ObservableCollection for CollectionView?

Last updated 4 months ago

Was this helpful?

(KeeMind app makes extensive use of this feature)

https://github.com/adospace/reactorui-maui/blob/main/samples/MauiReactor.TestApp/Pages/ParametersPage.cs
https://github.com/adospace/kee-mind
Component Parameters