WPF Sliding a Grid

Question

У меня есть приложение WPF, содержащее меню ленты. Это довольно просто, поскольку я пытаюсь узнать больше о WPF. Поэтому у меня две группы лент. Каждая группа имеет одну кнопку. То, что я хочу, когда кто-то наводит мышь на кнопку, чтобы сетка скользила вниз. То есть начните с правого под ленточным меню и пройдите до конца моего окна.

Ниже приведен мой код. Это своего рода работа. Когда он нависает над кнопкой «buttSimSec», сетка «paneSimFirst» делает слайд. Однако он начинается в центре окна моего приложения. Другая кнопка ничего не делает, когда над ним нависает мышь.

Также я хотел бы знать, как не нужно повторять код EventTrigger для каждой кнопки на моей ленте?

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

Answer 1

1. положение сетки, где вы хотите, может быть сделано с помощью свойства RenderTransform.

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

2. Используйте свойство стиля, чтобы некоторые элементы такое же поведение. http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.style%28v=vs.110%29.aspx