在WPF中使用带矩形的DataTrigger时遇到问题

Question

我是WPF的新手，正在尝试对矩形的大小和位置进行动画更改。我通过将矩形绑定到INotifyPropertyChanged属性来设置矩形。这可以很好地工作，但变化可能是极端的，我希望它在视觉上不那么刺耳。

这可以很好地工作：

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneWay}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneWay}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneWay}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneWay}"/>
    </Style>
</Rectangle.Style>

​

Coil.Left是我的INotifyPropertyChanged对象中的一个RectangleF结构，包含矩形的画布的DataContext属性是在创建对象后在后面的代码中设置的。

我也可以很好地使用EventTrigger来制作动画：

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneTime}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneTime}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneTime}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneTime}"/>
    </Style>
</Rectangle.Style>
<Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" 
                                        To="{Binding Path=Coil.Width, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" 
                                        To="{Binding Path=Coil.Height, Mode=OneWay}"
                                        Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" 
                                        To="{Binding Path=Coil.Left, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                                        To="{Binding Path=Coil.Top, Mode=OneWay}"
                                        Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Rectangle.Triggers>

​

当我在矩形上移动鼠标时，它通过动画更改为Coil.Left、Top、Width和Height的当前属性值。

但是，我想要实现的是，对Coil属性值的任何更改都是动画更改。因此，我的计划是设置一个DataTrigger，并使用一个转换器返回始终为真的值，这样任何更改都将通过动画显示出来。

但无论我做什么，当我使用DataTrigger时，我甚至在打开窗口之前就收到了一个异常错误，我不知道为什么会发生这种情况。为了简单起见，我去掉了转换器，只使用了一个直接的值：

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" 
        Stroke="black">
<Rectangle.Style>
    <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Canvas.Left" Value="{Binding Path=Coil.Left, Mode=OneTime}"/>
        <Setter Property="Canvas.Top" Value="{Binding Path=Coil.Top, Mode=OneTime}"/>
        <Setter Property="Width" Value="{Binding Path=Coil.Width, Mode=OneTime}"/>
        <Setter Property="Height" Value="{Binding Path=Coil.Height, Mode=OneTime}"/>
    </Style>
</Rectangle.Style>
<Rectangle.Triggers>
    <DataTrigger Binding="{Binding Path=Coil.Height}" Value="60">
        <DataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" 
                                        To="{Binding Path=Coil.Width, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="Height" 
                                        To="{Binding Path=Coil.Height, Mode=OneWay}"
                                        Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" 
                                        To="{Binding Path=Coil.Left, Mode=OneWay}"
                                        Duration="0:0:5"/>
                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" 
                                        To="{Binding Path=Coil.Top, Mode=OneWay}"
                                        Duration="0:0:5"/>
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.EnterActions>
    </DataTrigger>
</Rectangle.Triggers>

​

有没有想过为什么这会给我一个异常错误？我确信这只是我对WPF缺乏经验的问题。这是我的第一个项目。

提前谢谢你。

--约翰

Answer 1

对于像Rectangle这样的FrameworkElement，您只能使用EventTrigger。在Style、ControlTemplate和DataTemplate中，你也可以使用Trigger / MultiTrigger和DataTrigger / MultiDataTrigger。

这意味着将您的DataTrigger移动到Rectangle样式中，它应该可以工作：

<Rectangle Fill="{x:Static SystemColors.ControlBrush}" Stroke="Black">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            ... 
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Coil.Height}" Value="60">
                    ...
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Answer 2

最近读到过这方面的文章。尽管EventTriggers和DataTriggers很相似，但您可以在Storyboard内将Binding用于EventTrigger，但不能用于DataTrigger。

因此，如果您尝试在如下所示的Storyboard条件中使用绑定，将会得到一个System.Windows.Markup.XamlParseException错误，

<Style.Triggers>
  <DataTrigger Binding="{Binding Path=IsBarVisible, 
    Converter={StaticResource myBooleanToVisibiltyConverter}}" Value="Visible">
    <DataTrigger.EnterActions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetProperty="Value"
            From="{Binding Path=ProgressedAmout}"
            To="100"
            Duration="0:0:50"
          ></DoubleAnimation>
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
  </DataTrigger>
</Style.Triggers>

您可以在返回时使用和EventTrigger，也可以取消Storyborad的To到From的绑定。