CODEWITHSUNDEEP
.netwpfxaml
Vasyl Boroviak
Vasyl Boroviak

Reputation: 6128

Animate simple ContextMenu

I have a button, which should a menu with several subitems. The menu should "slide down" or anything like that. I am trying to accomplish this using simple TranslateTransform but I am constantly getting the following runtime error: System.InvalidOperationException: 'translateTransform' name cannot be found in the name scope of 'System.Windows.Controls.ContextMenu'.

What is the cause? Is there a way to fix that? Are there any (free) alternatives to the menu animation approach?

        <Button Name="Settings" Margin="2" Style="{StaticResource GrayGrayButtonStyle}">
            <Image Source="gear.png" />
            <Button.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Item 0"/>
                    <MenuItem Header="Item 1"/>
                    <MenuItem Header="Item 2"/>
                    <MenuItem Header="Item 3"/>
                    <ContextMenu.RenderTransform>
                        <TranslateTransform x:Name="translateTransform"
                            X="{Binding 
                                Path=ActualWidth, 
                                RelativeSource={RelativeSource 
                                                FindAncestor,
                                                AncestorType={x:Type Button}}}" />
                    </ContextMenu.RenderTransform>
                    <ContextMenu.Triggers>
                        <EventTrigger RoutedEvent="ContextMenu.Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="translateTransform"
                                         Storyboard.TargetProperty="(TranslateTransform.X)"
                                         To="0"
                                         BeginTime="0:0:3.5"
                                         AutoReverse="False"
                                         Duration="0:0:2.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ContextMenu.Triggers>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>

Upvotes: 0

Views: 1351

Answers (1)

Clemens
Clemens

Reputation: 128061

Don't know what exactly you're going to achieve with that animation, but you could write it like this:

<DoubleAnimation
    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
    To="0" ... />

Unfortunatly nothing will be animated! The TranslateTransform.X property is already 0, since its binding results in an error. You could however write your TranslateTransform declaration like this:

<TranslateTransform 
    X="{Binding Path=PlacementTarget.ActualWidth,
        RelativeSource={RelativeSource AncestorType=ContextMenu}}" />

Upvotes: 1

Related Questions