Windows Phone emulator does not displays any animations/movement

Windows Phone emulator does not displays any animations/movement - animation

I prepared easiest app in the Blend4 I put the textBox in added story board, keyframe1, moved the textBox and add another keyframe. The animation works in the Blend4 i press play on the storyboard and the textBox moves. I run the emulator and it does not. I even ran app of my teacher it does not animate either(it should).
What I suppose to do to make it running?

How do you start animation from the code ??
F.E. flip animation:
XAML
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="ShowBack" >
<Storyboard >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="FrontCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="FrontCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackCover">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BackCover">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="FrontCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ShowFront" >
<Storyboard >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="BackCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="BackCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FrontCover">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="FrontCover">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="BackCover">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="FrontCover" Source="{Binding TitleInfo.front_cover.Image}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" Margin="5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
<Image x:Name="BackCover" Source="{Binding TitleInfo.back_cover.Image}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" Margin="5" Visibility="Collapsed" >
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
CS code which start animation:
VisualStateManager.GoToState(this, "ShowBack", true);

Related

WinUI Custom Toggle Switch with intermediate event

I have been scratching my head for some time over this.
I want to have toggle switch that fires an event when pressed and based on the event handler toggles if specific task is completed as expected.
So far:
I could only attach PointerPressedEvent,which works fine.
There seems to be no way to control toggling action for the switch on click.
Question:
Shouldn't it be possible to click the toggle switch and toggle only if the desired action/task/method is completed.
Is this kind of control even possible to make with WinUI/UWP?
Thank you in advance for your guidance.

You can also do it this way.
First of all, you need to install the CommunityToolkit.Mvvm NuGet package (v8.0.0-preview-4 or later) to make MVVM style easier.
MainWindow.xaml
<Window
x:Class="ToggleSwitchSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Orientation="Vertical">
<CheckBox
Content="Awesome task should success"
IsChecked="{x:Bind ViewModel.IsAwesomeTaskShouldSuccess, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsThreeState="False" />
<ProgressRing HorizontalAlignment="Left" IsActive="{x:Bind ViewModel.AwesomeTaskCommand.IsRunning, Mode=OneWay}" />
<ToggleSwitch
x:Name="AwesomeToggleSwitch"
IsOn="{x:Bind ViewModel.IsAwesomeTaskSuccessed, Mode=OneWay}"
Toggled="AwesomeToggleSwitch_Toggled" />
</StackPanel>
</Window>
MainWindow.xaml.cs
using Microsoft.UI.Xaml;
namespace ToggleSwitchSample;
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
ViewModel = new MainPageViewModel();
}
public MainPageViewModel ViewModel { get; }
private async void AwesomeToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
try
{
// Detatch the "Toggled" event to avoid multiple firing.
this.AwesomeToggleSwitch.Toggled -= AwesomeToggleSwitch_Toggled;
// Set the "IsOn" state to its previous state.
this.AwesomeToggleSwitch.IsOn = !this.AwesomeToggleSwitch.IsOn;
// Run the task and wait until it's completed.
await ViewModel.AwesomeTaskCommand.ExecuteAsync(this);
}
finally
{
// Attach back the Toggled event.
this.AwesomeToggleSwitch.Toggled += AwesomeToggleSwitch_Toggled;
}
}
}
MainWindowViewModel.cs
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Threading.Tasks;
namespace ToggleSwitchSample;
[ObservableObject]
public partial class MainPageViewModel
{
[ObservableProperty]
// The CommunityToollkit-MVVM library will automatically create
// "IsAwesomeTaskShouldSuccess" property for binding.
private bool _isAwesomeTaskShouldSuccess;
[ObservableProperty]
// The CommunityToollkit-MVVM library will automatically create
// "IsAwesomeTaskSuccessed" property for binding.
private bool _isAwesomeTaskSuccessed;
[RelayCommand]
// The CommunityToollkit-MVVM library will automatically create
// "AwesomeTasCommand" command.
private async Task AwesomeTask()
{
bool awesomeTaskResult = await Task.Run(async () =>
{
bool result = false;
await Task.Delay(3000);
result = true;
return result;
});
IsAwesomeTaskSuccessed = awesomeTaskResult && _isAwesomeTaskShouldSuccess is true;
}
}

If I understand you correctly, when the toggle switch is clicked the first time, you want to start a task and do some work. After the work is finished, then you want to change the status of the toggle switch based on the result instead of changing its status automatically, right?
I find a workaround for your requirement. Not sure if it's the best way but at least it is wokring.
put the ToggleSwitch inside a UserControl.
create a default style of the ToggleSwitch.
find the swith part of the ToggleSwitch form it's style and set the IsHitTestVisible property as false. This will make the switch part not clickable.
Use the UserControl in your xaml and handle the Tapped event of the UserControl
when you click on the switch part of the ToggleSwitch, it will trigger the Tapped event of the UserControl so you could do your work without changing the switch.
after the work is done, you could manually set the ToggleSwitch.IsOn Property based on the result.
I made a simple sample, you could refer it and change it as you want.
ToggleControl.xaml:
<UserControl.Resources>
<Style x:Key="ToggleSwitchStyle1" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="ManipulationMode" Value="System,TranslateX"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleSwitch">
<Grid Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="StrokeThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ToggleStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OnToOffTransition" From="On" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Off"/>
<VisualState x:Name="On">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="KnobTranslateTransform" To="24" Storyboard.TargetProperty="X"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="OffContent">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="OffContentPresenter" To="1" Storyboard.TargetProperty="Opacity"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OnContent">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="OnContentPresenter" To="1" Storyboard.TargetProperty="Opacity"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ToggleSwitchHeaderForeground}" IsHitTestVisible="False" Margin="{ThemeResource ToggleSwitchTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
<Grid HorizontalAlignment="Left"
IsHitTestVisible="False"
MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
Grid.Row="1" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MaxWidth="12" Width="12"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{ThemeResource ToggleSwitchPreContentMargin}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="{ThemeResource ToggleSwitchPostContentMargin}"/>
</Grid.RowDefinitions>
<Grid x:Name="SwitchAreaGrid" Background="{ThemeResource ToggleSwitchContainerBackground}" Grid.ColumnSpan="3" Control.IsTemplateFocusTarget="True" Margin="0,5" Grid.RowSpan="3"/>
<ContentPresenter x:Name="OffContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OffContentTemplate}" Grid.Column="2" Content="{TemplateBinding OffContent}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="OnContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OnContentTemplate}" Grid.Column="2" Content="{TemplateBinding OnContent}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="OuterBorder" Fill="{ThemeResource ToggleSwitchFillOff}" Height="20" Grid.Row="1" RadiusX="10" RadiusY="10" Stroke="{ThemeResource ToggleSwitchStrokeOff}" StrokeThickness="2" Width="44"/>
<Rectangle x:Name="SwitchKnobBounds" Fill="{ThemeResource ToggleSwitchFillOn}" Height="20" Opacity="0" Grid.Row="1" RadiusX="10" RadiusY="10" Stroke="{ThemeResource ToggleSwitchStrokeOn}" StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}" Width="44"/>
<Grid x:Name="SwitchKnob" HorizontalAlignment="Left" Height="20" Grid.Row="1" Width="20">
<Grid.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform"/>
</Grid.RenderTransform>
<Ellipse x:Name="SwitchKnobOn" Fill="{ThemeResource ToggleSwitchKnobFillOn}" Height="10" Opacity="0" Width="10"/>
<Ellipse x:Name="SwitchKnobOff" Fill="{ThemeResource ToggleSwitchKnobFillOff}" Height="10" Width="10"/>
</Grid>
<Thumb x:Name="SwitchThumb" AutomationProperties.AccessibilityView="Raw" Grid.ColumnSpan="3" Grid.RowSpan="3">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="Transparent">
<ToggleSwitch Style="{StaticResource ToggleSwitchStyle1}" x:Name="MySwitch" Header="Toggle Switch Example" OffContent="Do work" OnContent="Working" />
</Grid>
ToggleControl.xaml.cs:
public ToggleSwitch innerSwitch { get; set; }
public ToggleControl()
{
this.InitializeComponent();
innerSwitch = MySwitch;
}
MainPage.xaml:
<Grid>
<local:ToggleControl x:Name="Test" Tapped="Test_Tapped" Width="300" Height="300"/>
</Grid>
MainPage.xaml.cs
public MainPage()
{
this.InitializeComponent();
}
public async Task<bool> DoSomething()
{
await Task.Delay(3000);
return true;
}
private async void Test_Tapped(object sender, TappedRoutedEventArgs e)
{
bool result = await DoSomething();
ToggleControl control = sender as ToggleControl;
control.innerSwitch.IsOn = result;
}

Xamarin.Forms UWP - How to hide or change color of Picker / ComboBox dropdown arrow

I'm working on a Xamarin.Forms project for UWP right now, and I'm using a custom renderer for Pickers. I'm actually overlaying the Picker on top of a label and icon so that when the user clicks the label/icon, it opens the picker. In order to accomplish this, I'm basically setting everything on the picker to transparent - the border, text, and background. The picker still functions just fine, and all picker elements are invisible, except the picker arrow is still visible. How do I affect the color of the picker arrow (in order to make it transparent), or just get rid of it altogether?
Getting rid of the text and background color is as easy as:
var transparent = Windows.UI.Color.FromArgb(0, 0, 0, 0);
Control.Foreground = new SolidColorBrush(transparent);
Control.Background = new SolidColorBrush(transparent);
But I can't figure out how to affect the dropdown arrow.
I know the Control is a FormsComboBox VisualElementRender<Picker, FormsComboBox>.Control, and I've tried scanning through all the properties of Control in Visual Studio.

For custom render, the correspondent native control of Picker is ComboBox in UWP . See Renderer Base Classes and Native Controls. So that for the drop down arrow you want to change , which is actually the DropDownGlyph element inside the control template of Combobox. You could copy the default ComboBox styles and templates and update the DropDownGlyph to not visible by setting the Visibility property to Collapsed. For example:
The render:
public class MyPickerRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
Control.Style=(Windows.UI.Xaml.Style)App.Current.Resources["pickerstyle"];
}
}
The style in App.xaml
<Application
x:Class="PickerDemo.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PickerDemo.UWP"
RequestedTheme="Light">
<Application.Resources>
<Style x:Key="pickerstyle" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<ContentPresenter
x:Name="HeaderContentPresenter"
Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
Visibility="Collapsed" />
<Border
x:Name="Background"
Grid.Row="1"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Border
x:Name="HighlightBackground"
Grid.Row="1"
Grid.ColumnSpan="2"
Background="{ThemeResource SystemControlHighlightListAccentLowBrush}"
BorderBrush="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock
x:Name="PlaceholderTextBlock"
Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
Text="{TemplateBinding PlaceholderText}" />
</ContentPresenter>
<FontIcon
x:Name="DropDownGlyph"
Grid.Row="1"
Grid.Column="1"
Margin="0,10,10,10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="12"
Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
Glyph=""
IsHitTestVisible="False"
Visibility="Collapsed" />
<Popup x:Name="Popup">
<Border
x:Name="PopupBorder"
Margin="0,-1,0,-1"
HorizontalAlignment="Stretch"
Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
<ScrollViewer
x:Name="ScrollViewer"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalSnapPointsAlignment="Near"
VerticalSnapPointsType="OptionalSingle"
ZoomMode="Disabled">
<ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
</ScrollViewer>
</Border>
</Popup>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FocusedPressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
<VisualState x:Name="FocusedDropDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PopupBorder"
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DropDownStates">
<VisualState x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation
ClosedTargetName="ContentPresenter"
OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
OpenedTargetName="PopupBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation
ClosedTargetName="ContentPresenter"
OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
OpenedTargetName="PopupBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>

uwp commandbar always show label

Answer:
Thanks to Justin XL I was able to fix my problem.
I implemented the style he provided below in his answer and added, as he said, this in the App.xaml: ( I changed the height to 66 - fits better for me)
<Application.Resources>
<x:Double x:Key="AppBarThemeCompactHeight">66</x:Double>
</Application.Resources>
and then this in my CommandBar
Height="{StaticResource AppBarThemeCompactHeight}"
Question:
I want my Command Bar to always show its Labels, in standard mode. I have Secondary Commands so IsOpen=true is not an option for me.
Right now I just see the Icons and no labels underneath.
The official Microsoft Site for Command Bar says this:
The app bar button controls are characterized by an icon and
associated label. They have two sizes; normal and compact. By default,
the text label is shown. When the IsCompact property is set to true,
the text label is hidden. When used in a CommandBar control, the
command bar overwrites the button's IsCompact property automatically
as the command bar is opened and closed.
This kinda is an issue. Any ideas how I can make IsCompact=False work?

This can be done by editing the default style of the AppBarButton.
First, generate the default style using Blend, then locate the Compact visual state and change the Visibility target value form Collapsed to Visible. This way no matter what the IsCompact value is, the label will always be visible.
<Style x:Key="FullHeightAppBarButtonStyle"
TargetType="AppBarButton">
<Setter Property="Background"
Value="{ThemeResource AppBarButtonBackground}" />
<Setter Property="Foreground"
Value="{ThemeResource AppBarButtonForeground}" />
<Setter Property="BorderBrush"
Value="{ThemeResource AppBarButtonBorderBrush}" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="Width"
Value="68" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="AllowFocusOnInteraction"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
MaxWidth="{TemplateBinding MaxWidth}"
MinWidth="{TemplateBinding MinWidth}">
<Grid.Resources>
<Style x:Name="LabelOnRightStyle"
TargetType="AppBarButton">
<Setter Property="Width"
Value="NaN" />
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullSize" />
<VisualState x:Name="Compact">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelOnRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0"
Value="12,14,0,14" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight"
Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="TextAlignment"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="8,15,12,17" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelCollapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight"
Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Overflow">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtons">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="38,0,12,0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="TextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="OverflowTextLabel">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding"
Value="0,11,0,13" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding"
Value="0,11,0,13" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot"
MinHeight="{ThemeResource AppBarThemeMinHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="Content"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Stretch"
Height="20"
Margin="0,14,0,4" />
<TextBlock x:Name="TextLabel"
Foreground="{TemplateBinding Foreground}"
FontSize="12"
FontFamily="{TemplateBinding FontFamily}"
Margin="2,0,2,6"
Grid.Row="1"
TextAlignment="Center"
TextWrapping="Wrap"
Text="{TemplateBinding Label}" />
</Grid>
<TextBlock x:Name="OverflowTextLabel"
Foreground="{TemplateBinding Foreground}"
FontSize="15"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="Stretch"
Margin="12,0,12,0"
Padding="0,5,0,7"
TextAlignment="Left"
TextWrapping="NoWrap"
Text="{TemplateBinding Label}"
TextTrimming="Clip"
Visibility="Collapsed"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After applying the above style to all your buttons, there's one more thing you will need to do. At the moment the label is cut off due to the height of the CommandBar in compact mode. You will want to increase it so the label can fit in. There's a simple way to do this as I detailed it in my answer here. In your case, you will want to set the height to 76 (as the height of the AppBarButton will be 76).

Mouseover and PointerOver VisualStates not working for radiobutton in windows 8.1?

I have a radio button in Windows8.1 Phone project and edited visual states of this radiobutton
<RadioButton Content="wwwwwwwwwwwwwww" Style="{StaticResource HamburgerRadioButtonStyle}" GroupName="w"></RadioButton>
I have styled the radio button using visual studio blend as follows.But the pointer over and mouseover visual states here are not working?
<Style x:Key="HamburgerRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{StaticResource ApplicationPaneBackgroundThemeBrush}" />
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Height" Value="48" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="HoverBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="CheckedHoverBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="HoverBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="CheckedHoverBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Container" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PressedBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="CheckedPressedBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="CheckedBackground">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Container">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="NotCheckedBackground" Grid.ColumnSpan="2">
<Rectangle x:Name="PressedBackground" Visibility="Collapsed" Fill="#FF3C3C3C" />
<Rectangle x:Name="HoverBackground" Visibility="Collapsed" Fill="#474747" />
</Grid>
<Grid x:Name="CheckedBackground" Grid.ColumnSpan="2" Visibility="Collapsed"
Background="#FF3C3C3C">
<Rectangle x:Name="CheckedPressedBackground" Visibility="Collapsed" Fill="#FF3C3C3C" />
<Rectangle x:Name="CheckedHoverBackground" Visibility="Collapsed" Fill="#303030" />
</Grid>
<Path Height="38" Data="{TemplateBinding Tag}"
Margin="5,8,5,5" VerticalAlignment="Center"
HorizontalAlignment="Center" />
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}" Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Change Button Image On Hover or Click

How do I change the background image of a Button on Hover and on Click? The Visual Studio's UI does not seem to provide any easy way of doing it. Currently the default behavior seems to replace my image with a solid color, which looks aweful.
All I have so far is the Button base:
<Button Content="" Height="75" VerticalAlignment="Center" Width="75" HorizontalAlignment="Center" ClickMode="Press">
<Button.Background>
<ImageBrush ImageSource="../data/images/icons/skill_icon_0.png"/>
</Button.Background>
</Button>
I tried to handle events and manually set it, but it doesn't work for Pressed/Released:
Button skillButton = new Button();
skillButton.Width = 75;
skillButton.Height = 75;
skillButton.ClickMode = ClickMode.Press;
skillButton.Background = GetIconImage(iconIndex, 0);
skillButton.PointerEntered +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 1);
};
skillButton.PointerExited +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 0);
};
skillButton.PointerPressed +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 2);
};
skillButton.PointerReleased +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
if (skillButton.FocusState == FocusState.Pointer)
skillButton.Background = GetIconImage(iconIndex, 1);
else skillButton.Background = GetIconImage(iconIndex, 0);
};

I ended up editing the ControlTemplate just to create and change the Border. But it could be used to change the image too.
<Button Width="75" Height="75" ClickMode="Press">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="RootElement" CornerRadius="10" BorderThickness="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
<VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Yellow" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="White"/>
</Border.BorderBrush>
<Border.Background>
<ImageBrush ImageSource="ms-appx:/data/images/icons/skill_icon_0.png"/>
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

You're pretty much there. You can always apply a semi-transparent colour on top of your picture below your text/content but since you asked for changing the entire image, here's what you can do:
In Visual Studio 2012, if you already have a button mostly styled/configured to what you want, right click it, Edit Template -> Edit a Copy. Choose where you want to put the new style/template. It's like picking where to put the CSS. Could be in a global file (App.xaml or StandardStyle.xaml) or in the header (page resources) or inline (control resources).
The below XAML might be over-simplified and not work but it's the idea of it:
<ControlTemplate x:Key="MyButton" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
[...]
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
[...]
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" [...]>
<Grid>
<Image Source="[...]" Stretch="None" />
<Image x:Name="HoverBackground" Source="[...]" Visibility="Collapsed" />
<Image x:Name="PressedBackground" Source="[...]" Visibility="Collapsed" />
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
[...]/>
</Grid>
</Border>
[...]
</Grid>
</ControlTemplate>
Now you can place your 3 images in the 3 <Image> tags and since the ContentPresenter is on top, when you use the template with <Button Template="{StaticResource MyButton}">, you can still put content in and it will appear on top of your background image. Or you can just have a fully graphical button with the images too.

The windows UI XAML toolkit now has this functionality:
Image Button and Toggle Image Button
Use package manager console command "Install-Package winrtxamltoolkit" in visual studio 2012 to install the toolkit... It is really useful for many things.

Here is a style that turns visibility on and off for some extra images you add in Blend. The images are transparent and go behind the button background image by using "Send to Back" .. so in other words, you get to keep using a different background image brush for each button, plus the swapped Normal, Pointer, and Pressed images. So two background images overlaid.
<Style x:Key="qButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" />
<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite" />
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/>
<Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/>
<Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}" Margin="3">
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0"
StrokeDashOffset="1.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" />
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0"
StrokeDashOffset="0.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Use this Code in Pointer_Entered Event on the Button and it will work :)
private void Button_PointerEntered_1(object sender, PointerEventArgs e)
{
BitmapImage bmp = new BitmapImage();
Uri u = new Uri("ms-appx:/Images/Shapes/blueball.png", UriKind.RelativeOrAbsolute);
bmp.UriSource = u;
ImageBrush i = new ImageBrush();
i.ImageSource=bmp;
button.Background= i;
}

The reason the += for PointerPressed / PointerReleased won't work in your original code is because Button (actually ButtonBase) class-handles these events. That is because they're being consolidated into the Click event (on Release). If you used skillButton.AddHandler with first param PointerPressedEvent, second param a new handler reference to a named handler, and third param true, you could be using PointerPressed rather than the Entered/Exited as the event.

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

Windows Phone emulator does not displays any animations/movement - animation

Related

WinUI Custom Toggle Switch with intermediate event

Xamarin.Forms UWP - How to hide or change color of Picker / ComboBox dropdown arrow

uwp commandbar always show label

Mouseover and PointerOver VisualStates not working for radiobutton in windows 8.1?

Change Button Image On Hover or Click

Categories

Resources