Question

I currently have the XAML:

<Grid Name="WindowGrid">
    <Grid Height="66" HorizontalAlignment="Stretch" Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>

What I want is when the mouse enters the window (or even WindowGrid, preferably), the ControlGrid slides up, and vice versa (when the cursor leaves, it slides down). I have little experience in WPF/XAML, having most experience in WinForms. I understand there is a way to do this with storyboards/triggers, but the examples I’ve seen are too confusing.

Answer 1

Use event triggers to perform this:

<Grid Name="WindowGrid">

    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="ControlsGrid" 
                        Storyboard.TargetProperty="(Grid.Height)"
                        From="0" 
                        To="66" 
                        Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="ControlsGrid"
                        Storyboard.TargetProperty="(Grid.Height)"
                        From="66" 
                        To="0" 
                        Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <!-- 
        This is a sample content to demostrate animation;
        Without it 'WindowGrid' will be collapsed.
    -->
    <ListBox />

    <Grid Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>