The filter button

The filter button allows us to toggle the state of the list to show only active to-do items and all to-do items. Let's style it to make it stand out a bit in the layout:

1. Find the filter button.
2. Make the following changes:

<Button Style="{StaticResource FilterButton}"
        Text="{Binding FilterText, StringFormat='Filter: {0}'}" 
        BackgroundColor="{Binding ShowAll, Converter={StaticResource 
 statusColorConverter}}"
        TextColor="Black"
        Command="{Binding ToggleFilter}">
             
 <Button.Triggers>
 <DataTrigger TargetType="Button" Binding="{Binding ShowAll}" 
 Value="True">
  <Setter Property="TextColor" Value="White" />
  </DataTrigger>
 </Button.Triggers>
</Button>

The style is applied using a StaticResource. Anything defined in a resource dictionary, either in the App.xaml file or in the local XAML file, is accessible through it. We then set the BackgroundColor, based on the ShowAll property of the MainViewModel, and the TextColor to Black.

The Button.Triggers node is a useful feature. We can define a number of types of triggers that fire when a certain criteria is met. In this case, we use a data trigger that checks whether the value of ShowAll changes to true. If it does, we set the TextColor to white. The coolest part is that when ShowAll becomes false again, it switches back to whichever color it was before.