Question

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

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

下面是我在长列表选择控件中的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();
}

Answer 1

执行此操作的最佳方式IMO是使用样式。实际上，这似乎是一个切换按钮而不是图像。您可以使用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>

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

<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上使用控件模板和可视状态here's a good one有很多资源。

修改

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

WP7每次点击时向上和向下旋转箭头图像

1 个答案: