Windows Vista Forums

How to animate To/From an Auto value?
  1. #1


    Shawnk Guest

    How to animate To/From an Auto value?

    I have storyboard animations that work well but
    I do not know how to set the From/To value targets
    for width and height to the 'Auto' value.

    In the XAML code below I would like the "80" value to be "Auto"
    but that won't compile.

    My XAML code is:

    <Grid Name = "My_grid_ctr" >
    <Grid.Triggers>
    <EventTrigger RoutedEvent="Button.Click" >
    <BeginStoryboard Name="My_grid_amt_ctr" >
    <Storyboard x:Name="My_grid_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName="My_grid_ctr"
    Storyboard.TargetProperty="Height"
    From="0" To="80" Duration="0:0:3" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </Grid.Triggers>
    </Grid>



    In the event handler I have:

    My_grid_stb_ctr.Begin( My_grid_ctr );

    The animations work great for numeric fixed value targets (like To="80"
    above).
    How can I get them to target an 'Auto' width or height (in either From/To).

    Also - I have tryed to reset the UI elements to the auto value in code via:

    My_grid_ctr.Width = double.NaN; // Auto Width
    My_grid_ctr.Height = double.NaN; // Auto Height
    My_grid_ctr.InvalidateVisual(); // Redraw element

    But that does not seem to reset them.

    Thanks ahead of time.

    Shawnk

    PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    animation targets.



      My System SpecsSystem Spec

  2. #2


    Bill Henning Guest

    Re: How to animate To/From an Auto value?

    You don't need to set both the From and To if you don't want.

    For instance, if you leave From blank and fill in To, it will animate from
    the default height to the "To" value. Whereas if you leave To blank and
    fill in From, I believe it will animate from the "From" value to the default
    height. I have only tried the former myself and not the latter but I
    believe it would work.

    --

    Bill Henning
    Actipro Software

    WPF Wizard Control -
    http://www.actiprosoftware.com/Produ...d/Default.aspx



    "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    >I have storyboard animations that work well but
    > I do not know how to set the From/To value targets
    > for width and height to the 'Auto' value.
    >
    > In the XAML code below I would like the "80" value to be "Auto"
    > but that won't compile.
    >
    > My XAML code is:
    >
    > <Grid Name = "My_grid_ctr" >
    > <Grid.Triggers>
    > <EventTrigger RoutedEvent="Button.Click" >
    > <BeginStoryboard Name="My_grid_amt_ctr" >
    > <Storyboard x:Name="My_grid_sbd_ctr" >
    > <DoubleAnimation
    > Storyboard.TargetName="My_grid_ctr"
    > Storyboard.TargetProperty="Height"
    > From="0" To="80" Duration="0:0:3" />
    > </Storyboard>
    > </BeginStoryboard>
    > </EventTrigger>
    > </Grid.Triggers>
    > </Grid>
    >
    > In the event handler I have:
    >
    > My_grid_stb_ctr.Begin( My_grid_ctr );
    >
    > The animations work great for numeric fixed value targets (like To="80"
    > above).
    > How can I get them to target an 'Auto' width or height (in either
    > From/To).
    >
    > Also - I have tryed to reset the UI elements to the auto value in code
    > via:
    >
    > My_grid_ctr.Width = double.NaN; // Auto Width
    > My_grid_ctr.Height = double.NaN; // Auto Height
    > My_grid_ctr.InvalidateVisual(); // Redraw element
    >
    > But that does not seem to reset them.
    >
    > Thanks ahead of time.
    >
    > Shawnk
    >
    > PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    > animation targets.
    >
    >




      My System SpecsSystem Spec

  3. #3


    Shawnk Guest

    Re: How to animate To/From an Auto value?

    Bill,

    Thanks much for the advice.

    We tryed dropping the From and to (Just use From or To by itself) - It did
    not work. With the code below:

    <EventTrigger RoutedEvent="Button.Click"
    >

    <BeginStoryboard
    Name="Close_status_block_via_width_01_skp_amt_ctr" >
    <Storyboard
    x:Name="Close_status_block_via_width_01_skp_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName="Status_block_03_skp_ctr"
    Storyboard.TargetProperty="Width"
    To="0" Duration="0:0:3" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    We received the exception.

    "'System.Windows.Media.Animation.DoubleAnimation' cannot use default
    origin value of 'NaN'."

    I tryed some permutations/variations all with bad results.

    I finally found an alternate approach that seems to be working. I'll post
    the solution once it passes all the testing.

    Thanks again for your helpful advice. I think that soultion (To alone/From
    alone) may work in other situations but it died on my system (XP with .NET
    3.0 RTM, XAML, C#, VS Studio 2005).

    Shawnk


    "Bill Henning" wrote:

    > You don't need to set both the From and To if you don't want.
    >
    > For instance, if you leave From blank and fill in To, it will animate from
    > the default height to the "To" value. Whereas if you leave To blank and
    > fill in From, I believe it will animate from the "From" value to the default
    > height. I have only tried the former myself and not the latter but I
    > believe it would work.
    >
    > --
    >
    > Bill Henning
    > Actipro Software
    >
    > WPF Wizard Control -
    > http://www.actiprosoftware.com/Produ...d/Default.aspx
    >
    >
    >
    > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    > news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    > >I have storyboard animations that work well but
    > > I do not know how to set the From/To value targets
    > > for width and height to the 'Auto' value.
    > >
    > > In the XAML code below I would like the "80" value to be "Auto"
    > > but that won't compile.
    > >
    > > My XAML code is:
    > >
    > > <Grid Name = "My_grid_ctr" >
    > > <Grid.Triggers>
    > > <EventTrigger RoutedEvent="Button.Click" >
    > > <BeginStoryboard Name="My_grid_amt_ctr" >
    > > <Storyboard x:Name="My_grid_sbd_ctr" >
    > > <DoubleAnimation
    > > Storyboard.TargetName="My_grid_ctr"
    > > Storyboard.TargetProperty="Height"
    > > From="0" To="80" Duration="0:0:3" />
    > > </Storyboard>
    > > </BeginStoryboard>
    > > </EventTrigger>
    > > </Grid.Triggers>
    > > </Grid>
    > >
    > > In the event handler I have:
    > >
    > > My_grid_stb_ctr.Begin( My_grid_ctr );
    > >
    > > The animations work great for numeric fixed value targets (like To="80"
    > > above).
    > > How can I get them to target an 'Auto' width or height (in either
    > > From/To).
    > >
    > > Also - I have tryed to reset the UI elements to the auto value in code
    > > via:
    > >
    > > My_grid_ctr.Width = double.NaN; // Auto Width
    > > My_grid_ctr.Height = double.NaN; // Auto Height
    > > My_grid_ctr.InvalidateVisual(); // Redraw element
    > >
    > > But that does not seem to reset them.
    > >
    > > Thanks ahead of time.
    > >
    > > Shawnk
    > >
    > > PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    > > animation targets.
    > >
    > >

    >
    >
    >


      My System SpecsSystem Spec

  4. #4


    Shawnk Guest

    RE: How to animate To/From an Auto value?


    I tryed an alternate approach to expand/collapse animation (for large panels
    like navigation panels).

    I used the ScaleTransfrom animation technique to 'scale' from '0' to 'Auto'.
    The code to hide a grid control is given below.

    Unfortunately this approach did not seem to work.
    I can collapse the grid with this approach but I can not expand it
    once it is collapsed.

    Note that the 'open back up' process starts with a fully collapsed UI element
    that has been 'scaled to 0' (ie. a 'hidden' panel).

    If anyone has an explanation (on why the open back up does not work)
    please let use know :-)

    Shawnk

    -----

    The code to open the panel back up is:

    void On_IDM_open_transform_via_width_amt_mth(
    object p_sender_obj,
    RoutedEventArgs p_evt
    ){
    if ( m_status_panel_is_open_flg == false )
    {
    Transform_open_status_block_via_width_01_grd_sbd_ctr. Begin(
    Status_bar_06_grd_ctr );

    m_status_stack_panel_is_open_flg = true;
    }
    }

    The XAML code is:



    <Grid Name = "Status_bar_06_grd_ctr"
    HorizontalAlignment = "Stretch"
    ShowGridLines = "True"
    Height = "80"
    Background = "Yellow"
    >


    <Grid.RenderTransform>
    <ScaleTransform x:Name="Status_transform_grd_amt_ctr" ScaleX="1"
    ScaleY="1" />
    </Grid.RenderTransform>

    <Grid.Triggers>

    <EventTrigger RoutedEvent = "Button.Click" >
    <BeginStoryboard x:Name =
    "Transform_close_status_block_01_grd_amt_ctr" >
    <Storyboard x:Name =
    "Transform_close_status_block_01_grd_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_grd_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="0.0" Duration="0:0:3"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent = "Button.Click">
    <BeginStoryboard x:Name =
    "Transform_open_status_block_01_grd_amt_ctr" >
    <Storyboard x:Name =
    "Transform_open_status_block_01_grd_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_grd_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="1.0" Duration="0:0:3"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent = "Button.Click">
    <BeginStoryboard>
    <Storyboard x:Name =
    "Transform_animate_status_block_01_grd_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_grd_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="0.0" Duration="0:0:3"
    AutoReverse="true"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    </Grid.Triggers>
    .... other code contained in grid
    </Grid>


    "Shawnk" wrote:

    > I have storyboard animations that work well but
    > I do not know how to set the From/To value targets
    > for width and height to the 'Auto' value.
    >
    > In the XAML code below I would like the "80" value to be "Auto"
    > but that won't compile.
    >
    > My XAML code is:
    >
    > <Grid Name = "My_grid_ctr" >
    > <Grid.Triggers>
    > <EventTrigger RoutedEvent="Button.Click" >
    > <BeginStoryboard Name="My_grid_amt_ctr" >
    > <Storyboard x:Name="My_grid_sbd_ctr" >
    > <DoubleAnimation
    > Storyboard.TargetName="My_grid_ctr"
    > Storyboard.TargetProperty="Height"
    > From="0" To="80" Duration="0:0:3" />
    > </Storyboard>
    > </BeginStoryboard>
    > </EventTrigger>
    > </Grid.Triggers>
    > </Grid>
    >
    > In the event handler I have:
    >
    > My_grid_stb_ctr.Begin( My_grid_ctr );
    >
    > The animations work great for numeric fixed value targets (like To="80"
    > above).
    > How can I get them to target an 'Auto' width or height (in either From/To).
    >
    > Also - I have tryed to reset the UI elements to the auto value in code via:
    >
    > My_grid_ctr.Width = double.NaN; // Auto Width
    > My_grid_ctr.Height = double.NaN; // Auto Height
    > My_grid_ctr.InvalidateVisual(); // Redraw element
    >
    > But that does not seem to reset them.
    >
    > Thanks ahead of time.
    >
    > Shawnk
    >
    > PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    > animation targets.
    >
    >


      My System SpecsSystem Spec

  5. #5


    Shawnk Guest

    Re: How to animate To/From an Auto value?

    Bill,

    Just to let you know - None of the alternate approaches worked for us.

    I am coding just from the Microsoft Documentation (no WPF - XAML books) just
    yet.

    Although I'm new to the WPF/XAML architecture it seems their
    Animation/Eventing design is targeted to animated controls and not animated
    applications (layout - panel level animation) since the EventTrigger -
    RoutedEvent - SourceName scope is all 'inward' where animations are parent
    based and child triggered.

    The lack of a 'Auto' and '*' targets in DoubleAnimations are also reflective
    (it seems) of a 'control animation centric' design.

    I'll post a general architecture question, relative to Animation Scope
    Architecture Limits in this forum later on today.

    Also note, I'm new to WPF - XAML so, hopefully, I'm wrong on the
    architectural limitations of WPF-XAML.

    Thanks again for your comments :-)

    Shawnk

    "Shawnk" wrote:

    > Bill,
    >
    > Thanks much for the advice.
    >
    > We tryed dropping the From and to (Just use From or To by itself) - It did
    > not work. With the code below:
    >
    > <EventTrigger RoutedEvent="Button.Click"
    > >

    > <BeginStoryboard
    > Name="Close_status_block_via_width_01_skp_amt_ctr" >
    > <Storyboard
    > x:Name="Close_status_block_via_width_01_skp_sbd_ctr" >
    > <DoubleAnimation
    > Storyboard.TargetName="Status_block_03_skp_ctr"
    > Storyboard.TargetProperty="Width"
    > To="0" Duration="0:0:3" />
    > </Storyboard>
    > </BeginStoryboard>
    > </EventTrigger>
    >
    > We received the exception.
    >
    > "'System.Windows.Media.Animation.DoubleAnimation' cannot use default
    > origin value of 'NaN'."
    >
    > I tryed some permutations/variations all with bad results.
    >
    > I finally found an alternate approach that seems to be working. I'll post
    > the solution once it passes all the testing.
    >
    > Thanks again for your helpful advice. I think that soultion (To alone/From
    > alone) may work in other situations but it died on my system (XP with .NET
    > 3.0 RTM, XAML, C#, VS Studio 2005).
    >
    > Shawnk
    >
    >
    > "Bill Henning" wrote:
    >
    > > You don't need to set both the From and To if you don't want.
    > >
    > > For instance, if you leave From blank and fill in To, it will animate from
    > > the default height to the "To" value. Whereas if you leave To blank and
    > > fill in From, I believe it will animate from the "From" value to the default
    > > height. I have only tried the former myself and not the latter but I
    > > believe it would work.
    > >
    > > --
    > >
    > > Bill Henning
    > > Actipro Software
    > >
    > > WPF Wizard Control -
    > > http://www.actiprosoftware.com/Produ...d/Default.aspx
    > >
    > >
    > >
    > > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    > > news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    > > >I have storyboard animations that work well but
    > > > I do not know how to set the From/To value targets
    > > > for width and height to the 'Auto' value.
    > > >
    > > > In the XAML code below I would like the "80" value to be "Auto"
    > > > but that won't compile.
    > > >
    > > > My XAML code is:
    > > >
    > > > <Grid Name = "My_grid_ctr" >
    > > > <Grid.Triggers>
    > > > <EventTrigger RoutedEvent="Button.Click" >
    > > > <BeginStoryboard Name="My_grid_amt_ctr" >
    > > > <Storyboard x:Name="My_grid_sbd_ctr" >
    > > > <DoubleAnimation
    > > > Storyboard.TargetName="My_grid_ctr"
    > > > Storyboard.TargetProperty="Height"
    > > > From="0" To="80" Duration="0:0:3" />
    > > > </Storyboard>
    > > > </BeginStoryboard>
    > > > </EventTrigger>
    > > > </Grid.Triggers>
    > > > </Grid>
    > > >
    > > > In the event handler I have:
    > > >
    > > > My_grid_stb_ctr.Begin( My_grid_ctr );
    > > >
    > > > The animations work great for numeric fixed value targets (like To="80"
    > > > above).
    > > > How can I get them to target an 'Auto' width or height (in either
    > > > From/To).
    > > >
    > > > Also - I have tryed to reset the UI elements to the auto value in code
    > > > via:
    > > >
    > > > My_grid_ctr.Width = double.NaN; // Auto Width
    > > > My_grid_ctr.Height = double.NaN; // Auto Height
    > > > My_grid_ctr.InvalidateVisual(); // Redraw element
    > > >
    > > > But that does not seem to reset them.
    > > >
    > > > Thanks ahead of time.
    > > >
    > > > Shawnk
    > > >
    > > > PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    > > > animation targets.
    > > >
    > > >

    > >
    > >
    > >


      My System SpecsSystem Spec

  6. #6


    Stoitcho Goutsev \(100\) Guest

    Re: How to animate To/From an Auto value?

    Bill,

    That was the solution that first popped in my head, but I tried it and it
    doesn't work. The problem is that for Auto the use double.NaN. If one of the
    limits for the animation is NaN they cannot calculate the internidiate
    values for the property over the given period of time. This is the reason it
    doesn't work with Auto


    --
    Stoitcho Goutsev (100)

    "Bill Henning" <no_spam@hotmail.com> wrote in message
    news:uayj9H$SHHA.4832@TK2MSFTNGP04.phx.gbl...
    > You don't need to set both the From and To if you don't want.
    >
    > For instance, if you leave From blank and fill in To, it will animate from
    > the default height to the "To" value. Whereas if you leave To blank and
    > fill in From, I believe it will animate from the "From" value to the
    > default height. I have only tried the former myself and not the latter
    > but I believe it would work.
    >
    > --
    >
    > Bill Henning
    > Actipro Software
    >
    > WPF Wizard Control -
    > http://www.actiprosoftware.com/Produ...d/Default.aspx
    >
    >
    >
    > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    > news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    >>I have storyboard animations that work well but
    >> I do not know how to set the From/To value targets
    >> for width and height to the 'Auto' value.
    >>
    >> In the XAML code below I would like the "80" value to be "Auto"
    >> but that won't compile.
    >>
    >> My XAML code is:
    >>
    >> <Grid Name = "My_grid_ctr" >
    >> <Grid.Triggers>
    >> <EventTrigger RoutedEvent="Button.Click" >
    >> <BeginStoryboard Name="My_grid_amt_ctr" >
    >> <Storyboard x:Name="My_grid_sbd_ctr" >
    >> <DoubleAnimation
    >> Storyboard.TargetName="My_grid_ctr"
    >> Storyboard.TargetProperty="Height"
    >> From="0" To="80" Duration="0:0:3" />
    >> </Storyboard>
    >> </BeginStoryboard>
    >> </EventTrigger>
    >> </Grid.Triggers>
    >> </Grid>
    >>
    >> In the event handler I have:
    >>
    >> My_grid_stb_ctr.Begin( My_grid_ctr );
    >>
    >> The animations work great for numeric fixed value targets (like To="80"
    >> above).
    >> How can I get them to target an 'Auto' width or height (in either
    >> From/To).
    >>
    >> Also - I have tryed to reset the UI elements to the auto value in code
    >> via:
    >>
    >> My_grid_ctr.Width = double.NaN; // Auto Width
    >> My_grid_ctr.Height = double.NaN; // Auto Height
    >> My_grid_ctr.InvalidateVisual(); // Redraw element
    >>
    >> But that does not seem to reset them.
    >>
    >> Thanks ahead of time.
    >>
    >> Shawnk
    >>
    >> PS. I searched all the WPF code in the SDK and did not find any 'Auto'
    >> animation targets.
    >>
    >>

    >
    >




      My System SpecsSystem Spec

  7. #7


    Bill Henning Guest

    Re: How to animate To/From an Auto value?

    Sorry I didn't reply sooner but haven't checked the ng in a few days. Now
    that I'm trying out sample code I see what you mean. My suggestion works in
    other areas but doesn't seem to work for this because of the NaN.

    I've tried all kinds of things just trying to store the "expanded" size
    somehow but am having a lot of trouble. If you can get the expanded size
    into a dependency property then perhaps you can bind to that property and
    use it as the To value for expanding.

    --

    Bill Henning
    Actipro Software

    WPF Wizard Control -
    http://www.actiprosoftware.com/Produ...d/Default.aspx



    "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    news:BFEBA8BE-CED5-4425-A7ED-345B858B7B87@microsoft.com...
    > Bill,
    >
    > Just to let you know - None of the alternate approaches worked for us.
    >
    > I am coding just from the Microsoft Documentation (no WPF - XAML books)
    > just
    > yet.
    >
    > Although I'm new to the WPF/XAML architecture it seems their
    > Animation/Eventing design is targeted to animated controls and not
    > animated
    > applications (layout - panel level animation) since the EventTrigger -
    > RoutedEvent - SourceName scope is all 'inward' where animations are parent
    > based and child triggered.
    >
    > The lack of a 'Auto' and '*' targets in DoubleAnimations are also
    > reflective
    > (it seems) of a 'control animation centric' design.
    >
    > I'll post a general architecture question, relative to Animation Scope
    > Architecture Limits in this forum later on today.
    >
    > Also note, I'm new to WPF - XAML so, hopefully, I'm wrong on the
    > architectural limitations of WPF-XAML.
    >
    > Thanks again for your comments :-)
    >
    > Shawnk
    >
    > "Shawnk" wrote:
    >
    >> Bill,
    >>
    >> Thanks much for the advice.
    >>
    >> We tryed dropping the From and to (Just use From or To by itself) - It
    >> did
    >> not work. With the code below:
    >>
    >> <EventTrigger RoutedEvent="Button.Click"
    >> >

    >> <BeginStoryboard
    >> Name="Close_status_block_via_width_01_skp_amt_ctr" >
    >> <Storyboard
    >> x:Name="Close_status_block_via_width_01_skp_sbd_ctr" >
    >> <DoubleAnimation
    >> Storyboard.TargetName="Status_block_03_skp_ctr"
    >> Storyboard.TargetProperty="Width"
    >> To="0" Duration="0:0:3" />
    >> </Storyboard>
    >> </BeginStoryboard>
    >> </EventTrigger>
    >>
    >> We received the exception.
    >>
    >> "'System.Windows.Media.Animation.DoubleAnimation' cannot use
    >> default
    >> origin value of 'NaN'."
    >>
    >> I tryed some permutations/variations all with bad results.
    >>
    >> I finally found an alternate approach that seems to be working. I'll post
    >> the solution once it passes all the testing.
    >>
    >> Thanks again for your helpful advice. I think that soultion (To
    >> alone/From
    >> alone) may work in other situations but it died on my system (XP with
    >> .NET
    >> 3.0 RTM, XAML, C#, VS Studio 2005).
    >>
    >> Shawnk
    >>
    >>
    >> "Bill Henning" wrote:
    >>
    >> > You don't need to set both the From and To if you don't want.
    >> >
    >> > For instance, if you leave From blank and fill in To, it will animate
    >> > from
    >> > the default height to the "To" value. Whereas if you leave To blank
    >> > and
    >> > fill in From, I believe it will animate from the "From" value to the
    >> > default
    >> > height. I have only tried the former myself and not the latter but I
    >> > believe it would work.
    >> >
    >> > --
    >> >
    >> > Bill Henning
    >> > Actipro Software
    >> >
    >> > WPF Wizard Control -
    >> > http://www.actiprosoftware.com/Produ...d/Default.aspx
    >> >
    >> >
    >> >
    >> > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    >> > news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    >> > >I have storyboard animations that work well but
    >> > > I do not know how to set the From/To value targets
    >> > > for width and height to the 'Auto' value.
    >> > >
    >> > > In the XAML code below I would like the "80" value to be "Auto"
    >> > > but that won't compile.
    >> > >
    >> > > My XAML code is:
    >> > >
    >> > > <Grid Name = "My_grid_ctr" >
    >> > > <Grid.Triggers>
    >> > > <EventTrigger RoutedEvent="Button.Click" >
    >> > > <BeginStoryboard Name="My_grid_amt_ctr" >
    >> > > <Storyboard x:Name="My_grid_sbd_ctr" >
    >> > > <DoubleAnimation
    >> > > Storyboard.TargetName="My_grid_ctr"
    >> > > Storyboard.TargetProperty="Height"
    >> > > From="0" To="80" Duration="0:0:3" />
    >> > > </Storyboard>
    >> > > </BeginStoryboard>
    >> > > </EventTrigger>
    >> > > </Grid.Triggers>
    >> > > </Grid>
    >> > >
    >> > > In the event handler I have:
    >> > >
    >> > > My_grid_stb_ctr.Begin( My_grid_ctr );
    >> > >
    >> > > The animations work great for numeric fixed value targets (like
    >> > > To="80"
    >> > > above).
    >> > > How can I get them to target an 'Auto' width or height (in either
    >> > > From/To).
    >> > >
    >> > > Also - I have tryed to reset the UI elements to the auto value in
    >> > > code
    >> > > via:
    >> > >
    >> > > My_grid_ctr.Width = double.NaN; // Auto Width
    >> > > My_grid_ctr.Height = double.NaN; // Auto Height
    >> > > My_grid_ctr.InvalidateVisual(); // Redraw element
    >> > >
    >> > > But that does not seem to reset them.
    >> > >
    >> > > Thanks ahead of time.
    >> > >
    >> > > Shawnk
    >> > >
    >> > > PS. I searched all the WPF code in the SDK and did not find any
    >> > > 'Auto'
    >> > > animation targets.
    >> > >
    >> > >
    >> >
    >> >
    >> >




      My System SpecsSystem Spec

  8. #8


    Shawnk Guest

    Re: How to animate To/From an Auto value?

    Bill,

    FYI : Our 'alternate' approach was to use a ScaleTransform instead of a
    Storyboard From To approach. It did not work.

    The ScaleTransform (between 1 and 0) would animate (With autorevers) and
    close (scale to 0) but once scaled to 0 it would not 'open' back up to a
    scale of 1.

    We tryed the 'Transform' approach for both a StackPanel and the Grid
    contained within it. The code for the stackpanel 'Transform' is below.

    Perhaps you could come up with an alternate animation that works.

    <!--==3=A== StackPanel : Animation : Via Scale Transform
    =================================================:_:==-->

    <StackPanel.RenderTransform>
    <ScaleTransform x:Name="Status_transform_skp_amt_ctr" ScaleX="1"
    ScaleY="1" />
    </StackPanel.RenderTransform>

    <StackPanel.Triggers>

    <EventTrigger RoutedEvent = "Button.Click">
    <BeginStoryboard x:Name =
    "Transform_animate_status_block_01_skp_amt_ctr" >
    <Storyboard x:Name =
    "Transform_animate_status_block_01_skp_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_skp_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="0.0" Duration="0:0:3"
    AutoReverse="true"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent = "Button.Click">
    <BeginStoryboard x:Name =
    "Transform_close_status_block_01_skp_amt_ctr" >
    <Storyboard x:Name =
    "Transform_close_status_block_01_skp_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_skp_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="0.0" Duration="0:0:3"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>

    <EventTrigger RoutedEvent = "Button.Click">
    <BeginStoryboard x:Name =
    "Transform_open_status_block_01_skp_amt_ctr" >
    <Storyboard x:Name =
    "Transform_open_status_block_01_skp_sbd_ctr" >
    <DoubleAnimation
    Storyboard.TargetName = "Status_transform_skp_amt_ctr"
    Storyboard.TargetProperty = "(ScaleTransform.ScaleY)"
    To="0.0" Duration="0:0:3"
    />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>



    "Bill Henning" wrote:

    > Sorry I didn't reply sooner but haven't checked the ng in a few days. Now
    > that I'm trying out sample code I see what you mean. My suggestion works in
    > other areas but doesn't seem to work for this because of the NaN.
    >
    > I've tried all kinds of things just trying to store the "expanded" size
    > somehow but am having a lot of trouble. If you can get the expanded size
    > into a dependency property then perhaps you can bind to that property and
    > use it as the To value for expanding.
    >
    > --
    >
    > Bill Henning
    > Actipro Software
    >
    > WPF Wizard Control -
    > http://www.actiprosoftware.com/Produ...d/Default.aspx
    >
    >
    >
    > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    > news:BFEBA8BE-CED5-4425-A7ED-345B858B7B87@microsoft.com...
    > > Bill,
    > >
    > > Just to let you know - None of the alternate approaches worked for us.
    > >
    > > I am coding just from the Microsoft Documentation (no WPF - XAML books)
    > > just
    > > yet.
    > >
    > > Although I'm new to the WPF/XAML architecture it seems their
    > > Animation/Eventing design is targeted to animated controls and not
    > > animated
    > > applications (layout - panel level animation) since the EventTrigger -
    > > RoutedEvent - SourceName scope is all 'inward' where animations are parent
    > > based and child triggered.
    > >
    > > The lack of a 'Auto' and '*' targets in DoubleAnimations are also
    > > reflective
    > > (it seems) of a 'control animation centric' design.
    > >
    > > I'll post a general architecture question, relative to Animation Scope
    > > Architecture Limits in this forum later on today.
    > >
    > > Also note, I'm new to WPF - XAML so, hopefully, I'm wrong on the
    > > architectural limitations of WPF-XAML.
    > >
    > > Thanks again for your comments :-)
    > >
    > > Shawnk
    > >
    > > "Shawnk" wrote:
    > >
    > >> Bill,
    > >>
    > >> Thanks much for the advice.
    > >>
    > >> We tryed dropping the From and to (Just use From or To by itself) - It
    > >> did
    > >> not work. With the code below:
    > >>
    > >> <EventTrigger RoutedEvent="Button.Click"
    > >> >
    > >> <BeginStoryboard
    > >> Name="Close_status_block_via_width_01_skp_amt_ctr" >
    > >> <Storyboard
    > >> x:Name="Close_status_block_via_width_01_skp_sbd_ctr" >
    > >> <DoubleAnimation
    > >> Storyboard.TargetName="Status_block_03_skp_ctr"
    > >> Storyboard.TargetProperty="Width"
    > >> To="0" Duration="0:0:3" />
    > >> </Storyboard>
    > >> </BeginStoryboard>
    > >> </EventTrigger>
    > >>
    > >> We received the exception.
    > >>
    > >> "'System.Windows.Media.Animation.DoubleAnimation' cannot use
    > >> default
    > >> origin value of 'NaN'."
    > >>
    > >> I tryed some permutations/variations all with bad results.
    > >>
    > >> I finally found an alternate approach that seems to be working. I'll post
    > >> the solution once it passes all the testing.
    > >>
    > >> Thanks again for your helpful advice. I think that soultion (To
    > >> alone/From
    > >> alone) may work in other situations but it died on my system (XP with
    > >> .NET
    > >> 3.0 RTM, XAML, C#, VS Studio 2005).
    > >>
    > >> Shawnk
    > >>
    > >>
    > >> "Bill Henning" wrote:
    > >>
    > >> > You don't need to set both the From and To if you don't want.
    > >> >
    > >> > For instance, if you leave From blank and fill in To, it will animate
    > >> > from
    > >> > the default height to the "To" value. Whereas if you leave To blank
    > >> > and
    > >> > fill in From, I believe it will animate from the "From" value to the
    > >> > default
    > >> > height. I have only tried the former myself and not the latter but I
    > >> > believe it would work.
    > >> >
    > >> > --
    > >> >
    > >> > Bill Henning
    > >> > Actipro Software
    > >> >
    > >> > WPF Wizard Control -
    > >> > http://www.actiprosoftware.com/Produ...d/Default.aspx
    > >> >
    > >> >
    > >> >
    > >> > "Shawnk" <Shawnk@discussions.microsoft.com> wrote in message
    > >> > news:45093EAC-32EF-445B-BE8D-898C478532CC@microsoft.com...
    > >> > >I have storyboard animations that work well but
    > >> > > I do not know how to set the From/To value targets
    > >> > > for width and height to the 'Auto' value.
    > >> > >
    > >> > > In the XAML code below I would like the "80" value to be "Auto"
    > >> > > but that won't compile.
    > >> > >
    > >> > > My XAML code is:
    > >> > >
    > >> > > <Grid Name = "My_grid_ctr" >
    > >> > > <Grid.Triggers>
    > >> > > <EventTrigger RoutedEvent="Button.Click" >
    > >> > > <BeginStoryboard Name="My_grid_amt_ctr" >
    > >> > > <Storyboard x:Name="My_grid_sbd_ctr" >
    > >> > > <DoubleAnimation
    > >> > > Storyboard.TargetName="My_grid_ctr"
    > >> > > Storyboard.TargetProperty="Height"
    > >> > > From="0" To="80" Duration="0:0:3" />
    > >> > > </Storyboard>
    > >> > > </BeginStoryboard>
    > >> > > </EventTrigger>
    > >> > > </Grid.Triggers>
    > >> > > </Grid>
    > >> > >
    > >> > > In the event handler I have:
    > >> > >
    > >> > > My_grid_stb_ctr.Begin( My_grid_ctr );
    > >> > >
    > >> > > The animations work great for numeric fixed value targets (like
    > >> > > To="80"
    > >> > > above).
    > >> > > How can I get them to target an 'Auto' width or height (in either
    > >> > > From/To).
    > >> > >
    > >> > > Also - I have tryed to reset the UI elements to the auto value in
    > >> > > code
    > >> > > via:
    > >> > >
    > >> > > My_grid_ctr.Width = double.NaN; // Auto Width
    > >> > > My_grid_ctr.Height = double.NaN; // Auto Height
    > >> > > My_grid_ctr.InvalidateVisual(); // Redraw element
    > >> > >
    > >> > > But that does not seem to reset them.
    > >> > >
    > >> > > Thanks ahead of time.
    > >> > >
    > >> > > Shawnk
    > >> > >
    > >> > > PS. I searched all the WPF code in the SDK and did not find any
    > >> > > 'Auto'
    > >> > > animation targets.
    > >> > >
    > >> > >
    > >> >
    > >> >
    > >> >

    >
    >
    >


      My System SpecsSystem Spec

  9. #9


    Bill Henning Guest

    Re: How to animate To/From an Auto value?

    Good idea on the scale transform.... got it working, and even with a neat
    fade in/out effect... stick this code in a StackPanel:

    <StackPanel x:Name="MyPanel" Opacity="0">
    <StackPanel.LayoutTransform>
    <ScaleTransform x:Name="ScaleTrans" ScaleY="0" />
    </StackPanel.LayoutTransform>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
    </StackPanel>
    <Button Content="Expand">
    <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
    <EventTrigger.Actions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetName="ScaleTrans"
    Storyboard.TargetProperty="ScaleY" To="1" />
    <DoubleAnimation Storyboard.TargetName="MyPanel"
    Storyboard.TargetProperty="Opacity" To="1" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger.Actions>
    </EventTrigger>
    </Button.Triggers>
    </Button>
    <Button Content="Collapse">
    <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
    <EventTrigger.Actions>
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetName="ScaleTrans"
    Storyboard.TargetProperty="ScaleY" To="0" />
    <DoubleAnimation Storyboard.TargetName="MyPanel"
    Storyboard.TargetProperty="Opacity" To="0" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger.Actions>
    </EventTrigger>
    </Button.Triggers>
    </Button>

    --

    Bill Henning
    Actipro Software

    WPF Wizard Control -
    http://www.actiprosoftware.com/Produ...d/Default.aspx



      My System SpecsSystem Spec

  10. #10


    Shawnk Guest

    Re: How to animate To/From an Auto value?

    Bill,

    Sorry it took so long to get back on this.

    I tryed your code - works great!
    Love the niffy opacity fade out and in to match the panel collapse.

    I see you moved the (1) animation and (2) triggers out of the animation
    target object (the stackpanel) and into the controling object (the button).

    I didn't you could that :-)

    Thanks so much for the solution. If I have any problems integrating this
    into the full application I'll post back here.

    Shawnk

    "Bill Henning" wrote:

    > Good idea on the scale transform.... got it working, and even with a neat
    > fade in/out effect... stick this code in a StackPanel:
    >
    > <StackPanel x:Name="MyPanel" Opacity="0">
    > <StackPanel.LayoutTransform>
    > <ScaleTransform x:Name="ScaleTrans" ScaleY="0" />
    > </StackPanel.LayoutTransform>
    > <Button Content="Button 1" />
    > <Button Content="Button 2" />
    > <Button Content="Button 3" />
    > <Button Content="Button 4" />
    > </StackPanel>
    > <Button Content="Expand">
    > <Button.Triggers>
    > <EventTrigger RoutedEvent="Button.Click">
    > <EventTrigger.Actions>
    > <BeginStoryboard>
    > <Storyboard>
    > <DoubleAnimation Storyboard.TargetName="ScaleTrans"
    > Storyboard.TargetProperty="ScaleY" To="1" />
    > <DoubleAnimation Storyboard.TargetName="MyPanel"
    > Storyboard.TargetProperty="Opacity" To="1" />
    > </Storyboard>
    > </BeginStoryboard>
    > </EventTrigger.Actions>
    > </EventTrigger>
    > </Button.Triggers>
    > </Button>
    > <Button Content="Collapse">
    > <Button.Triggers>
    > <EventTrigger RoutedEvent="Button.Click">
    > <EventTrigger.Actions>
    > <BeginStoryboard>
    > <Storyboard>
    > <DoubleAnimation Storyboard.TargetName="ScaleTrans"
    > Storyboard.TargetProperty="ScaleY" To="0" />
    > <DoubleAnimation Storyboard.TargetName="MyPanel"
    > Storyboard.TargetProperty="Opacity" To="0" />
    > </Storyboard>
    > </BeginStoryboard>
    > </EventTrigger.Actions>
    > </EventTrigger>
    > </Button.Triggers>
    > </Button>
    >
    > --
    >
    > Bill Henning
    > Actipro Software
    >
    > WPF Wizard Control -
    > http://www.actiprosoftware.com/Produ...d/Default.aspx
    >
    >
    >


      My System SpecsSystem Spec

How to animate To/From an Auto value? problems?

Similar Threads
Thread Thread Starter Forum Replies Last Post
animate windows maximazing or minimizing not working rosencrantz General Discussion 2 06 Jan 2010
Animate Min/Max windows turns itself off Q Vista performance & maintenance 6 21 Feb 2008
animate the dialup icon? Jrz Vista General 4 13 Dec 2007
How do I animate Canvas.Left in code? Jeremy Chaney Avalon 1 21 Jul 2007
Cannot animate a transform in a data template viliescu Avalon 5 10 Jan 2006