1

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

然后我有一个针对复选框的样式。当鼠标悬停在复选框上时,它会更改其不透明度。双动画和绑定工作正常,但是列表框项目源已绑定,当鼠标悬停在任何复选框上时,我想让所有复选框的不透明度发生变化,而不仅仅是一个。我试图将 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 时,如何更改列表框中的所有复选框不透明度?

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

谢谢

更新:

我无法发布图像,因为我是新来的,但是当鼠标进入任何复选框时,我想更改数据模板创建的所有复选框的不透明度。动画适用于单个复选框,就像目前的代码一样。我的 viewmodel 有一个名为“ImportOpacity”的属性,它绑定到 checkbox.opacity(您可以在上面的 xaml 中看到它)我的想法是当鼠标悬停在任何位置时,使用此属性将不透明度从 0 变为 100复选框。

4

1 回答 1

0

我认为您应该直接为您的属性设置动画,而不是为 the 的Opacity属性设置动画并将其CheckBox绑定到ImportOpacity模式。TwoWayImportOpacityViewModel

是有关如何在ViewModel.

于 2015-08-11T13:37:56.760 回答