UWP Button pressed image - xaml

Question

I'm working on a UWP app targeted phones and tablets, and am currently implementing a feature for taking a picture with the camera.
I've put a button control on the camera preview, and used an icon to represent the button (see XAML code below).
My problem is, that when i press the button, it turns into a semi transparent grey square, which is far from the green cirle I'm using as icon.
How can I use an other icon for when the button is pressed
<Grid >
<!--Camera preview-->
<CaptureElement Name="PreviewControl" Stretch="Uniform"/>
<Button Tapped="btnCancel_Tapped" Name="btnCancel" Margin="5,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="50" Width="65">
<Button.Background>
<ImageBrush ImageSource="/Assets/images/btn_cancel.png">
</ImageBrush>
</Button.Background>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,5" Name="btnPhoto" Tapped="btnPhoto_Tapped" IsEnabled="False" Width="70" Height="70">
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/btn_takepicture_off.png">
</ImageBrush>
</Button.Background>
</Button>
</Grid>

Answer 1

To set an image on press you need to edit button template and edit "pressed" state
just add this code in page resources and edit path to image:
<Style x:Key="ButtonStyle1" 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">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="SET YOUR IMAGE HERE.jpg"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and apply this style to your button:
Button Style="{StaticResource ButtonStyle1}"

Answer 2

If i were you, I'd make that image inside of the Button's template.
It not only will get rid of unwanted existing elements/looks of the button (such as they grey square), it will also allow you to easily give it behaviors such as what it does when you mouse-over / press it.
To do this in the most simplistic way, paste the following inside your <Button></Button>:
<Button.Template>
<ControlTemplate TargetType="Button">
[[Anything you want your button to be made of goes here]]
</ControlTemplate>
</Button.Template>
In the area I marked "[[Anything you want your button to be made of goes here]]" you can now build exactly what you want your button to look like with anything from <Grid/> to <Image/> to simplistic parts such as <Ellipse/> or <Rectangle/>

Answer 3

I use the following code when changing a button picture once clicked:
Add the following USING STATEMENTS:
using System;
using Windows.UI.Xaml.Media.Imaging;
In the click event, add this code:
PicA.Source= new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/6.png", UriKind.Absolute) };
<--- the PicA represents an image (from the toolbox) and 6.png is my new picture from my assets folder.
If you need to replace your image later back to the original, then just copy/paste the above code and change the picture name (6.png to whatever) back to your original.
Johnny Smith - Shetland Islands UK

Answer 4

Here is another example using the TAPPED event:
private void MyBox_Tapped(object sender, TappedRoutedEventArgs e)
{
var image = sender as Image;
var bitmapImage = image?.Source as BitmapImage;
if (bitmapImage != null)
{
var source = bitmapImage.UriSource.LocalPath;
if (source == "/Assets/Green1 (Custom).png")
{
MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Red1 (Custom).png", UriKind.Absolute) };
}
else if (source == "/Assets/Red1 (Custom).png")
{
MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Green1 (Custom).png", UriKind.Absolute) };
}
}
<--- The above code allows for inter-changing of two images (unlimited on a multitude of IF statements - endless!). All you need to do is add your coding after each of the 'MyBox' statements to do whatever your programming requires thereafter.
If you combine my earlier reply by using a button click event, then one only requires to add the coding as listed above - meaning a single button click can be used to do many tasks, and also using many different images. The scope is endless as you can use unlimited IF statements throughout your coding within each segment of your coding thereafter. Hope this helps you all... Johnny

Answer 5

You can also use WintRT ToolKit available on NuGet:
https://www.nuget.org/packages/winrtxamltoolkit/
From this Toolkit you can use ImageButton that is a custom Button control that takes one to three images to be used to represent different states of the button: normal, hover, pressed, disabled).
Here is XAML sample of usage:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/normal_button_state.png"
PressedStateImageSource="ms-appx:///Assets/pressed_button_state.png"/>
Remember to add using xmlns at the top of you page:
xmlns:toolkit ="using:WinRTXamlToolkit.Controls"