Forums | NoesisGUI

Welcome to our official discussion site. You’ll find topics on features, bugs, development, and general support here
https://www.noesisengine.com/forums/

Storyboard

https://www.noesisengine.com/forums/viewtopic.php?t=2316

Page 1 of 1

Storyboard

Posted: 20 May 2021, 04:50
by SenlyCamile
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.

Re: Storyboard

Posted: 20 May 2021, 11:07
by sfernandez
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?

Re: Storyboard

Posted: 21 May 2021, 03:58
by SenlyCamile
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.

Re: Storyboard

Posted: 25 May 2021, 12:58
by sfernandez
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>
All times are UTC+02:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/