Question

下午好，

我试图弄清楚当按下按钮时如何更改图像的图像源。然后当按钮未处于按下状态时，imagesource应返回其原始图像。换句话说，只要用户按下按钮，图像就会被短暂替换。

我在想类似下面的伪代码：

while(Button.Pressed() == True){

  Uri uri = new Uri("Assets/media/newImage.png", UriKind.Relative);
          BitmapImage imageSource = new BitmapImage(uri);
          image1.Source = imageSource;

}

非常感谢任何帮助。

Answer 1

我认为这里有一个非常特里的按钮，带有Windows Phone项目的图像

click here and download project zip file from this link

Answer 2

最简单的方法是将图像添加到Button模板并使用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>

按下按钮 - 更改图像源

2 个答案: