Storyboard

Post Reply
 
SenlyCamile
Topic Author
Posts: 20
Joined: 15 Jan 2021, 07:38

Storyboard

20 May 2021, 04:50

Code: Select all
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	x:Class="ArrowBtn"
	x:Name="Root">
	<UserControl.RenderTransform>
		<TranslateTransform X="0" Y="0"/>
	</UserControl.RenderTransform>
	<UserControl.Resources>
		<ResourceDictionary>
			<ControlTemplate x:Key="ArrowToggleButtonTemplate" TargetType="{x:Type ToggleButton}">
				<Grid>
					<Border x:Name="RightLeftBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="	{TemplateBinding Border.CornerRadius}" Background="{TemplateBinding Background}">
						<TextBlock x:Name="RightLeftText" Text="{Binding ArrowHeader, ElementName=Root}" HorizontalAlignment="Center" VerticalAlignment="Center"
							TextWrapping="Wrap" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" TextAlignment="Center" />
						<Border.RenderTransform>
							<TransformGroup>
								<RotateTransform Angle="90" CenterX="0" CenterY="24"/>
								<TranslateTransform/>
							</TransformGroup>
						</Border.RenderTransform>
					</Border>
				</Grid>
				<ControlTemplate.Resources>
					<Storyboard x:Key="RightLeft.Collapse">
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="RenderTransform.X">
							<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="{Binding MoveDis, ElementName=Root}">
								<EasingDoubleKeyFrame.EasingFunction>
									<CubicEase EasingMode="EaseInOut"/>
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="{Binding MoveCompName, ElementName=Root}" Storyboard.TargetProperty="RenderTransform.X">
							<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="{Binding MoveDis, ElementName=Root}">
								<EasingDoubleKeyFrame.EasingFunction>
									<CubicEase EasingMode="EaseInOut"/>
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
					<Storyboard x:Key="RightLeft.Expand">
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="RenderTransform.X">
							<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="{Binding MoveDis, ElementName=Root}"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<CubicEase EasingMode="EaseInOut"/>
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="{Binding MoveCompName, ElementName=Root}" Storyboard.TargetProperty="RenderTransform.X">
							<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="{Binding MoveDis, ElementName=Root}"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<CubicEase EasingMode="EaseInOut"/>
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
					</ControlTemplate.Resources>
						<ControlTemplate.Triggers>
							<MultiDataTrigger>
								<MultiDataTrigger.Conditions>
									<Condition Binding="{Binding ButtonType, ElementName=Root}" Value="RightLeft"/>
									<Condition Binding="{Binding IsChecked, ElementName=Root}" Value="True"/>
								</MultiDataTrigger.Conditions>
								<Setter Property="Background" Value="{StaticResource DownArrow}"/>
								<Setter Property="Visibility" Value="Collapsed" TargetName="RightLeftText"/>
							</MultiDataTrigger>
							<MultiDataTrigger>
								<MultiDataTrigger.Conditions>
									<Condition Binding="{Binding ButtonType, ElementName=Root}" Value="RightLeft"/>
									<Condition Binding="{Binding IsChecked, ElementName=Root}" Value="False"/>
								</MultiDataTrigger.Conditions>
								<Setter Property="Background" Value="White"/>
								<Setter Property="Visibility" Value="Visible" TargetName="RightLeftText"/>
							</MultiDataTrigger>
							<MultiDataTrigger>
								<MultiDataTrigger.Conditions>
									<Condition Binding="{Binding ButtonType, ElementName=Root}" Value="RightLeft"/>
									<Condition Binding="{Binding IsChecked, ElementName=Root}" Value="False"/>
								</MultiDataTrigger.Conditions>
								<MultiDataTrigger.EnterActions>
									<BeginStoryboard Storyboard="{StaticResource RightLeft.Expand}"/>
								</MultiDataTrigger.EnterActions>
								<MultiDataTrigger.ExitActions>
									<BeginStoryboard Storyboard="{StaticResource RightLeft.Collapse}"/>
								</MultiDataTrigger.ExitActions>
							</MultiDataTrigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
					<Style x:Key="ArrowToggleButtonStyle" TargetType="{x:Type ToggleButton}">
						<Setter Property="Width" Value="{Binding Width, ElementName=Root}"/>
						<Setter Property="Height" Value="{Binding Height, ElementName=Root}"/>
						<Setter Property="BorderThickness" Value="1"/>
						<Setter Property="BorderBrush" Value="White"/>
						<Setter Property="Foreground" Value="Black"/>
						<Setter Property="FontSize" Value="12"/>
						<Setter Property="Border.CornerRadius" Value="3,3,0,0"/>
						<Setter Property="IsChecked" Value="{Binding IsChecked, ElementName=Root}"/>
						<Setter Property="Template" Value="{StaticResource ArrowToggleButtonTemplate}"/>
					</Style>
				</ResourceDictionary>
			</UserControl.Resources>
		<ToggleButton x:Name="ArrowButton" Width="50" Height="24" Click="OnArrowButtonClick" Style="{StaticResource ArrowToggleButtonStyle}"/>
</UserControl>
I changed the value of "MoveDis" after the storyboard "Rightleft.Expand". But the value of "MoveDis" did not follow to change when the storyboard "rightleft.collapse" started.
Last edited by SenlyCamile on 21 May 2021, 04:17, edited 2 times in total.
Top
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: Storyboard

20 May 2021, 11:07

WPF doesn't allow bindings in Storyboards defined in ControlTemplate resources, it will throw the following error: "Cannot freeze this Storyboard timeline tree for use across threads".

But in order to provide an alternative I need to understand what are you trying to do, because you have bindings to an element named Root that is not included in the previous xaml, and even the Storyboards are animating properties of that Root element (which will be impossible from a template storyboard). Could that be a typo?
Top
 
SenlyCamile
Topic Author
Posts: 20
Joined: 15 Jan 2021, 07:38

Re: Storyboard

21 May 2021, 03:58

WPF doesn't allow bindings in Storyboards defined in ControlTemplate resources, it will throw the following error: "Cannot freeze this Storyboard timeline tree for use across threads".

But in order to provide an alternative I need to understand what are you trying to do, because you have bindings to an element named Root that is not included in the previous xaml, and even the Storyboards are animating properties of that Root element (which will be impossible from a template storyboard). Could that be a typo?
Sorry,I did not describe my question clearly. I have changed the xaml for more detail. And the binding of "MoveDis " just did not work the first time when I changed the value of "MoveDis " between the storyboard "rightleft.expand" and "rightleft.collapse ". It worked well any other cases.
Top
 
User avatar
sfernandez
Site Admin
Posts: 3363
Joined: 22 Dec 2011, 19:20

Re: Storyboard

25 May 2021, 12:58

As I said before, including bindings in a Storyboard defined in template triggers is not supported, an error message indicates it in Blend and Noesis.

You should define the Storyboards in the UserControl and then you can fire them using some triggers:
Code: Select all
<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
  x:Name="Root">
  <UserControl.RenderTransform>
    <TranslateTransform X="0" Y="0"/>
  </UserControl.RenderTransform>
  <UserControl.Resources>
    <ResourceDictionary>
      <Storyboard x:Key="RightLeft.Collapse">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="RenderTransform.X">
	  <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
	    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="{Binding MoveDis, ElementName=Root}">
	      <EasingDoubleKeyFrame.EasingFunction>
	        <CubicEase EasingMode="EaseInOut"/>
	      </EasingDoubleKeyFrame.EasingFunction>
	    </EasingDoubleKeyFrame>
	  </DoubleAnimationUsingKeyFrames>
	</Storyboard>
        <Storyboard x:Key="RightLeft.Expand">
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="RenderTransform.X">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="{Binding MoveDis, ElementName=Root}"/>
              <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                  <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
              </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
          <ControlTemplate x:Key="ArrowToggleButtonTemplate" TargetType="{x:Type ToggleButton}">
            <Grid>
              <Border x:Name="RightLeftBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="1" Background="{TemplateBinding Background}">
                <TextBlock x:Name="RightLeftText" Text="{Binding ArrowHeader, ElementName=Root}" HorizontalAlignment="Center" VerticalAlignment="Center"
                  TextWrapping="Wrap" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" TextAlignment="Center" />
                <Border.RenderTransform>
                  <TransformGroup>
                    <RotateTransform Angle="90" CenterX="0" CenterY="24"/>
                    <TranslateTransform/>
                  </TransformGroup>
                </Border.RenderTransform>
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                  <Condition Binding="{Binding ButtonType, ElementName=Root}" Value="RightLeft"/>
                  <Condition Binding="{Binding IsChecked, ElementName=Root}" Value="True"/>
                </MultiDataTrigger.Conditions>
                <Setter Property="Background" Value="Silver"/>
                <Setter Property="Visibility" Value="Collapsed" TargetName="RightLeftText"/>
              </MultiDataTrigger>
              <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                  <Condition Binding="{Binding ButtonType, ElementName=Root}" Value="RightLeft"/>
                  <Condition Binding="{Binding IsChecked, ElementName=Root}" Value="False"/>
                </MultiDataTrigger.Conditions>
                <Setter Property="Background" Value="White"/>
                <Setter Property="Visibility" Value="Visible" TargetName="RightLeftText"/>
              </MultiDataTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
          <Style x:Key="ArrowToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Width" Value="{Binding Width, ElementName=Root}"/>
            <Setter Property="Height" Value="{Binding Height, ElementName=Root}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Border.CornerRadius" Value="3,3,0,0"/>
            <Setter Property="IsChecked" Value="{Binding IsChecked, ElementName=Root}"/>
            <Setter Property="Template" Value="{StaticResource ArrowToggleButtonTemplate}"/>
          </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <i:Interaction.Triggers>
      <ei:DataTrigger Binding="{Binding IsChecked, ElementName=ArrowButton}" Value="False">
        <ei:DataTrigger.Actions>
          <ei:ControlStoryboardAction Storyboard="{StaticResource RightLeft.Expand}"/>
        </ei:DataTrigger.Actions>
      </ei:DataTrigger>
      <ei:DataTrigger Binding="{Binding IsChecked, ElementName=ArrowButton}" Value="True">
        <ei:DataTrigger.Actions>
          <ei:ControlStoryboardAction Storyboard="{StaticResource RightLeft.Collapse}"/>
        </ei:DataTrigger.Actions>
      </ei:DataTrigger>
    </i:Interaction.Triggers>
    <ToggleButton x:Name="ArrowButton" Width="50" Height="24" Style="{StaticResource ArrowToggleButtonStyle}"/>
</UserControl>
Top
Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests