0

矢印の画像を下から上に回転させています。これは、ユーザーが最初にタップしたときに正常に機能しています。

しかし、私の質問は、2回目のタップなどで下から上に反転する方法です...

以下は、longlistselectorコントロール内にある私のXAML画像です

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

画像を回転させるためのタップコード

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();
}
4

1 に答える 1

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" />
于 2012-10-02T21:20:17.053 に答える