按下按钮 - 更改图像源 [英] On Button Press - Change Image Source
本文介绍了按下按钮 - 更改图像源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下午好，
我想弄清楚如何在按下按钮时更改图像的图像源.然后，当按钮未处于按下状态时，图像源应返回其原始图像.换句话说，只要用户按下按钮，图像就会被短暂替换.
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.
推荐答案
最简单的方法是将图像添加到 Button 模板中，并使用 VisualState (Pressed) 更改图像源.
The simplest way is to add image to the Button template and change the Image Source with VisualState (Pressed).
这是一个例子:
<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>
这篇关于按下按钮 - 更改图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
