绑定到 ViewModel 的复选框不透明度在 DoubleAnimation 中不起作用

Question

我有一个 ListBox.ItemTemplate，它有一个 ToggleButton，里面有一个复选框和一个来自 devexpress 的 ProgressBarEdit。

然后我有一个针对复选框的样式。当鼠标悬停在复选框上时，它会改变其不透明度。双动画和绑定工作正常，但是列表框 itemssource 是绑定的，我想让所有复选框的不透明度在鼠标悬停在任何复选框上时发生变化，而不仅仅是一个。我试图将 Storyboard.TargetProperty 绑定到我的视图模型属性但它不是依赖项属性所以我不能这样做。

这是动画：

 <Style x:Key="FadeOutButton" TargetType="{x:Type CheckBox}">
       <Style.Triggers>
            <DataTrigger Binding="{Binding IsMouseOver, ElementName=chkImport}" Value="true">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:1"
                                             Storyboard.TargetProperty="Opacity"
                                             To="1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:1"
                                             Storyboard.TargetProperty="Opacity"
                                             To="0.02" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>

这是 ListBox 控件的一部分：

            <ListBox x:Name="FileDetailsListBox"
                     Grid.Column="2"
                     BorderThickness="0"
                     ItemsSource="{Binding FileDetailsList}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <ToggleButton x:Name="FileToggleButton"
                                      Margin="-1,0,-1,0"
                                      HorizontalAlignment="Stretch"
                                      HorizontalContentAlignment="Stretch"
                                      BorderThickness="0,0">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <CheckBox x:Name="chkImport"
                                                  Margin="0,0,0,3"
                                                  HorizontalContentAlignment="Center"
                                                  IsChecked="{Binding Import,
                                                                      Mode=TwoWay,
                                                                      UpdateSourceTrigger=PropertyChanged}"
                                                  Opacity="{Binding DataContext.ImportOpacity,
                                                                    Mode=TwoWay,
                                                                    UpdateSourceTrigger=PropertyChanged,
                                                                    ElementName=ImportView}"
                                                  Style="{StaticResource FadeOutButton}" />
                                        <dxe:ProgressBarEdit Grid.Row="2"
                                                             Height="20"
                                                             Margin="-3,0,-3,0"
                                                             EditValue="{Binding ProgressValue}"
                                                             ShowBorder="False"
                                                             StyleSettings="{Binding IsMarquee,
                                                                                     Converter={StaticResource conv}}" />
                                    </Grid>                                                
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

如何在触发 Control.MouseEnter 时更改列表框中所有复选框的不透明度？

我认为要走的路是在样式中绑定我的视图模型中的 ImportOpacity 属性，但动画不允许这样做。

谢谢

更新：

我不能post图片，因为我是新来的，但我想更改所有鼠标输入时由数据模板创建的复选框的不透明度任何复选框。动画适用于单个复选框，就像代码目前所做的那样。我的视图模型有一个名为 "ImportOpacity" 的属性并且它绑定到 checkbox.opacity （你可以在上面的 xaml 中看到它）我的想法是使用这个属性当鼠标悬停在任何复选框上时，使不透明度从 0 到 100。

Answer 1

我认为您应该为 CheckBox 的 Opacity 属性设置动画并使用 TwoWay 模式将其绑定到 ImportOpacity 而不是设置动画 ImportOpacity 属性直接在您的 ViewModel 中。

Here 是关于如何在 ViewModel 中为属性设置动画的参考。

绑定到 ViewModel 的复选框不透明度在 DoubleAnimation 中不起作用

CheckBox Opacity bound to ViewModel takes no effect in DoubleAnimation

vb.net

wpf

xaml

mvvm

devexpress-wpf