Add touch animation on button

[JeanPhilippeKernel]

the idea is to add animation effect like when you click on android button control

[h82258652]

seems it should be in visual state.

[insinfo]

@JeanPhilippeKernel What you mean is this?

[JeanPhilippeKernel]

Yes , exactly @insinfo , personnally these bit animation give a live to the UI of app , it's cause of these kind animation people of like Android and iOS UI than windows, if xaml standard adopt them as default, it'll be great !

[insinfo]

@JeanPhilippeKernel For this to be possible very easily, the XAML Standard has to support SVG with SMIL natively, help me on my post on SVG support in XAML, click +1, Visit this link Native support of SVG inside XAML

<Button>
<SVG >
<rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
  <animate 
    xlink:href="#my-rect"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />
</rect>
</SVG>
</Button>

[birbilis]

Don't see where the problem is in doing with Xaml with EventTrigger and StoryBoard

[birbilis]

Btw, some users (including me) hate too much animation. Gets tiring after a while

[insinfo]

@birbilis The advantage of XAML to natively support SVG with SMIL is that you as a developer would not have to worry about these icons and animations, the design or animator could do that in other software and deliver SVGs to you. In addition to being able to search on the internet SVG animated icons ready to use.

Like this:

<Button>
<SVG >
<rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
  <animate 
    xlink:href="#my-rect"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />
</rect>
</SVG>
</Button>

or like this:

<Button>
    <SVG URI="icon.svg">
    </SVG>
</Button>

[dotMorten]

I'm guessing this is out of scope as the faq already clearly states the standard defines the markup for a button but the platform should define the look and feel to match that platform. But if visual states becomes part of the standard you could accomplish this yourself

[insinfo]

@dotMorten Do you get it wrong, this demonstration of syntax is just an overview of my proposing is. It's not the final syntax, and by no means do I want to hurt the syntax of XAML. This below would be the most correct syntax:

<Style TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
              <SVG URI="Normal.svg">
              </SVG>
            </VisualState>
            <VisualState x:Name="PointerOver">
               <SVG URI="PointerOver.svg">
               </SVG>
            <VisualState x:Name="Pressed">
               <SVG>
                <rect id="my-rect" r="30" cx="50" cy="50" fill="orange" />
                <animate 
                    xlink:href="#my-rect"
                    attributeName="cx"
                    from="50"
                    to="450" 
                    dur="1s"
                    begin="click"
                    fill="freeze" />
                </rect>
              </SVG>
            </VisualState>
            <VisualState x:Name="Disabled">
              <SVG URI="Disabled.svg">
                </SVG>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter x:Name="ContentPresenter"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Content="{TemplateBinding Content}"
                          ContentTransitions="{TemplateBinding ContentTransitions}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Padding="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          AutomationProperties.AccessibilityView="Raw"/>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

[birbilis]

There still exists an Adobe Illustrator to XAML exporter. So could convert SVG to XAML paths. To support all SVG semantics one should use a separate library in my opinion instead.

[insinfo]

@birbilis You do not have to support the entire SVG semantics, neither Google nor Apple did so they will only implement an essential part of SVG