Storyboard animation likes 'inside' button but not 'outside' butto

Hello everyone!

I'm trying to do a 'sliding effect' panel.

I am trying to trigger a animation with Storyboard via a button to
'collapse' the panel (a grid).

One button works, the other does not.

One button is 'in' the grid control being animated.
The other button is not.

EventTrigger (below) that works when the 'launch button' is 'in' the layout
control
being animated (via EventTrigger, RoutedEvent, SourceName)
[Collapse_01_grd_amt_pbt_ctr - Button 01].

When the EventTrigger uses a button 'outside' the layout control

[Collapse_02_grd_amt_pbt_ctr - Button 02].

I get a:

Cannot find a FrameworkElement with Name 'Collapse_02_grd_amt_pbt_ctr'.

------ Try this for yourself ------

In the code below (which works as is).
You will have to change the namespace and class to the WPF Window1 format.

Change the button reference
"Collapse_01_grd_amt_pbt_ctr" (line 14)
to
"Collapse_02_grd_amt_pbt_ctr" (line 14)

-------------

A runtime error occurs as follows when using 'button 02'

Also I noticed that EventTriggers can not be named (Name="MyEventTrigger_01").
Why is that true?? Is it because they reside in the Triggers collection?
Why should that make a difference?

Any help is appreciated.

Shawnk

PS. If someones knows a quick way to do the Storyboard.Begin() or
BeginStoryboard in the code behind let me know. (still working on it :-)

------------The code--------

<Window
x:Class = "Storyboard_Animation.Window1"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Storyboard_Animation"
Height = "600"
Width = "600"
>

<DockPanel>

<Grid Name="Nav_panel_grd_ctr" Background="orange" Height="200" Width="200"
HorizontalAlignment="Left" >
<Grid.Triggers>
<EventTrigger RoutedEvent="Button.Click"
SourceName="Collapse_01_grd_amt_pbt_ctr">
<BeginStoryboard Name="Collapse_grd_amt_ctr">
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="Nav_panel_grd_ctr"
Storyboard.TargetProperty="Width"
From="200" To="0" Duration="0:0:5" AutoReverse="true" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>

<StackPanel MinWidth="150">
<Button Content="Collapse Grid 01" HorizontalAlignment="Left"
Name="Collapse_01_grd_amt_pbt_ctr" />
<Button Content="Button Content" HorizontalAlignment="Left"/>
<Button Content="Button Content" HorizontalAlignment="Left"/>
<Button Content="Button Content" HorizontalAlignment="Left"/>
<Button Content="Button Content" HorizontalAlignment="Left"/>
</StackPanel>
</Grid>

<StackPanel >

<Border Name = "Status_bar_06_brd_ctr"
>


<Grid Name = "Status_bar_06_grd_ctr"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*"/> <!-- Control set -->
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/> <!-- StatusBar -->
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/> <!-- Clear button -->
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/> <!-- ProgressBar -->
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>

<StatusBar Name = "StatusBar_01_stb_ctr"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Row = "1"
Grid.Column = "1"
>
<StatusBar.ToolTip>
<TextBlock>Status bar which displays the results of various
operations</TextBlock>
</StatusBar.ToolTip>
<StatusBarItem>
<TextBlock>Ready</TextBlock>
</StatusBarItem>
<StatusBarItem>
<Separator />
</StatusBarItem>
</StatusBar>

<Button Name = "Collapse_02_grd_amt_pbt_ctr"
Content = "_Collapse_Grid 02"
ToolTip = "Collapse the Grid from another button"
Grid.Row = "1" Grid.Column="3"
/>
</Grid>
</Border>
</StackPanel>

</DockPanel>
</Window>

I figured out a way to do what I need (but still have the
concern about the 'Button 02' visibility for the EventTrigger.

Anyway, I did the following:

[1] Set the storyboard name as below:

....<EventTrigger RoutedEvent="Button.Click"
SourceName="Collapse_01_grd_amt_pbt_ctr">
....<BeginStoryboard Name="Collapse_grd_amt_ctr">
<Storyboard x:Name="Collapse_grd_sbd_ctr">

[2] Launch the animation in a button event handler :

<!--==3==== Launch button
======================================:===================================:_:==-->

<Button Name = "Collapse_02_grd_amt_pbt_ctr" Click =
"On_IDM_start_grid_collapse_amt_mth"
Content = "_Collapse_Grid 02" ToolTip =
"Collapse the Grid from another button"
Grid.Row = "1" Grid.Column="3"
/>

[3] Kick off the animation in the code behind as below:

void On_IDM_start_grid_collapse_amt_mth(
object p_sender_obj,
RoutedEventArgs p_evt
){
Collapse_grd_sbd_ctr.Begin(Nav_panel_grd_ctr);
}

The trick (for me) was naming the story board.
I had to use
x:Name="myName"
instead of
Name="myName"

This approach is for menu driven collapse of major layout panels in the
viewport
(Window1 class in the standard WPF project).

Note that both buttons (01, and 02) will work using this approach.
Which means you can use an artifact on the panel as well as a menu
driven/toolbar approach.

Happy Coding!!!

Shawnk



"Shawnk" wrote:

> Hello everyone!
>
> I'm trying to do a 'sliding effect' panel.
>
> I am trying to trigger a animation with Storyboard via a button to
> 'collapse' the panel (a grid).
>
> One button works, the other does not.
>
> One button is 'in' the grid control being animated.
> The other button is not.
>
> EventTrigger (below) that works when the 'launch button' is 'in' the layout
> control
> being animated (via EventTrigger, RoutedEvent, SourceName)
> [Collapse_01_grd_amt_pbt_ctr - Button 01].
>
> When the EventTrigger uses a button 'outside' the layout control
>
> [Collapse_02_grd_amt_pbt_ctr - Button 02].
>
> I get a:
>
> Cannot find a FrameworkElement with Name 'Collapse_02_grd_amt_pbt_ctr'.
>
> ------ Try this for yourself ------
>
> In the code below (which works as is).
> You will have to change the namespace and class to the WPF Window1 format.
>
> Change the button reference
> "Collapse_01_grd_amt_pbt_ctr" (line 14)
> to
> "Collapse_02_grd_amt_pbt_ctr" (line 14)
>
> -------------
>
> A runtime error occurs as follows when using 'button 02'
>
> Also I noticed that EventTriggers can not be named (Name="MyEventTrigger_01").
> Why is that true?? Is it because they reside in the Triggers collection?
> Why should that make a difference?
>
> Any help is appreciated.
>
> Shawnk
>
> PS. If someones knows a quick way to do the Storyboard.Begin() or
> BeginStoryboard in the code behind let me know. (still working on it :-)
>
> ------------The code--------
>
> <Window
> x:Class = "Storyboard_Animation.Window1"
> xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
> xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
> Title = "Storyboard_Animation"
> Height = "600"
> Width = "600"
> >
>
> <DockPanel>
>
> <Grid Name="Nav_panel_grd_ctr" Background="orange" Height="200" Width="200"
> HorizontalAlignment="Left" >
> <Grid.Triggers>
> <EventTrigger RoutedEvent="Button.Click"
> SourceName="Collapse_01_grd_amt_pbt_ctr">
> <BeginStoryboard Name="Collapse_grd_amt_ctr">
> <Storyboard >
> <DoubleAnimation
> Storyboard.TargetName="Nav_panel_grd_ctr"
> Storyboard.TargetProperty="Width"
> From="200" To="0" Duration="0:0:5" AutoReverse="true" />
> </Storyboard>
> </BeginStoryboard>
> </EventTrigger>
> </Grid.Triggers>
>
> <StackPanel MinWidth="150">
> <Button Content="Collapse Grid 01" HorizontalAlignment="Left"
> Name="Collapse_01_grd_amt_pbt_ctr" />
> <Button Content="Button Content" HorizontalAlignment="Left"/>
> <Button Content="Button Content" HorizontalAlignment="Left"/>
> <Button Content="Button Content" HorizontalAlignment="Left"/>
> <Button Content="Button Content" HorizontalAlignment="Left"/>
> </StackPanel>
> </Grid>
>
> <StackPanel >
>
> <Border Name = "Status_bar_06_brd_ctr"
> >
>
>
> <Grid Name = "Status_bar_06_grd_ctr"
> VerticalAlignment="Stretch"
> HorizontalAlignment="Stretch"
> >
> <Grid.RowDefinitions>
> <RowDefinition Height="20" />
> <RowDefinition Height="*"/> <!-- Control set -->
> <RowDefinition Height="20" />
> </Grid.RowDefinitions>
> <Grid.ColumnDefinitions>
> <ColumnDefinition Width="10"/>
> <ColumnDefinition Width="*"/> <!-- StatusBar -->
> <ColumnDefinition Width="10"/>
> <ColumnDefinition Width="Auto"/> <!-- Clear button -->
> <ColumnDefinition Width="10"/>
> <ColumnDefinition Width="Auto"/> <!-- ProgressBar -->
> <ColumnDefinition Width="10"/>
> </Grid.ColumnDefinitions>
>
> <StatusBar Name = "StatusBar_01_stb_ctr"
> VerticalAlignment="Stretch"
> HorizontalAlignment="Stretch"
> Grid.Row = "1"
> Grid.Column = "1"
> >
> <StatusBar.ToolTip>
> <TextBlock>Status bar which displays the results of various
> operations</TextBlock>
> </StatusBar.ToolTip>
> <StatusBarItem>
> <TextBlock>Ready</TextBlock>
> </StatusBarItem>
> <StatusBarItem>
> <Separator />
> </StatusBarItem>
> </StatusBar>
>
> <Button Name = "Collapse_02_grd_amt_pbt_ctr"
> Content = "_Collapse_Grid 02"
> ToolTip = "Collapse the Grid from another button"
> Grid.Row = "1" Grid.Column="3"
> />
> </Grid>
> </Border>
> </StackPanel>
>
> </DockPanel>
> </Window>
>