Databases
StackOverflow2013
Postsdbo
POAchieve "slide down" animation in WPF
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAchieve "slide down" animation in WPF
    primarykey
    data
    text
    <p>I am attempting to create my own template for an <code>Expander</code> control. When the control is expanded, I want the content to slide down slowly.</p> <p>The desired height of the content is not known at compile time.</p> <p>I thought we could define the slide down as an animation:</p> <pre><code>&lt;Storyboard x:Key="ExpandContent"&gt; &lt;DoubleAnimation Storyboard.TargetName="_expanderContent" Storyboard.TargetProperty="Height" From="0.0" To="{Binding ElementName=_expanderContent,Path=DesiredHeight}" Duration="0:0:1.0" /&gt; &lt;/Storyboard&gt; </code></pre> <p>But Unfortunately not. We get an error </p> <blockquote> <p>Cannot freeze this Storyboard timeline tree for use across threads.</p> </blockquote> <p>It appears that we cannot use binding when defining animation parameters. (Discussed also in <a href="https://stackoverflow.com/questions/1669750/wpf-animation-cannot-freeze-this-storyboard-timeline-tree-for-use-across-thread">this question</a>.)</p> <p>Does anyone have any ideas on how I can approach this? I'm wary of using <code>LayoutTransform.ScaleY</code>, because that would create a distorted image.</p> <p>This is similar to <a href="https://stackoverflow.com/questions/5035174/how-to-get-desired-height-of-wpf-ui-element-with-current-height-of-0">this question</a>, but this question has an answer involved writing code-behind, which I don't think is possible in a control template. I'm wondering if a XAML-based solution is achievable.</p> <p><hr /> For what it's worth, here is the current state of my control template.</p> <pre><code>&lt;ControlTemplate x:Key="ExpanderControlTemplate" TargetType="{x:Type Expander}"&gt; &lt;ControlTemplate.Resources&gt; &lt;!-- Here are the storyboards which don't work --&gt; &lt;Storyboard x:Key="ExpandContent"&gt; &lt;DoubleAnimation Storyboard.TargetName="_expanderContent" Storyboard.TargetProperty="Height" From="0.0" To="{Binding ElementName=_expanderContent,Path=DesiredHeight}" Duration="0:0:1.0" /&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="ContractContent"&gt; &lt;DoubleAnimation Storyboard.TargetName="_expanderContent" Storyboard.TargetProperty="Height" From="{Binding ElementName=_expanderContent,Path=DesiredHeight}" To="0.0" Duration="0:0:1.0" /&gt; &lt;/Storyboard&gt; &lt;/ControlTemplate.Resources&gt; &lt;Grid Name="MainGrid" Background="White"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto" /&gt; &lt;RowDefinition Name="ContentRow" Height="Auto" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Border&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;ColumnDefinition Width="Auto" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;ContentPresenter ContentSource="Header" /&gt; &lt;ToggleButton Template="{StaticResource ProductButtonExpand}" Grid.Column="1" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" /&gt; &lt;Rectangle Grid.ColumnSpan="2" Fill="#FFDADADA" Height="1" Margin="8,0,8,2" VerticalAlignment="Bottom"/&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;ContentPresenter Grid.Row="1" HorizontalAlignment="Stretch" Name="_expanderContent"&gt; &lt;/ContentPresenter&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsExpanded" Value="True"&gt; &lt;Setter TargetName="_expanderContent" Property="Height" Value="{Binding ElementName=_expanderContent,Path=DesiredHeight}" /&gt; &lt;!-- Here is where I would activate the storyboard if they did work --&gt; &lt;Trigger.EnterActions&gt; &lt;!--&lt;BeginStoryboard Storyboard="{StaticResource ExpandContent}"/&gt;--&gt; &lt;/Trigger.EnterActions&gt; &lt;Trigger.ExitActions&gt; &lt;!--&lt;BeginStoryboard x:Name="ContractContent_BeginStoryboard" Storyboard="{StaticResource ContractContent}"/&gt;--&gt; &lt;/Trigger.ExitActions&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsExpanded" Value="False"&gt; &lt;Setter TargetName="_expanderContent" Property="Height" Value="0" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USAndrew Shepherd
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAchieve "slide down" animation in WPF
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAchieve "slide down" animation in WPF
      1. USH.B.
      1. VTFavorite
    3. VO
      singulars
      1. POAchieve "slide down" animation in WPF
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy set `To` and `From` to DesiredHight? If you don\`t set them, it will be done automatically anyway.
      singulars
      1. POAchieve "slide down" animation in WPF
      1. USicebat
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload