Binding to custom control button command

Question

Hello, I have custom control having multiple buttons. How can i use button's command in page?

e.g.
<Grid BackgroundColor="WhiteSmoke">

           <Button
                    Grid.Row="0"
                    Command="{Binding SignOutCommand}"
                    Text="Sign Out" />
            <BoxView
                    Grid.Row="1"
                    BackgroundColor="Black"
                    HeightRequest="1" />
            <Button
                    Grid.Row="2"
                    Command="{Binding GoToProfileCommand}"
                    Text="Settings" />
            <BoxView
                    Grid.Row="3"
                    BackgroundColor="Black"
                    HeightRequest="1" />
        </Grid>

Apparently I am copy pasting above view on all pages in need and applying similar ICommand name. I am looking forward if I can achieve this in XF to make XAML more readable.

<templates:LoginPageTemplateView
SignoutCommand = {Binding SignoutCommand}
SettingsCommand = {Binding SettingsCommand}
/>

Answer 1

Welcome to our Microsoft Q&A platform!

In your case you could use BindableProperty .

in 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="xxx.LoginPageTemplateView"
             x:Name="CustomView"  //set name of custom control            
             >


    <Grid BackgroundColor="WhiteSmoke">

        <Button
                     Grid.Row="0"
                     Command="{Binding Source={x:Reference CustomView}, Path=SignOutCommand}"
                     Text="Sign Out" />
        <BoxView
                     Grid.Row="1"
                     BackgroundColor="Black"
                     HeightRequest="1" />
        <Button
                     Grid.Row="2"
                     Command="{Binding Source={x:Reference CustomView}, Path=GoToProfileCommand}"
                     Text="Settings" />
        <BoxView
                     Grid.Row="3"
                     BackgroundColor="Black"
                     HeightRequest="1" />
    </Grid>

</ContentView>



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

        public static BindableProperty SignOutCommandProperty =
            BindableProperty.Create(nameof(SignOutCommand), typeof(ICommand), typeof(LoginPageTemplateView));

        public ICommand SignOutCommand
        {
            get => (ICommand)GetValue(SignOutCommandProperty);
            set => SetValue(SignOutCommandProperty, value);
        }

        public static BindableProperty GoToProfileCommandProperty =
            BindableProperty.Create(nameof(GoToProfileCommand), typeof(ICommand), typeof(LoginPageTemplateView));

        public ICommand GoToProfileCommand
        {
            get => (ICommand)GetValue(GoToProfileCommandProperty);
            set => SetValue(GoToProfileCommandProperty, value);
        }

    }

And now you could binding it to the command in your Viewmodel in ContentPage like

<templates:LoginPageTemplateView
 SignoutCommand = {Binding SignoutCommand}
 GoToProfileCommand= {Binding GoToProfileCommand}
 />

Best Regards,

Lucas Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.