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

Answer 1

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"});

Answer 2

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>