How To add Child View to a Common View Xamarin Froms

Question

I am trying to embed child view to my common parent view as follows

my parent view

<Frame CornerRadius="8"
       Padding="0,5,0,5"
       BackgroundColor="Blue">

        <Grid x:Name="SheetGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Text="Test Title"
                     Grid.Row="0"
                     HeightRequest="5"
                     WidthRequest="50"
                     BackgroundColor="Red"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />     
        </Grid>
    </Frame>

I need to use this as a common view that title will not change but the body getting change.

my usage in Mainpage like below

<samplepopup:CommonPopUpView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red" >

            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" HeightRequest="200" BackgroundColor="Aqua"
                     x:Name="TestView">
                <Label Text="testing"/>
            </StackLayout>

        </samplepopup:CommonPopUpView>

So i need to add the "TestView" as a child of my "Common View"

how can i do that? Any Help really appreciate.

Answer 1

For it to work you will need to do a couple of changes to your code.

In your parentView (CommonPopUpView.xaml) add a container that will hold your Body, it can be something like this:

<ContentView x:Name="BodyContentView"
             Grid.Row="1" />    
</ContentView>

With your existing code it should look like this:

<Frame CornerRadius="8"
    Padding="0,5,0,5"
    BackgroundColor="Blue">

    <Grid x:Name="SheetGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Text="Test Title"
                    Grid.Row="0"
                    HeightRequest="5"
                    WidthRequest="50"
                    BackgroundColor="Red"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />

        <ContentView x:Name="BodyContentView"
                        Grid.Row="1">
        </ContentView>                    
    </Grid>
</Frame>

In the code behind of that file (CommonPopUpView.xaml.cs), you will need a BindableProperty:

public static readonly BindableProperty BodyContentProperty = BindableProperty.Create(
    nameof(BodyContent),
    typeof(View),
    typeof(CommonPopUpView),
    null,
    BindingMode.OneWay,
    null,
    OnBodyContentChanged);

public View BodyContent
{
    get => (View)GetValue(BodyContentProperty);
    set => SetValue(BodyContentProperty, value);
}

private static void OnBodyContentChanged(BindableObject bindable, object oldValue, object newValue)
{
    if (bindable is CommonPopUpView myCommonPopUpView)
    {
        myCommonPopUpView.BodyContentView.Content = (View) newValue;
    }
}

If you want to get more info about BindableProperties you can read here

In that same file, you will also need to add the ContentProperty annotation at the class level. It should look like this:

[ContentProperty("BodyContent")]
public partial class CommonPopUpView : ContentView

That last part is important to prevent your CommonPopUpView Content to be overridden making sure that any new content will be set into the Container you prepared (BodyContentView).

Now you just need to use it:

<controls:CommonPopUpView Margin="6,25">
    <Grid Padding="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Text="Stack Overflow"
                FontSize="18"
                TextColor="White"
                FontAttributes="Bold" />
        <Label Text="stack.overflow@internet.com"
                FontSize="12"
                TextColor="WhiteSmoke"
                Grid.Row="1" />
    </Grid>
</controls:CommonPopUpView>

<controls:CommonPopUpView Margin="6,15">
    <Grid Padding="15">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Source="xamarin_small"
                WidthRequest="100"
                HeightRequest="100"
                HorizontalOptions="Center" />

        <Image Source="microsoft.jpg"
                WidthRequest="100"
                HeightRequest="100"
                Grid.Column="1"
                HorizontalOptions="Center" />
    </Grid>            
</controls:CommonPopUpView>

Any content that you set inside your CommonPopUpView CustomView will be set only in the Body Container keeping the other controls/views you have defined.

Hope this helps.-

Answer 2

You can read document about Instantiate a custom control.

First, you should add a new ContentView let's call it MyCustomView to your project:

public partial class MyCustomView : ContentView
{
    public MyCustomView()
    {
        InitializeComponent();
    }
}

In xaml, add your code there:

  <ContentView.Content>
        <samplepopup:CommonPopUpView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red"
                                 >

            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" HeightRequest="200" BackgroundColor="Aqua"
                     x:Name="TestView">
                <Label Text="testing"/>
            </StackLayout>

        </samplepopup:CommonPopUpView>
    </ContentView.Content>

When you want to use this view in your parent view, declare a reference to the custom view namespace in your parent page and then use it in the xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:CustomPopUp="clr-namespace:App222"
             mc:Ignorable="d"
             x:Class="App222.MainPage">



    <Frame CornerRadius="8"
       Padding="0,5,0,5"
       BackgroundColor="Blue">

        <Grid x:Name="SheetGrid">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Text="Test Title"
                     Grid.Row="0"
                     HeightRequest="5"
                     WidthRequest="50"
                     BackgroundColor="Red"
                     HorizontalOptions="Center"
                     VerticalOptions="Center"
                     />

            <CustomPopUp:MyCustomView Grid.Row="1"/>

        </Grid>
    </Frame>

</ContentPage>