How to use "{Binding Source={x:Reference fontStepper}, Path=Value}" across pages

Question

How to use "{Binding Source={x:Reference fontStepper}, Path=Value}" across pages

TazKing 85

I'm binding to a Stepper control using the code below to set the font size on an Editor control on the same content view page. It works fine.

FontSize="{Binding Source={x:Reference fontStepper}, Path=Value}"

I want to use this to change font size on another content view page, but it doesn't compile. Compiler says it can't find the object referenced by fontStepper. I thought since all pages use the same namespace, it should be visible. What am I missing? Any help appreciated!

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Hello,

I want to use this to change font size on another content view page

This is an in-expectation error. Because your xaml code is actually equivalent to the following c# code.

test.BindingContext = this.fontStepper;
test.SetBinding(Label.FontSizeProperty, "Value");

As a result, when you try to bind to a control on another page in the same namespace, the compiler can't find an adapted binding property because they don't belong to the same class.

For cross-page binding, you can use the MVVM approach to bind a single instance of the same ViewModel across different pages. Please refer to the following steps and documentation.

Step 1. Create the Viewmodel for binding.

public class MyViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
 
    public void OnPropertyChanged([CallerMemberName] string name = "") =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    public int FontSizeValue
    {
        get
        {
            return fontSizeValue;
        }
        set
        {
            if (fontSizeValue != value)
            {
                fontSizeValue = value;
                OnPropertyChanged();
            }
        }
    }
    private int fontSizeValue;
    public MyViewModel()
    {
    }
}

Step 2. Set the BindingContext for the page to be bound.

Page for setting Fontsize.

<Slider x:Name="fontStepper" Value="{Binding FontSizeValue}" Minimum="15" Maximum="80"/>

public MainPage(MyViewModel myViewModel)
{
    InitializeComponent();
    this.BindingContext = myViewModel;
}

Page for using Fontsize.

<Label 
    Text="Welcome to .NET MAUI!"
    FontSize="{Binding FontSizeValue}"
    VerticalOptions="Center" 
    HorizontalOptions="Center" />

public NewPage1(MyViewModel myViewModel)
{
    InitializeComponent();
    this.BindingContext = myViewModel;
}

Step 3. Setting up a singleton for ViewModel through Dependency Injection technique in MauiProgram.cs file.

builder.Services.AddSingleton<MyViewModel>();
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<NewPage1>();

After that, you can verify that a change in value in the Slider changes the Fontsize of the other page.

You could refer to Dependency injection for more detailed information.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

TazKing 85 Reputation points

2024-10-17T00:14:19.07+00:00

The way my app is written now, the control that sets FocusSize is not on MainPage. It is on a Content View page that is included on MainPage using

<local:MyTraceCalculations Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />

The compiler reports "it's not usable as an object or does not define a parameterless constructor". Likewise, the compiler reports the same error for the Content View page where I want to use FontSize since I include it the same way. Do I simply need to put the control on MainPage or is there another way to construct the views?
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2024-10-17T01:12:22.1566667+00:00

MainPage and NewPage1 in the use case are just used as use cases, they refer to the page that needs to set FontSize and the page that uses FontSize respectively.

the same error for the Content View page

ContentView can directly use the ViewModel belonging to the Page, you can't add ViewModel to the constructor of ContentView, you can refer to this official document.

Define the UI Therefore, if your fontStepper is inside a ContentView, you need to follow the official instructions to set up the binding for the ContentView and set up the ViewModel in the corresponding Page class as the answer.
TazKing 85 Reputation points

2024-12-15T01:08:31.16+00:00

Using MVVM approach now, program runs fine, and can compile bindings on two ContentView pages. Having difficulties "defining the UI" as described in link above to compile the bindings on the MainPage though.

I don't understand why this isn't working. Here's the MainPage C#

namespace BindingApp { public partial class MainPage : ContentPage { public SharedViewModel SharedViewModel { get; set; } public MainPage() { InitializeComponent(); // Initialize the shared ViewModel and set it as the BindingContext SharedViewModel = new SharedViewModel(); BindingContext = this; // Set initial text for the Entry control in Page1View via ViewModel SharedViewModel.Page1Data = "Initial text set from program start in MainPage code-behind"; // Set initial text size for the Entry control in Page1View via ViewModel // SharedViewModel.FontSize = 14; } } }

Share via

How to use "{Binding Source={x:Reference fontStepper}, Path=Value}" across pages

0 additional answers

Your answer