我有一个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>
答案 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来实现。将两个绑定传递给它IsMouseOver
和IsChecked
。
<强>转换器强>:
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
实例作为资源。