Can anyone tell me what might be wrong with this template. the expander only animates when expanding, not collapsing.
<ControlTemplate x:Key="ExpanderExTemplate" TargetType="{x:Type Expander}" >
<StackPanel Margin="0">
<Border BorderThickness="1" >
<Expander Name="expanderEx" Header="{TemplateBinding Header}" IsExpanded="{TemplateBinding IsExpanded}" BorderThickness="0">
<Border BorderThickness="0" >
<ContentPresenter x:Name="ExpandSite" Margin="5,5,5,5" >
<ContentPresenter.LayoutTransform>
<ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
<Expander.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Expander.Triggers>
</Expander>
</Border>
</StackPanel>
</ControlTemplate>
Related
I apologize in advance for any mistakes, English is not my native.
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="18"></TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="85" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Height"
To="45" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height"
To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
I have a WPF style for a button with various animations, but these ones don't work:
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="18" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Border.Grid.TextBlock.FontSize"
To="19" Duration="0:0:0.3" />
My goal is to animate TextBlock's FontSize when the mouse enters or leaves the Button, but I don't know how to access a TextBlock's property which is defined like that:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{TemplateBinding Background}" Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}" CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<FrameworkElement.Resources>
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock x:Name="PART_TBlock" Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="85" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" Storyboard.TargetName="PART_TBlock" To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" Storyboard.TargetName="PART_TBlock" To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
</Style>
</FrameworkElement.Resources>
<Grid>
<Button Content="Кнопка" Style="{DynamicResource LogOutButtonTheme}"
Width="100" Height="60"/>
</Grid>
Note that if the button is not explicitly dimensioned, your animation will throw an exception.
You can also bind the font size of the TextBlock to the font size of the button.
And then you can animate the font size of the button.
<FrameworkElement.Resources>
<Style TargetType="{x:Type Button}" x:Key="LogOutButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background= "{TemplateBinding Background}"
Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}"
CornerRadius="10">
<Grid Width="{TemplateBinding Property=Width}"
Height="{TemplateBinding Property=Height}">
<TextBlock Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="85" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="19" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="18" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</FrameworkElement.Resources>
<Grid>
<Button Content="Кнопка" Style="{DynamicResource LogOutButtonTheme}"
Width="100" Height="60"/>
</Grid>
Before you read this question, please see this
Now I have the storyboard defined in the user control resources and it gets triggered it on an event that is defined in ViewModel:
<UserControl.Resources>
<Storyboard x:Key="Storyboard2">
<DoubleAnimation Storyboard.TargetName="Btn_Import" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="{Binding StudioOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="StudioTranslateLeftToRight" Storyboard.TargetProperty="X" By="{Binding StudioStartingPointWidth}" Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="{Binding AnimationOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="{Binding RecordOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="textframe_image" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<local:CommandFakeAnimation Command="{Binding Path=MainButtonClickedCommand, Mode=OneWay}" CommandParameter="Hide" Storyboard.TargetProperty="Opacity" Duration="0:0:0"/>
</Storyboard>
</UserControl.Resources>
and then I have an event that trigers the storyboard:
<i:Interaction.Triggers>
<i:EventTrigger EventName="FadeInMainButtonsAfterStudio" SourceObject="{Binding Mode=OneWay}">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
and the control that I want to apply the animation to is:
<Button x:Name ="Studio" Grid.Row="33" Grid.Column="57" Grid.ColumnSpan="36" Grid.RowSpan="36" IsEnabled="{Binding IsStudioEnabled}" Opacity="{Binding StudioOpacityValue}" Command="{Binding MainButtonClickedCommand}" CommandParameter="Show">
<Button.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
<Image x:Name ="studio_image" Source="{Binding StudioBtnBaseImagePath}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="studio_image" Property="Source" Value="{Binding StudioBtnOverImagePath}" />
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value ="True">
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="StudioTranslateLeftToRight" X="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
but I get the following runtime error:
Additional information: No target was specified for
'MainMenu.DummyAnimations.CommandFakeAnimation'
What could be the problem with this?
As clearly described in the error you are getting, you have not provided Storyboard.TargetName for your custom Animation local:CommandFakeAnimation
I'm trying to do slide animation for whole grid, but having an exception: "Cannot resolve TargetName translateTransform." What's wrong?
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="200" Duration="0:0:1"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
You are missing x:Key from the Storyboard resource, all the resources needs to have x:Key. My VS2013 says that.
<Grid x:Name="ContentPanel"
Background="Purple"
Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Key="hey" x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:10"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="0" Duration="0:0:10"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
</Grid>
I have created animation on button content in XAML Page, in windows silverlight phone 8. But when I moved my project to windows phone 8.1 RT.. animation of button content is not working as it was working in silverlight phone project.
I have added below code which I have implemented in silverlight phone 8..
Interaction.Behaviors code part is not working.. I have added behaviour sdk for windows phone 8.1 in reference...
I have also added below three using for interactivity..
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:im="using:Microsoft.Xaml.Interactions.Media"
XAML
<Button x:Name="MenuButton"
Style="{StaticResource PageNumberButtonStyle}"
Height="180"
Margin="10"
Width="240"
Click="MenuButtonClick"
Content="{Binding CurrentPage.Number}"
FontFamily="ms-appx:///Fonts/sesamewkshpregular.ttf#SesameWkshp Rg"
HorizontalAlignment="Left"
RenderTransformOrigin="0.5,0.5"
VerticalAlignment="Bottom">
<Button.RenderTransform>
<CompositeTransform x:Name="MenuButtonScale"
ScaleX="0"
ScaleY="0" />
</Button.RenderTransform>
</Button>
<Page.Resources>
<ResourceDictionary>
<!-- PageNumberButtonStyle -->
<Style x:Key="PageNumberButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused" />
</VisualStateGroup>
<VisualStateGroup x:Name="PageNumberStates">
<VisualState x:Name="BindingChanged">
<Storyboard>
<DoubleAnimation From="1"
To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="contentPresenter" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<ImageBrush Stretch="None" ImageSource="/Resources/Assets/Book-Solid.png" />
</Grid.Background>
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,20,0,0"
RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<CompositeTransform x:Name="contentTransform"
ScaleX="0.5"
ScaleY="0.5" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<i:Interaction.Behaviors>
<ic:DataTriggerBehavior Binding="{Binding CurrentPage.Number}">
<im:ControlStoryboardAction ControlStoryboardOption="Play">
<im:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation From="0"
To="1"
Duration="0:0:1"
Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="contentTransform">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="2"
Springiness="5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0"
To="1"
Duration="0:0:1"
Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="contentTransform">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="2"
Springiness="5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</im:ControlStoryboardAction.Storyboard>
</im:ControlStoryboardAction>
</ic:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="150" />
</Style>
Please, guide me here for this problem..
Try adding a ComparisonConditionType and Value attributes to the DataTriggerBehaviour as it needs a condition for comparison on a particular Value.
In my project I want marquee n number of images. I have tried but not succeeded. when I give the Duration in same it all images are combined and moving.
My XAML -
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img2" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img3" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</Canvas>
</Grid>
My Model is -
Refer the following link and apply it in your case.
http://weblogs.asp.net/razan/archive/2009/10/01/creating-marquee-scrolling-text-in-wpf.aspx
Update 1:
Modified your code as follows seems to meet your requirement
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="panel" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<StackPanel x:Name="panel" Orientation="Horizontal">
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</StackPanel>
</Canvas>
</Grid>