On Button Press - Change Image Source - windows-phone-7

Question

Good afternoon,
Im trying to figure out how to change the imagesource of an images when a button is pressed. Then the imagesource should return to its original image when the button is not in a pressed state. In other words the image is briefly replaced as long as the user presses on the button.
I was thinking something like the following pseudo-code:
while(Button.Pressed() == True){
Uri uri = new Uri("Assets/media/newImage.png", UriKind.Relative);
BitmapImage imageSource = new BitmapImage(uri);
image1.Source = imageSource;
}
Any help on this is much appreciated.

Answer 1

The simplest way is to add image to the Button template and change the Image Source with VisualState (Pressed).
Here is an example:
<Button Content="Test"
Foreground="{StaticResource PhoneAccentBrush}"
VerticalAlignment="Top">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="Foreground"
Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="BorderThickness"
Value="{StaticResource PhoneBorderThickness}" />
<Setter Property="FontFamily"
Value="{StaticResource PhoneFontFamilySemiBold}" />
<Setter Property="FontSize"
Value="{StaticResource PhoneFontSizeMedium}" />
<Setter Property="Padding"
Value="10,5,10,6" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source"
Storyboard.TargetName="Img">
<!-- Path to image that you want to show when button is pressed. -->
<DiscreteObjectKeyFrame KeyTime="0"
Value="Assets/..." />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource TransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="0"
Margin="{StaticResource PhoneTouchTargetOverhang}">
<StackPanel Orientation="Horizontal">
<!-- Added Image to the Button Template. Specify image that you
want to show when button is in normal state. -->
<Image x:Name="Img"
Source="Assets/..."
Height="64"
Width="64" />
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>

Answer 2

i think it's quite tricy here is a button with image for Windows Phone project
click here and download project zip file from this link