0

我正在将箭头图像从下向上旋转，当用户第一次点击它时它工作正常。

但我的问题是如何在第二次点击时从下到上反转等等......

下面是我的 XAML 图像，它位于 longlistselector 控件中

 <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

执行此 IMO 的最佳方法是使用样式。实际上，这看起来更像是一个切换按钮而不是图像。您可以使用默认控制模板进行工作。

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

将样式放在资源部分中，然后您可以从切换按钮中引用它。

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

现在，您也不需要单击处理程序，只需将文本框可见性直接绑定到切换按钮即可。

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

有很多关于使用控制模板和视觉状态的资源，这是MSDN 上的一个很好的资源。

编辑

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

使用将其添加到资源中

<local:ValueConverterBoolToVis x:Key="local:ValueConverterBoolToVis" />
于 2012-10-02T21:20:17.053 回答