CODEWITHSUNDEEP
xamarinxamarin.forms
Jules
Jules

Reputation: 7766

Xamarin, custom control with layout with accepts bindable content at a specific location

I need to create a standard layout which I can use on a number of pages, but pass in content which is shown inside... I'm having limited success...

Here's how I'm calling the custom control...

<?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:control="clr-namespace:myApp"
             x:Class="myApp.MainPage">
    <StackLayout>

        <control:CustomPopupLayoutControl 
             BackgroundColor="LightGreen">

            <control:CustomPopupLayoutControl.Content>

                <Button Text="Hello"  />
                <!-- lots of other controls, buttons, labels etc, layout -->
            </control:CustomPopupLayoutControl.Content>

        </control:CustomPopupLayoutControl>

    </StackLayout>
</ContentPage>

So you can see here I wan't to display some content..

Here's my custom control...

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myApp.CustomPopupLayoutControl"
             x:Name="CustomPopupLayouts">
    <ContentView.Content>
        <StackLayout BackgroundColor="LightBlue" Margin="30">

            <Button Text="Close" /><!-- important-->
            <!-- lots of other layout -->
            <StackLayout BackgroundColor="Red" x:Name="Inner">

            </StackLayout>
         </StackLayout>
    </ContentView.Content>
</ContentView>

So I'd like to show my hello button inside the Inner stack layout, I'll also need binding to work...

So the final page should look like...

<page>

  <StackLayout BackgroundColor="LightBlue" Margin="30">
    <Button Text="Close" /><!-- important-->

    <StackLayout BackgroundColor="Red">
      <button text="Hello">
    </StackLayout>
  <StackLayout>

</page>

Upvotes: 1

Views: 173

Answers (2)

Jules
Jules

Reputation: 7766

I've found a solution :)

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myapp.CustomPopupLayoutControl"
             x:Name="CustomPopupLayouts">
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <StackLayout BackgroundColor="LightBlue" Margin="30">

                <Frame CornerRadius="5" Margin="20" HasShadow="False" 
                       BackgroundColor="Red">
                    <StackLayout>
                        <Button Text="Close" 
                           Command="{TemplateBinding 
                           Parent.BindingContext.NavigateCommand}" />
                        <!-- important-->

                        <ContentPresenter />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

.

<?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:control="clr-namespace:myapp"
             x:Class="myapp.MainPage">
    <StackLayout>

        <control:CustomPopupLayoutControl BackgroundColor="LightGreen">

            <StackLayout>
                <Button Text="Hello" Command="{Binding NavigateCommand}" />

                <Button Text="Goodbye"  />
            </StackLayout>
        </control:CustomPopupLayoutControl>

    </StackLayout>
</ContentPage>

Upvotes: 1

Lucas Zhang
Lucas Zhang

Reputation: 18861

Since you had defined a Button in Custom Control , You just need to pass the Title that you want to display on the Button from ContentPage to Custom Control.

in CustomPopupLayoutControl.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myApp.CustomPopupLayoutControl"
             x:Name="CustomPopupLayouts">
    <ContentView.Content>
        <StackLayout BackgroundColor="LightBlue" HeightRequest="450" Margin="30">

            <Button HeightRequest="150" WidthRequest="80" Text="{Binding Source={x:Reference CustomPopupLayouts}, Path=ButtonTitle}" /><!-- important-->

            <StackLayout BackgroundColor="Red" HeightRequest="300" x:Name="Inner">

            </StackLayout>
         </StackLayout>
    </ContentView.Content>
</ContentView>

in CustomPopupLayoutControl.xaml.cs

Define a bindable property

public static BindableProperty ButtonTitleProperty =
            BindableProperty.Create(nameof(ButtonTitle), typeof(string), typeof(CustomPopupLayoutControl),string.Empty);

        public string ButtonTitle
        {
            get => (string)GetValue(ButtonTitleProperty);
            set => SetValue(ButtonTitleProperty, value);
        }

in ContentPage

You could set the title of button directly or use data binding .

<control:CustomPopupLayoutControl ButtonTitle = "Hello World!" BackgroundColor="LightGreen" /  >

Upvotes: 1

Related Questions