title: Custom buttons in WP8.1 XAML apps
body: <p>I'm trying to create a "hover" effect when the user touches their finger down on to a button. When that happens I would like to background color of the button to change - and then when they move it away it changes back to the original color.</p>
  
  <p>My code for the whole button is below</p>
  
  <pre><code>&lt;Button x:Name="btnService"  HorizontalAlignment="Center" Tag="{Binding Tag}" Command="{Binding DataContext.ConnectServiceCommand, ElementName=LayoutRoot}" CommandParameter="{Binding Tag}"&gt;
                              &lt;Button.Template&gt;
                                  &lt;ControlTemplate&gt;
  
                                      &lt;Grid&gt;
                                          &lt;Grid.ColumnDefinitions&gt;
                                              &lt;ColumnDefinition Width="*" /&gt;
                                              &lt;ColumnDefinition Width="350" /&gt;
                                              &lt;ColumnDefinition Width="*" /&gt;
                                          &lt;/Grid.ColumnDefinitions&gt;
  
                                          &lt;Grid.RowDefinitions&gt;
                                              &lt;RowDefinition Height="64" /&gt;
                                              &lt;RowDefinition Height="10" /&gt;
                                          &lt;/Grid.RowDefinitions&gt;
  
                                          &lt;Border IsTapEnabled="True" CornerRadius="0" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1"&gt;
  
                                              &lt;TextBlock Style="{StaticResource BodyTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource accentForeground}" Text="{Binding NameUpper}" /&gt;
  
                                              &lt;Border.Style&gt;
                                                  &lt;Style TargetType="Border"&gt;
                                                      &lt;Setter Property="Background" Value="{StaticResource bodyAccent}" /&gt;
  
                                                  &lt;/Style&gt;
                                              &lt;/Border.Style&gt;
                                          &lt;/Border&gt;
  
                                      &lt;/Grid&gt;
  
  
                                  &lt;/ControlTemplate&gt;
                              &lt;/Button.Template&gt;
                          &lt;/Button&gt;
  </code></pre>
  
  <p>What I can't get working is the trigger as it doesn't seem to exist - I know normal WPF XAML apps have something like <code>&lt;Trigger Property="Border.IsMouseOver" Value="True"&gt;</code></p>
  
  <p>Is there something like this for Windows Phone 8.1 apps?</p>
  
  <p>Edit - Code added with VSManager</p>
  
  <pre><code>&lt;Button x:Name="btnService"  HorizontalAlignment="Center" Tag="{Binding Tag}" Command="{Binding DataContext.ConnectServiceCommand, ElementName=LayoutRoot}" CommandParameter="{Binding Tag}"&gt;
                              &lt;Button.Template&gt;
                                  &lt;ControlTemplate&gt;
  
                                      &lt;Grid&gt;
                                          &lt;Grid.ColumnDefinitions&gt;
                                              &lt;ColumnDefinition Width="*" /&gt;
                                              &lt;ColumnDefinition Width="350" /&gt;
                                              &lt;ColumnDefinition Width="*" /&gt;
                                          &lt;/Grid.ColumnDefinitions&gt;
  
                                          &lt;Grid.RowDefinitions&gt;
                                              &lt;RowDefinition Height="64" /&gt;
                                              &lt;RowDefinition Height="10" /&gt;
                                          &lt;/Grid.RowDefinitions&gt;
  
                                          &lt;Border IsTapEnabled="True" CornerRadius="0" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1"&gt;
  
                                              &lt;TextBlock Style="{StaticResource BodyTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource accentForeground}" Text="{Binding NameUpper}" /&gt;
  
                                              &lt;Border.Style&gt;
                                                  &lt;Style TargetType="Border"&gt;
                                                      &lt;Setter Property="Background" Value="{StaticResource bodyAccent}" /&gt;
  
                                                  &lt;/Style&gt;
  
                                              &lt;/Border.Style&gt;
  
                                          &lt;/Border&gt;
  
                                      &lt;/Grid&gt;
  
  
                                  &lt;/ControlTemplate&gt;
                              &lt;/Button.Template&gt;
                              &lt;VisualStateManager.VisualStateGroups&gt;
                                  &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                      &lt;VisualState x:Name="Pressed"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;PointerDownThemeAnimation Storyboard.TargetName="Grid"/&gt;
                                              &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"&gt;
                                                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bodyAccentAlt}"/&gt;
                                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                  &lt;/VisualStateGroup&gt;
                              &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;/Button&gt;
  </code></pre>