Question

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

然后我有一个以复选框为目标的样式。当鼠标位于复选框上方时，它会更改其不透明度。双动画和绑定工作正常，但是listbox itemssource是绑定的，我想让鼠标悬停在任何复选框上时所有复选框都不透明，而不只是一个。我试图将Storyboard.TargetProperty绑定到我的viewmodel属性，但它不是依赖属性，所以我不能这样做。

这是动画：

 <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时，如何更改列表框中的所有复选框opacity？

我认为要走的路是从样式中的viewmodel绑定ImportOpacity属性，但动画不允许它。

由于

更新

我无法发布图片，因为我是新来的，但是当鼠标进入任何复选框时，我想更改全部的不透明度由datatemplate创建的复选框。动画适用于单个复选框，就像代码目前一样。我的viewmodel有一个名为＆＃34; ImportOpacity＆＃34;它被绑定到checkbox.opacity（你可以在上面的xaml中看到它）我的想法是当鼠标悬停在任何复选框上时，使用此属性使不透明度从0到100。

Answer 1

我认为您应该为users.groups.joiner属性中的Opacity属性设置动画，而不是为CheckBox的{{1}}属性设置动画并将其绑定到ImportOpacity。您的TwoWay直接。

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

绑定到ViewModel的CheckBox Opacity在DoubleAnimation中不起作用

1 个答案: