Creating a custom control with a View type binding

jocontejoconte Member ✭✭
edited June 13 in Xamarin.Forms

Hello,

In advance, sorry if it was already asked but I didn't find anything on the forum.

In my Xamarin.Forms application, I often repeat this :

<Frame Padding="0" Margin="5,5,5,5" OutlineColor="LightGray" CornerRadius="10" BackgroundColor="White"> <StackLayout > <Frame OutlineColor="LightGray" BackgroundColor="LightGray"> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="MyTitle" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="White" FontAttributes="Bold" /> </StackLayout> </Frame> <StackLayout Margin="10,10,10,10" BackgroundColor="White"> <!-- Content --> </StackLayout> </StackLayout> </Frame>

I would like a way to use it like this :

<controls:MyCustomComponent OutlineColor="LightGray" CornerRadius ="10" BackgroundColor="White" Text="MyTitle"> <!-- My content, what ever I want --> </controls:MyCustomComponent>

I tried something but I can't add content :

My custom control :
<Frame x:Name="frame1" Padding="0" Margin="5,5,5,5" OutlineColor="#47abe0" CornerRadius="10" BackgroundColor="White"> <StackLayout > <Frame x:Name="frame2" OutlineColor="#47abe0" BackgroundColor="#47abe0"> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label x:Name="title" Text="MyTitle" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="White" FontAttributes="Bold" /> </StackLayout> </Frame> <StackLayout Margin="10,10,10,10" BackgroundColor="White"> <!-- Content --> </StackLayout> </StackLayout> </Frame>
Code behind :
`

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyCustomControl : ContentView
{

    public Color ColorFrame { get; set; }

    public static readonly BindableProperty ColorFrameProperty = BindableProperty.Create(
                                                     propertyName: "ColorFrame",
                                                     returnType: typeof(Color),
                                                     declaringType: typeof(MyCustomControl),
                                                     defaultValue: Color.Aqua,
                                                     defaultBindingMode: BindingMode.TwoWay,
                                                     propertyChanged: ColorFramePropertyChanged);
    public string TitleText { get; set; }

    public static readonly BindableProperty TitleTextProperty = BindableProperty.Create(
                                                     propertyName: "TitleText",
                                                     returnType: typeof(string),
                                                     declaringType: typeof(MyCustomControl),
                                                     defaultValue: "",
                                                     defaultBindingMode: BindingMode.TwoWay,
                                                     propertyChanged: TitleTextPropertyChanged);
    private static void TitleTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyCustomControl)bindable;
        control.title.Text = newValue.ToString();
    }

    private static void ColorFramePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyCustomControl)bindable;
        control.frame1.OutlineColor = (Color)newValue;
        control.frame2.OutlineColor = (Color)newValue;
        control.frame2.BackgroundColor = (Color)newValue;
    }


    public MyCustomControl()
    {
        InitializeComponent();
    }


}

`

And my page where I call my custom control :
<StackLayout> <custom:MyCustomControl BackgroundColor="White" TitleText="BASKETBALL" ColorFrame="Black"/> </StackLayout>

I don't know where to put my content, I want it to be whatever I want.
Is it possible ?

Thanks in advance.

Posts

  • jocontejoconte Member ✭✭

    I tried to add a binding to a View type but without success. Even though everything seems ok while debugging :

    My custom control :
    <Frame x:Name="frame1" Padding="0" Margin="5,5,5,5" OutlineColor="#47abe0" CornerRadius="10" BackgroundColor="White" HeightRequest="500"> <StackLayout > <Frame x:Name="frame2" OutlineColor="#47abe0" BackgroundColor="#47abe0"> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label x:Name="title" Text="MyTitle" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="White" FontAttributes="Bold" /> </StackLayout> </Frame> <StackLayout Margin="10,10,10,10" BackgroundColor="White"> <StackLayout x:Name="stackLayoutContent"> <Label Text="I don't believe anymore" TextColor="Black" /> </StackLayout> </StackLayout> </StackLayout> </Frame>

    What I added to my code behind :
    `
    public View MyContentView { get; set; }

        public static readonly BindableProperty MyContentViewProperty = BindableProperty.Create(
                                                         propertyName: "MyContentView",
                                                         returnType: typeof(View),
                                                         declaringType: typeof(MyCustomControl),
                                                         defaultValue: new StackLayout(),
                                                         defaultBindingMode: BindingMode.TwoWay,
                                                         propertyChanged: MyContentViewPropertyChanged);
        private static void MyContentViewPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (MyCustomControl)bindable;
            control.stackLayoutContent = (StackLayout)newValue;
        }
    

    `

    When I debug everything seems ok (Title and Color are working just fine) but the stacklayout is not updated.
    On my phone, only the Title and the color changed, not the StackLayout.

    I tried with a StackLayout instead of a View, same error. Here I just put a View to have a more abstract solution.
    I tried to rebuild the solution.

    Thanks in advance for your help.

  • jocontejoconte Member ✭✭
    Any help ? Thanks
Sign In or Register to comment.