In my previous post I provided a demonstrable way that visual states could be used in a Xamarin.Forms application to adjust layout. Whilst I showed how this can be used on a page to show/hide a piece of text, it can also be used to define the different states of a button. Before I get onto using visual states within a button, I’ll first show how a ContentView can be adapted to provide the basic button behaviour, whilst allowing both Content and ControlTemplate to be defined. Ok, perhaps that doesn’t make sense but let’s walk through an example:
<controls:ContentButton Pressed=”ToggleButtonPressed”>
<StackLayout>
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
</StackLayout>
</controls:ContentButton>
In this code, I can add any XAML elements as Content within the ContentButton tags. The ContentButton raises a Pressed event, instead of a Click or Clicked event, to which an event handler can be attached. In the next code snippet, I’ve overridden the default ControlTemplate, wrapping the ContentPresenter in a Grid which has a yellow background.
<controls:ContentButton VerticalOptions=”Center”
x_Name=”DisabledButton”
HorizontalOptions=”Center”>
<ContentView.ControlTemplate>
<ControlTemplate>
<Grid BackgroundColor=”Yellow”>
<ContentPresenter x_Name=”ContentPresenter”
Content=”{TemplateBinding Content}” />
</Grid>
</ControlTemplate>
</ContentView.ControlTemplate>
<StackLayout>
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
<Label Text=”Hello!” />
</StackLayout>
</controls:ContentButton>
Overriding the ControlTemplate demonstrates an easy way to override the style of the button in a way that can be replicated across all instances of the button in an application.
Let’s take a look at the inner workings of the ContentButton, in particular the default ContentTemplate which is used to define different visual states of the button. In this case there are four visual states: Normal, PointerOver, Pressed and Disabled.
<ContentView.ControlTemplate>
<ControlTemplate>
<Grid x_Name=”RootGrid” BackgroundColor=”{TemplateBinding BackgroundColor}”>
<local:VisualStateManager.VisualStateGroups>
<x:Array Type=”{x:Type local:VisualStateGroup}”>
<local:VisualStateGroup Name=”CommonStates”>
<local:VisualState Name=”Normal” />
<local:VisualState Name=”PointerOver”>
<local:VisualState.Setters>
<local:Setter Value=”#33000000″ Target=”Background.BackgroundColor” />
</local:VisualState.Setters>
</local:VisualState>
<local:VisualState Name=”Pressed”>
<local:VisualState.Setters>
<local:Setter Value=”#66000000″ Target=”RootGrid.BackgroundColor” />
</local:VisualState.Setters>
</local:VisualState>
<local:VisualState Name=”Disabled”>
<local:VisualState.Setters>
<local:Setter Value=”#33000000″ Target=”Background.BackgroundColor” />
</local:VisualState.Setters>
</local:VisualState>
</local:VisualStateGroup>
</x:Array>
</local:VisualStateManager.VisualStateGroups>
<BoxView BackgroundColor=”Transparent” x_Name=”Background” />
<ContentPresenter x_Name=”ContentPresenter” Content=”{TemplateBinding Content}” />
</Grid>
</ControlTemplate>
</ContentView.ControlTemplate>
In this code you can see how the visual states (which I introduced in my previous post) are used to adjust the background colour of the BoxView that sits behind the Content of the button.
The sample project that demonstrates the ContentButton can be downloaded here