控制DataTrigger ExitActions

时间:2014-02-20 13:10:48

标签: wpf storyboard datatrigger

我有一个CheckBox(位于图像上方),其Opacity默认设置为0。当IsMouseOver为true时,CheckBox Opacity属性从0到1动画,并在IsMouseOver为false时反转。但是,如果CheckBox IsSelected为true,则不应执行反向动画(即DataTrigger.ExitActions)。即如果选中,CheckBox应保持可见状态。在我的XAML中,即使选中它,复选框也会消失。

以下是我的XAML:

<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center">
        <CheckBox.Style>
            <Style TargetType="{x:Type CheckBox}">
                <Setter Property="Opacity" Value="0" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=imageGrid, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard Timeline.DesiredFrameRate="100">
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:00.400" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard Timeline.DesiredFrameRate="100">
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:00.400" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Mode=Self}}" Value="true">
                        <Setter Property="Opacity" Value="1" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </CheckBox.Style>
    </CheckBox>

实现了@ feO2x建议的方式。但是它没有按预期工作。它在一个简单的应用程序中工作。但是我打算使用ListViewItem中的复选框。以下是我的XAML:

<Style x:Key="ThumbView_ItemContainerStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Height" Value="175" />
    <Setter Property="Width" Value="125" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Grid Background="Pink" x:Name="mygrid">
                    <Rectangle Name="LBRect" Fill="Transparent" Opacity="0.195" />
                    <Image Name="posterImg" Margin="0,0,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding Path=ProfilePic}" Height="125" MaxWidth="125" />
                    <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="CheckBox">
                        <CheckBox.RenderTransform>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                        </CheckBox.RenderTransform>

                        <CheckBox.Style>
                            <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource ThumbViewCheckBoxStyle}">
                                <Setter Property="Opacity" Value="0" />
                                <Style.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}" Value="False" />
                                            <Condition Binding="{Binding ElementName=CheckBox, Path=IsChecked}" Value="False" />
                                        </MultiDataTrigger.Conditions>
                                        <MultiDataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.4" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </MultiDataTrigger.EnterActions>
                                        <MultiDataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.4" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </MultiDataTrigger.ExitActions>
                                    </MultiDataTrigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Style>
                    </CheckBox>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2 个答案:

答案 0 :(得分:0)

2月26日更新:在您的Style中无效,您以错误的方式引用复选框。 ElementName只能在目标控件被赋予名称且可在当前WPF XAML名称范围内访问时才能在绑定中使用(您可以了解XAML名称范围here)。

您应该在绑定中使用相对源来正确引用CheckBox:RelativeSource={RelativeSource Self}。以下ListView样式显示了整个示例:

<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}">
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Name}" TextTrimming="CharacterEllipsis" />
                        <CheckBox IsChecked="{Binding IsSelected}" Grid.Column="1">
                            <CheckBox.Style>
                                <Style TargetType="{x:Type CheckBox}">
                                    <Setter Property="Opacity" Value="0.0" />
                                    <Style.Triggers>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                                                        Value="False" />
                                                <Condition Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource Self}}"
                                                        Value="False" />
                                            </MultiDataTrigger.Conditions>
                                            <MultiDataTrigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                        To="0.0" Duration="0:0:0.4" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </MultiDataTrigger.EnterActions>
                                            <MultiDataTrigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                        To="1.0" Duration="0:0:0.4" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </MultiDataTrigger.ExitActions>
                                        </MultiDataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </CheckBox.Style>
                        </CheckBox>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以从here(DropBox链接)下载工作示例。

原始答案: 您可以在样式中使用MultiDataTrigger来完成所需的行为。看看下面的代码:

<CheckBox Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Content="Check Me" Name="CheckBox">
    <CheckBox.Style>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Opacity" Value="0.0" />
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding ElementName=Rectangle, Path=IsMouseOver}" Value="False" />
                        <Condition Binding="{Binding ElementName=CheckBox, Path=IsChecked}" Value="False" />
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 To="0.0"
                                                 Duration="0:0:0.4"
                                                 BeginTime="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                    <MultiDataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 To="1.0"
                                                 Duration="0:0:0.4" />
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.ExitActions>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Style>
</CheckBox>

MultiDataTrigger用于描述要执行的输入操作必须为true的两个条件。在这种情况下,我选择矩形的IsMouseOver属性以及复选框的IsChecked属性都必须为false。因此,当鼠标位于矩形上方时,复选框将淡入,并在检查时保持可见。

您可以下载我的完整示例here(这是Dropbox链接)。

希望这会对你有所帮助。如果您有任何疑问,请随时发表评论。

答案 1 :(得分:0)

这可以通过IMultiValueConverter来实现。将两个绑定传递给它IsMouseOverIsChecked

<强>转换器

public class MyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, 
                          CultureInfo culture)
    {
        bool isMouseOver = (bool)values[0];
        bool isChecked = (bool)values[1];

        return isChecked || isMouseOver;
    }

    public object[] ConvertBack(object value, Type[] targetTypes,
                                object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

<强> XAML

<DataTrigger Value="True">
   <DataTrigger.Binding>
      <MultiBinding Converter="{StaticResource MyConverter}">
         <Binding Path="IsMouseOver" ElementName="imageGrid"/>
         <Binding Path="IsChecked" RelativeSource="{RelativeSource Self}"/>
      </MultiBinding>
   </DataTrigger.Binding>
   <!-- Rest same trigger -->
</DataTrigger>

当然,您需要在XAML文件中添加MyValueConverter实例作为资源。