WPF Why my scrollview with panning mode is blocking button.touchdown inside it?

Question

The problem i'm investigating is about Button.Touchdown/up triggers on a Button with a style. OK this buttons are inside a ScrollViewer, this one has a panning-mode property and it's enabled. The situation is when i test my aplication with a TouchScreen and i try to drag with my finger the panel, it moves and then i touch any button the trigger TouchDown doesn't show the style effects.

If i set panning-mode to false, then i try again to press the button it shows the style effects.

The question is. Is any solution for this panning-mode issue?

Look my Code:

WindowApp.xaml

    <Window x:Class="WPFScrollviewButtonsEffects.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/webcontent/StylesPanelServices.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" PanningMode="Both">
            <StackPanel Width="500" Height="500">
                <StackPanel Orientation="Horizontal" Margin="20,15,0,15">
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="20,15,0,15">
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="20,15,0,15">
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="20,15,0,15">
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="20,15,0,15">
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                    <Button Height="34" Width="120" Content="Button1"/>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

WindowApp.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFScrollviewButtonsEffects
{
    /// <summary>
    /// Lógica de interacción para MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

StylesPanelServices.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="AzulOscuro" Color="#FF005E91"/>
    <Style TargetType="{x:Type Button}">
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="FontWeight" Value="Light"/>
        <Setter Property="FontStyle" Value="Normal"/>
        <Setter Property="Margin" Value="15,0,15,0"/>
        <Setter Property="MinHeight" Value="55"/>
        <Setter Property="TextBlock.TextAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="Storyboard1">
                            <ColorAnimation 
                                Storyboard.TargetName="btnborder"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"                                        
                                To="#FF005E91" Duration="00:00:0.08"/>
                            <DoubleAnimation BeginTime="0" Duration="0" Storyboard.TargetProperty="(Effect).Opacity" Storyboard.TargetName="imagen" To="1"/>
                        </Storyboard>
                        <Storyboard x:Key="Storyboard2">
                            <ColorAnimation 
                                Storyboard.TargetName="btnborder"
                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"                                        
                                To="White" Duration="00:00:0.08"/>
                            <DoubleAnimation BeginTime="0" Duration="0" Storyboard.TargetProperty="(Effect).Opacity" Storyboard.TargetName="imagen" To="0"/>
                        </Storyboard>
                        <Storyboard x:Key="GlowOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Effect).Opacity" Storyboard.TargetName="imagen">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="GlowOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Effect).Opacity" Storyboard.TargetName="imagen">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid>
                        <Border x:Name="btnborder" Background="#FFFFFFFF" CornerRadius="10" BorderBrush="#FF009ADA" BorderThickness="1">
                            <ContentPresenter x:Name="imagen" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,2,5,3">
                                <ContentPresenter.Effect>
                                    <DropShadowEffect ShadowDepth="0" Color="White" Opacity="0.9" BlurRadius="10"/>
                                </ContentPresenter.Effect>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Answer 1

Use this style, Please set Images.

<Style x:Key="DigitButtonStyle111" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Image x:Name="PinButton" Source="pack://application:,,,/V-Coles;component/Resources/Images/pin_key.png" Stretch="Fill"/>
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger SourceName="PinButton"  RoutedEvent="Button.PreviewMouseDown">
                        <BeginStoryboard  >
                            <Storyboard >
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PinButton" Storyboard.TargetProperty="Source">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="pack://application:,,,/V-Coles;component/Resources/Images/cancle_pin_inpress.png" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <Trigger Property="IsDefaulted" Value="true">

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button x:Name="SecondButton" Width="62" Height="63" BorderBrush="Transparent" Style="{StaticResource ButtonStyle11}" PreviewTouchDown="FirstButton_TouchDown" PreviewTouchUp="FirstButton_TouchUp"  PreviewMouseDown="FirstButton_PreviewMouseDown" PreviewMouseUp="FirstButton_PreviewMouseUp" Canvas.Left="72" Canvas.Top="121"  FontWeight="Bold" FontSize="25" Content="2" Command="{Binding Path=DigitButton}" CommandParameter="{Binding ElementName=SecondButton}">
                <Button.Background>
                    <ImageBrush ImageSource="pack://application:,,,/V-Coles;component/Resources/Images/pin_key.png"/>
                </Button.Background>
            </Button>

private void FirstButton_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    ImageBrush brush1 = new ImageBrush();
    brush1.Stretch = Stretch.Fill;
    BitmapImage image = new BitmapImage(new Uri("pack://application:,,,/V;component/Resources/Images/cancle_pin_inpress.png"));
    brush1.ImageSource = image;
    (sender as Button).Background = brush1;
    (sender as Button).Foreground = Brushes.White;
}

private void FirstButton_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
    ImageBrush brush1 = new ImageBrush();
    BitmapImage image = new BitmapImage(new Uri("pack://application:,,,/V;component/Resources/Images/pin_key.png"));
    brush1.ImageSource = image;
    (sender as Button).Background = brush1;
    (sender as Button).Foreground = Brushes.Black;
}

private void FirstButton_TouchDown(object sender, TouchEventArgs e)
{
    ImageBrush brush1 = new ImageBrush();
    brush1.Stretch = Stretch.Fill;
    BitmapImage image = new BitmapImage(new Uri("pack://application:,,,/V;component/Resources/Images/cancle_pin_inpress.png"));
    brush1.ImageSource = image;
    (sender as Button).Background = brush1;
    (sender as Button).Foreground = Brushes.White;
}

private void FirstButton_TouchUp(object sender, TouchEventArgs e)
{
    ImageBrush brush1 = new ImageBrush();
    BitmapImage image = new BitmapImage(new Uri("pack://application:,,,/V;component/Resources/Images/pin_key.png"));
    brush1.ImageSource = image;
    (sender as Button).Background = brush1;
    (sender as Button).Foreground = Brushes.Black;
}