How to access fields or controls of Custom View from another Page's XAML in Xamarin Forms?

Question

I am having a Custom Control, I want to add some elements from the Page in which it will be used.

Just like this

<Label>
    <Label.Text>First Name</Label.Text>
</Label>

As here, Label is predefined, and Label's Text property is added in other Page ie. where it is being used, I want to add controls whose values will be assigned from another Page in which, it will be used.

Here's my Custom Control in XAML (DialogView.xaml)

<?xml version="1.0" encoding="UTF-8"?>
<ContentView ...>
    <ContentView.Content>
        <Frame x:Name="dialogContainer" Padding="0" BackgroundColor="Transparent">
            <!--I want to use this StackLayout below and add controls inside it from other Page's XAML-->
            <StackLayout x:Name="ChildStackLayout" x:FieldModifier="public" />
        </Frame>        
    </ContentView.Content>
</ContentView>

Here's how I am utilizing it (MainPage.xaml)

<controls:DialogView>
    <controls:DialogView.ChildStackLayout>
        <!--Here I want to add controls in my Custom Control-->
        <Label Text="Hello, this is a custom dialog" />
    </controls:DialogView.ChildStackLayout>
</controls:DialogView>

But ChildStackLayout is not accessible in other Page

@Jason, how? by declaring it in C# Code Behind? I am trying but it's not working either. How can it be done? — Junaid Pathan, Apr 05 '22 at 00:26
In code behind, create a `BindableProperty TextProperty` and corresponding `public string Text { get { ... } set { ... } }` with the `string` being shown in `Label.Text`. Then you can reference that property. (Instead of trying to access the UI `Label` directly.) [This answer](https://stackoverflow.com/a/53559165/199364) might be helpful - though it isn't exactly the same as what you are doing. — ToolmakerSteve, Apr 05 '22 at 03:04

score 1 · Answer 1 · answered Apr 05 '22 at 03:42

You cannot add new control into the custom control's child layout control in the xaml by the name property directly.

At first, you can add new control in the page.cs. Such as:

 //declare the content view in the xaml
 <control:CustomView x:Name="customview">
 //add children control
 customview.ChildStackLayout.Children.Add(new Label() { Text = "hello"});

score 0 · Accepted Answer · answered May 05 '22 at 22:30

Add a public property in the Code behind of the Custom control, say DialogContent (instead of ChildStackLayout) as in your case. Now add a BindableProperty to Bind it. And then use its Property Changed.

In C# Code Behind of the Custom control:

public partial class DialogView : Dialog // Dialog inherits ContentView
{
    public Layout DialogContent { get => (Layout)GetValue(DialogContentProperty); set => SetValue(DialogContentProperty, value); }

    public static readonly BindableProperty DialogContentProperty = BindableProperty.Create(nameof(DialogContent), typeof(Layout), typeof(DialogView), propertyChanged: DialogContentPropertyChanged);

    public static void DialogContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (DialogView)bindable;
        control.dialog.Content = newValue as Layout;
    }
}

DialogContent is of type Layout because usually a dialog will contain more than one element hence you can use any Layout like StackLayout or some other Layout. And all layouts inherit from Layout, hence, you can use any Layout for the content of the dialog.

Now when you want to use this Custom Control, you can nest its content within the parent in xaml just as you wanted to do.

<controls:DialogView>
    <controls:DialogView.DialogContent>
        <StackLayout Padding="10" Spacing="10">
            <Label Text="Hello, this is a custom dialog" />
            <Button Text="OK" />
        </StackLayout>
    </controls:DialogView.DialogContent>
</controls:DialogView>

How to access fields or controls of Custom View from another Page's XAML in Xamarin Forms?

2 Answers2