使用条件更改按钮的图像答案

【问题标题】：Changing the image of a button with condition使用条件更改按钮的图像
【发布时间】：2015-01-14 08:36:08
【问题描述】：

我想根据 Torch Control 类的属性更改按钮上显示的图像。就像如果启用了手电筒，它应该显示不同的图像，如果禁用则显示不同的图像。下面是我现在按钮的代码。

        <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="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">
                                                    <!-- Pressed Image. -->
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="Assets/Power button Blue.jpg" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                               Storyboard.TargetName="ContentContainer">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                               Storyboard.TargetName="ButtonBackground">
                                                </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/Power button Blue - Copy.jpg"
                                                />

                                        <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>

现在的问题是，一旦我从按钮上移除触摸，它就会在手电筒启用时恢复为默认图像。如何根据 Torch 的状态更改 Button 的视觉资源？请帮忙。谢谢:)

【问题讨论】：

我无法理解您所说的“火炬”是什么意思。这是一些属性，您需要根据它更改按钮中的图像吗？
手电筒意味着当我们点击按钮时手机闪光灯开始工作，当我们再次点击按钮时闪光灯关闭。

标签： c# .net xaml windows-phone-8.1

【解决方案1】：

如果我理解正确的话，现在按钮的行为是这样的。当您按下按钮时，会显示您要显示的图像，但当您抬起手指时，它会恢复为默认值。对吧？

这很正常，因为您只定义了要在“Pressed”VisualState 中显示的图像。

有一个演练here 将帮助您了解视觉状态还有this question，和你的类似

【讨论】：