CODEWITHSUNDEEP
c#wpfxaml
mHelpMe
mHelpMe

Reputation: 6668

WPF Sliding a Grid

I have a WPF application that contains a ribbon menu. It's rather simple as I'm trying to learn more about WPF. So I have two ribbon groups. Each group has one button. What I want to happen when someone hovers the mouse over the button for a grid to slide down. I.e. start from the just underneath the ribbon menu and go all the way to the bottom of my window.

Below is my code. It is kind of working. When it hovers over the button "buttSimSec" the grid "paneSimFirst" does slide. However it starts in the center of my application window. The other button does nothing when a mouse hovers over it.

Also I would like to know how to not have to repeat the EventTrigger code for every button in my ribbon?

<DockPanel Name="dockMain">
    <Ribbon DockPanel.Dock="Top" Title="Simulator" x:Name="mainRibbon">            
        <RibbonTab x:Name="Simulator" Header="Simulator">
            <RibbonGroup x:Name="grpSecurities" Header="Securities">
                <RibbonButton x:Name="buttSimSec" Label="Select Securities">
                    <RibbonButton.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="paneSimFirst"
                                        Storyboard.TargetProperty="(Grid.Height)"
                                        From="0"
                                        To="50"
                                        Duration="0:0:2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </RibbonButton.Triggers>
                </RibbonButton>
            </RibbonGroup>
            <RibbonGroup x:Name="grpModels" Header="Models">
                <RibbonButton x:Name="buttModels" Label="View Models">
                    <RibbonButton.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="paneSimSecond"
                                        Storyboard.TargetProperty="(Grid.Height)"
                                        From="0"
                                        To="50"
                                        Duration="0:0:2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </RibbonButton.Triggers>
                </RibbonButton>
            </RibbonGroup>
        </RibbonTab>
    </Ribbon>
    <Grid Name="ParentGrid" Grid.IsSharedSizeScope="True" Visibility="Visible">
        <Grid x:Name="paneSimFirst" Visibility="Visible" Background="Purple">
        </Grid>
        <Grid x:Name="paneSimSecond" Visibility="Collapsed" Background="YellowGreen">
        </Grid>
    </Grid>
</DockPanel>

Upvotes: 0

Views: 746

Answers (1)

MaMazav
MaMazav

Reputation: 1885

  1. Grid position wherever you want can be done by the RenderTransform property.

    http://msdn.microsoft.com/en-us/library/system.windows.uielement.rendertransform%28v=vs.110%29.aspx

  2. Use Style property to let some elements the same behavior. http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.style%28v=vs.110%29.aspx

Upvotes: 0

Related Questions