Question

I am rotating the arrow image from down to up which is working ok when the user first taps it.

But my question is how to reverse from down to up on second tap and so on…

Below is my XAML image which is inside a longlistselector control

 <Image Grid.Column="2" Tap="ArrowDownImg_Tap" x:Name="ArrowDownImg" Margin="0,-10,-33,0" Height="40" Width="40" Source="/Images/appbar.arrow.down.circle.rest.png" />

The tap code to rotate the image

private void ArrowDownImg_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{           
            Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
            Storyboard sb = new Storyboard();
            sb.Duration = duration;

            DoubleAnimation da = new DoubleAnimation();
            da.Duration = duration;

            sb.Children.Add(da);

            RotateTransform rt = new RotateTransform();

            Storyboard.SetTarget(da, rt);
            Storyboard.SetTargetProperty(da, new PropertyPath("Angle"));
            da.To = 180;

            ImageShowHide.RenderTransform = rt;
            ImageShowHide.RenderTransformOrigin = new Point(0.5, 0.5);

            sb.Begin();
}

Answer 1

The best way to do this IMO is to use a style. And really, this seems like a toggle button more than an image. You can work from the default control template.

<Style TargetType="ToggleButton" x:Key="FlipButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="rotate" Storyboard.TargetProperty="(RotateTransform.Angle)" To="180" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="rotate" Storyboard.TargetProperty="(RotateTransform.Angle)" To="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <RotateTransform x:Name="rotate" CenterX="0.5" CenterY="0.5" />
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Place the style in your resources section, then you can reference it from a Toggle Button.

<ToggleButton x:Name="MyToggleButton" Style="{StaticResource FlipButton}">
    <ToggleButton.Content>
        <Image Source="/Images/appbar.arrow.down.circle.rest.png" />
    </ToggleButton.Content>
</ToggleButton>

Now, also, you don’t need the click handler, just bind the text box visibility directly to the toggle button.

<TextBlock Text="Hello world" Visibility="{Binding ElementName=MyToggleButton,Path=IsChecked,Converter={StaticResource ValueConverterBoolToVis}}" />

There are lots of resources on using Control Templates and Visual States, here’s a good one on MSDN.

Edit

Here’s the code for the IValueConverter.

public class ValueConverterBoolToVis : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Add it to the resources using

<local:ValueConverterBoolToVis x:Key="local:ValueConverterBoolToVis" />