Changing the image of a button with condition

Question

I want to change the images that are showed on a button based on the property of Torch Control class. Like if the torch is enabled it should show different image and if disabled then different image. Below is the code for my button right now.

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

The problem right now is that as soon as i remove the touch from the button it just reverts back to the default image while the torch enables. How could I change Button's Visual Assets based on the status of the Torch? Please Help. Thanks :)

I cant understand what you have meant by "Torch". Is this some property, based on which you need to change image in your button? — RenDishen, Jan 14 '15 at 08:53
Torch means that when we click on the button the flash of phone starts working and when we click on button again the flash turns off. — Prajjwal, Jan 14 '15 at 09:46

score 0 · Answer 1 · edited May 23 '17 at 10:33

If I understand correctly the behavior of the button now is this. When you press the button the image you want to show is shown but when you raise your finger it reverts to default. Right?

That is normal because you only define the image to be shown in the "Pressed" VisualState.

There is a walkthrough here that will help you understand visual states And also this question which is similar to yours

Changing the image of a button with condition

1 Answers1