CheckBox Opacity bound to ViewModel takes no effect in DoubleAnimation

Question

I have got a ListBox.ItemTemplate that has got a ToggleButton and inside of it a checkbox and a ProgressBarEdit from devexpress.

Then I have a style that targets the checkbox. When the mouse is over the checkbox it changes its opacity. The double animation and the binding works fine, however the listbox itemssource is bound and I would like to make all the checkboxes opacity change when the mouse is over any checkbox and not just one. I tried to bind Storyboard.TargetProperty to my viewmodel property but it is not a dependency property so I cannot do it.

This is the animation:

 <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>

This is part of the ListBox control:

            <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>

How can I change all the checkboxes opacity from the Listbox when Control.MouseEnter is triggered?

I thought the way to go was binding the ImportOpacity property from my viewmodel in the style, but the animation does not allow it.

Thanks

Update:

I cannot post images because I am new here, but I would like to change the Opacity for all the checkboxes created by the datatemplate when the mouse enter in any checkbox. The animation works fine for individual checkboxes like the code does at the moment. My viewmodel has got a property called "ImportOpacity" and it is bound to the checkbox.opacity (you can see it in the xaml above) My idea was to use this property to make the Opacity from 0 to 100 when the mouse is over any checkbox.

Chao Chao · Accepted Answer · 2015-08-11T13:37:56

Instead of animate the Opacity property of the CheckBox and bind it to ImportOpacity with TwoWay mode, I think you should animate the ImportOpacity property in your ViewModeldirectly.

Here is a reference about how to animate property in ViewModel.

CheckBox Opacity bound to ViewModel takes no effect in DoubleAnimation

1 Answers