WPF Border Datatrigger 奇怪的行为

Question

当我为 Binding={Binding IsCrit} 将 Value 设置为 "False" 时，程序似乎工作正常，但这与我需要的相反，因为我只想要动画 /当技能命中至关重要时要播放的故事板。如果 IsCrit 为 "True"，我只希望播放彩色动画和故事板。但是，当我将 Value 设置为 True 时，它永远不会执行动画或故事板。

当我将其设置为 false 时，"animation" 会在每个技能上播放，但当技能 IsCrit 为 True 时，动画不会为该项目播放。当我将 Datatrigger Value 设置为 True

时，某些东西似乎不起作用

我对 WPF 比较陌生，所以大部分 WPF 都是我在网上找到的片段。这可能与我的 Border 在 StackPanel 中有关吗？

整个东西都包裹在一个 ListView.ItemTemplate 中，因为这可能也与它不起作用有关。

<Border BorderBrush="{Binding ImageBorderColor}" Name="AbilityBorder"
                        BorderThickness="2"  Margin="0,0,10,0"
                        CornerRadius="8,8,8,8" RenderTransformOrigin=".5,.5"
                        Background="{Binding ImageBorderColor}">
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Resources>
                                <Storyboard x:Key="CritAnimation" >
                                    <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color"
                                                    To="White" 
                                                    AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever"
                                                    FillBehavior="HoldEnd" />                                     
                                </Storyboard>
                            </Style.Resources>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=IsCrit}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Name="flash" Storyboard="{StaticResource CritAnimation}" />
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="flash" />
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Border.RenderTransform>
                        <RotateTransform Angle="{Binding ImageAngle}" />
                    </Border.RenderTransform>
                    <Image x:Name="AbilityIcon" Source="{Binding ImageUrl}" Width="52" Height="52" 
                           RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding ImageAngle}" />
                        </Image.RenderTransform>
                    </Image>
                </Border>

这是我的 AbilityView.xaml 的完整分类。

   <ListView Name="AbilityList" 
          ItemsSource="{Binding LogLines}" 
          Background="{Binding BackgroundColor}" 
          Focusable="False" 
          Padding="10,10,0,0"
          IsTextSearchEnabled="False" 
          ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
          ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel cal:Message.Attach="[Event MouseLeftButtonUp] = [Action CopyToClipBoard($dataContext)]" x:Name="Item" Orientation="Horizontal" ToolTip="{Binding TooltipText}">
                <Border BorderBrush="{Binding ImageBorderColor}" Name="AbilityBorder"
                        BorderThickness="2"  Margin="0,0,10,0"
                        CornerRadius="8,8,8,8" RenderTransformOrigin=".5,.5"
                        Background="{Binding ImageBorderColor}">
                    <!--<Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Resources>
                                <Storyboard x:Key="CritAnimation" >
                                    <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color"
                                                    To="White" 
                                                    AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever"
                                                    FillBehavior="HoldEnd" />                                     
                                </Storyboard>
                            </Style.Resources>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=IsCrit}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Name="flash" Storyboard="{StaticResource CritAnimation}" />
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="flash" />
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>-->
                    <Border.RenderTransform>
                        <RotateTransform Angle="{Binding ImageAngle}" />
                    </Border.RenderTransform>
                    <Image x:Name="AbilityIcon" Source="{Binding ImageUrl}" Width="52" Height="52" 
                           RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding ImageAngle}" />
                        </Image.RenderTransform>
                    </Image>
                </Border>
                <custom:OutlinedText
                    VerticalAlignment="Center" Text="{Binding Text}" Visibility="{Binding TextVisibility}" FontSize="{Binding FontSize, FallbackValue=32}">
                </custom:OutlinedText>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform x:Name="transform" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.10" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListView>

大约每 1-2 秒插入一个新项目，因此我不需要对项目使用 NotifyPropertyChanged 事件。其他项目以相同的方式绑定，一个新的视图模型被插入到 ListView 使用的集合中。

Caliburn 微点击事件在复制到剪贴板时也能正常工作。我遇到的唯一问题是当值为 true 时事件不会触发。这个DataTrigger是不是只有有变化才触发？

是否没有某种方法可以在值为 True 时使用条件触发器？

Answer 1

这就是我解决问题的方法。使用两个不同的模板，实现了 TemplateSelector。

public class AbilityItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate Critical { get; set; }
    public DataTemplate Normal { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var logItem = item as CombatLogViewModel;

        if (logItem != null)
        {
            return logItem.IsCrit ? Critical : Normal;
        }

        return base.SelectTemplate(item, container);
    }
}

  <ListView Name="AbilityList" 
          ItemsSource="{Binding LogLines}" 
          Background="{Binding BackgroundColor}" 
          Focusable="False" 
          Padding="10,10,0,0"
          IsTextSearchEnabled="False" 
          ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
          ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListView.Resources>
        <DataTemplate x:Key="CriticalTemplate">
            <StackPanel cal:Message.Attach="[Event MouseLeftButtonUp] = [Action CopyToClipBoard($dataContext)]" x:Name="Item" Orientation="Horizontal" ToolTip="{Binding TooltipText}">
                <Border BorderThickness="2"  Margin="0,0,10,0"
                        CornerRadius="5,5,5,5" RenderTransformOrigin=".5,.5">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.BorderBrush>
                    <Border.Background>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.Background>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Background">
                               <Setter.Value>
                                   <SolidColorBrush Color="{Binding ImageBorderColor}" />
                               </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <EventTrigger RoutedEvent="Border.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                                    From="Red" To="AliceBlue" 
                                                    Duration="00:00:0.500" AutoReverse="True" 
                                                    RepeatBehavior="Forever" />
                                                <ColorAnimation 
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    From="Red" To="AliceBlue" 
                                                    Duration="00:00:0.500" AutoReverse="True" 
                                                    RepeatBehavior="Forever" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Border.Loaded">
                            <EventTrigger.EnterActions>
                                <BeginStoryboard Name="Flash">
                                    <Storyboard>
                                        <ColorAnimation 
                                            Storyboard.TargetProperty="BorderBrush.Color" 
                                            Storyboard.TargetName="Border"
                                            From="Red" To="AliceBlue" Duration="0:0:1.5" AutoReverse="True" 
                                            RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.EnterActions>
                            <EventTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="Flash" />
                            </EventTrigger.ExitActions>
                        </EventTrigger>
                    </Border.Triggers>
                    <Border.RenderTransform>
                        <RotateTransform Angle="{Binding ImageAngle}" />
                    </Border.RenderTransform>
                    <Image x:Name="AbilityIcon" Source="{Binding ImageUrl}" Width="52" Height="52" 
                           RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding ImageAngle}" />
                        </Image.RenderTransform>
                    </Image>
                </Border>
                <custom:OutlinedText
                    VerticalAlignment="Center" Text="{Binding Text}" Visibility="{Binding TextVisibility}" FontSize="{Binding FontSize, FallbackValue=32}">
                </custom:OutlinedText>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="NormalTemplate">
            <StackPanel cal:Message.Attach="[Event MouseLeftButtonUp] = [Action CopyToClipBoard($dataContext)]" x:Name="Item" Orientation="Horizontal" ToolTip="{Binding TooltipText}">
                <Border x:Name="AbilityBorder"
                        BorderThickness="2"  Margin="0,0,10,0"
                        CornerRadius="8,8,8,8" RenderTransformOrigin=".5,.5">
                    <Image x:Name="AbilityIcon" Source="{Binding ImageUrl}" Width="52" Height="52" 
                           RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding ImageAngle}" />
                        </Image.RenderTransform>
                    </Image>
                    <Border.BorderBrush>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.BorderBrush>
                    <Border.Background>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.Background>
                    <Border.RenderTransform>
                        <RotateTransform Angle="{Binding ImageAngle}" />
                    </Border.RenderTransform>
                </Border>
                <custom:OutlinedText
                    VerticalAlignment="Center" Text="{Binding Text}" Visibility="{Binding TextVisibility}" FontSize="{Binding FontSize, FallbackValue=32}">
                </custom:OutlinedText>
            </StackPanel>
        </DataTemplate>
    </ListView.Resources>
    <!--<ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel cal:Message.Attach="[Event MouseLeftButtonUp] = [Action CopyToClipBoard($dataContext)]" x:Name="Item" Orientation="Horizontal" ToolTip="{Binding TooltipText}">
                <Border Name="AbilityBorder"
                        BorderThickness="2"  Margin="0,0,10,0"
                        CornerRadius="8,8,8,8" RenderTransformOrigin=".5,.5">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.BorderBrush>
                    <Border.Background>
                        <SolidColorBrush Color="{Binding ImageBorderColor}" />
                    </Border.Background>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Triggers>
                                <EventTrigger RoutedEvent="Border.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation 
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                                    From="Red" To="AliceBlue" 
                                                    Duration="00:00:0.500" AutoReverse="True" 
                                                    RepeatBehavior="Forever" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Border.RenderTransform>
                        <RotateTransform Angle="{Binding ImageAngle}" />
                    </Border.RenderTransform>
                    <Image x:Name="AbilityIcon" Source="{Binding ImageUrl}" Width="52" Height="52" 
                           RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform Angle="{Binding ImageAngle}" />
                        </Image.RenderTransform>
                    </Image>
                </Border>
                <custom:OutlinedText
                    VerticalAlignment="Center" Text="{Binding Text}" Visibility="{Binding TextVisibility}" FontSize="{Binding FontSize, FallbackValue=32}">
                </custom:OutlinedText>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate-->
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform x:Name="transform" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.10" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplateSelector>
        <custom:AbilityItemTemplateSelector 
            Normal="{StaticResource NormalTemplate}" 
            Critical="{StaticResource CriticalTemplate}" />
    </ListView.ItemTemplateSelector>
</ListView>

WPF Border Datatrigger 奇怪的行为

WPF Border Datatrigger strange behaviour

data-binding

wpf

datatrigger

storyboard

caliburn.micro