Xamarin.Forms default control templates

Question

I would like to adjust the default controltemplate of a Button. In WPF i would just use blend to see the default controltemplate but for Xamarin.Forms i can not use blend.

Also in the App.xaml file i see a reference to

<ResourceDictionary Source="Resource Dictionaries/StandardStyles.xaml"/>

but i do not find the StandardStyles.xaml file so i am out of luck there as well.

And on the Xamarin site i do not find the default controltemplates neither. So where/how can i find the default controltemplates for the Xamarin.Forms controls?

Answer 1

At this point, Xamarin.Forms doesn't provide templating support for buttons - so there is no default template(s) to refer (as we do in WPF) or ControlTemplate property in Button. It simply renders the platform version of button in target platform.

Control templates usually are supported by controls that have a Content property. A good example would be ContentView. You can write a custom button control while extending a ContentView, while providing templating support, and use ContentPresenter to render the associated button.

EDIT 1 - Custom button control with templated support

For example:

public class TemplatedButton : ContentView
{
    public TemplatedButton()
    {
        var button = new Button();
        button.SetBinding(Button.TextColorProperty, new Binding(nameof(TextColor), source: this));
        button.SetBinding(BackgroundColorProperty, new Binding(nameof(BackgroundColor), source: this));

        button.SetBinding(IsEnabledProperty, new Binding(nameof(IsEnabled), source: this));
        button.SetBinding(Button.TextProperty, new Binding(nameof(Text), source: this));

        button.SetBinding(Button.CommandProperty, new Binding(nameof(Command), source: this));
        button.SetBinding(Button.CommandParameterProperty, new Binding(nameof(CommandParameter), source: this));

        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, new Binding(nameof(Command), source: this));
        tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, new Binding(nameof(CommandParameter), source: this));
        GestureRecognizers.Add(tapGestureRecognizer);

        Content = button;
    }

    public static readonly BindableProperty TextProperty =
        BindableProperty.Create(
            "Text", typeof(string), typeof(TemplatedButton),
            defaultValue: default(string));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create(
            "Command", typeof(ICommand), typeof(TemplatedButton),
            defaultValue: new Command((obj) => System.Diagnostics.Debug.WriteLine("TemplatedButton Tapped")));

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public static readonly BindableProperty CommandParameterProperty =
        BindableProperty.Create(
            "CommandParameter", typeof(object), typeof(TemplatedButton),
            defaultValue: default(object));

    public object CommandParameter
    {
        get { return (object)GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    public static readonly BindableProperty TextColorProperty =
        BindableProperty.Create(
            "TextColor", typeof(Color), typeof(TemplatedButton),
            defaultValue: default(Color));

    public Color TextColor
    {
        get { return (Color)GetValue(TextColorProperty); }
        set { SetValue(TextColorProperty, value); }
    }
}

Sample usage:

<!-- App/Page resources -->
<ResourceDictionary>
    <ControlTemplate x:Key="ThreeBorderBtn">
        <Grid RowSpacing="0" ColumnSpacing="0" Margin="0">
            <BoxView Margin="5" BackgroundColor="Purple" />
            <BoxView Margin="10" BackgroundColor="Green" />
            <BoxView Margin="15" BackgroundColor="Red" />
            <ContentPresenter Margin="20" />
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

<!-- Control usage -->
<!-- make sure to register xmlns:local namespace --> 
<local:TemplatedButton 
    HeightRequest="100"
    Text="Button Caption!" 
    TextColor="Teal" 
    Command="{Binding ClickCommand}"
    BackgroundColor="White"
    ControlTemplate="{StaticResource ThreeBorderBtn}" />