Material Design (WPF): Disable CheckBox Animation

Question

How can I disable the circle/ripple checkbox animation in MaterialDesignInXAML?

I have tried the following settings without success:

md:RippleAssist.IsDisabled="True"
md:RippleAssist.Feedback="Transparent"
md:TransitionAssist.DisableTransitions="True"

Answer 1

Assuming you like all the rest of the functionality in there, I think you will need to re template.

If you take a look at the source for materialdesigninxaml here:

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.CheckBox.xaml

( Which is massive or I'd paste it all here.)

You will notice there's an ellipse called "InteractionEllipse". You can copy the template and rip that out.

                            <Ellipse x:Name="InteractionEllipse" Fill="{TemplateBinding Foreground}" Width="0" Height="0" Canvas.Top="12" Canvas.Left="12" Opacity="0" RenderTransformOrigin="0.5,0.5"
                                     IsHitTestVisible="False">
                                <Ellipse.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Ellipse.RenderTransform>
                            </Ellipse>

And there's a storyboard invoked on click, you will want to modify. Or maybe just remove.

                    <Storyboard x:Key="Click">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="InteractionEllipse">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="48"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="InteractionEllipse">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="48"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="InteractionEllipse">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-24"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="InteractionEllipse">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-24"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="InteractionEllipse">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>

Then either use your new template on your checkboxes of choice or "over write" their version with your own from a resource dictionary you merge after the material design stuff.

Alteratively.

You could perhaps make it use a different brush for fill. You could add an attached dependency property or a dynamicresource. That way you could choose transparent for some or all of your checkboxes and I think it'd disappear.

It template binds to foreground

  Fill="{TemplateBinding Foreground}