我正在从下向上旋转箭头图像,当用户第一次点击它时,它工作正常。
但我的问题是如何在第二次点击时从向下反转到向上等等......
下面是我的 XAML 图像,它位于 longlist选择器控件内
<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();
}
执行此操作的最佳方法是使用样式。 实际上,这似乎是一个切换按钮,而不是一个图像。 可以使用默认控件模板工作。
<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" />