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>
Related
I have a ScrollViewer bound with a ControlTemplate (which works fine), a Grid inside (which overrides the default ScrollViewer and sets the ScrollBars "above" the content and finally I have some EventTriggers which set the Opacity of the ScrollBar s to 1 or 0 in a Storyboard. They also work well.
What I am missing is one of this triggers that sets the Opacity to 1 in case the scrolling takes place. It can be scrolled by mouse, mousewheel, stylus or touch, so it would be best to take the ScrollChanged of the ScrollViewer or the Scroll of the ScrollBars themselves. But I cannot make it work. Oh and btw. I cannot change the way it is build. So I have to make it by pure XAML inside the ControlTemplate (I know myself how to make it with code behind, but that is not possible here).
The style looks this way:
<Style TargetType="{x:Type controls:ViewerControl}">
// ... some properties of no interest here
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:ViewerControl}">
<Border Grid.Row="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="PART_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:02" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="00:00:02" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Grid.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Grid.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:02" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="00:00:02" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<ScrollContentPresenter Grid.ColumnSpan="2"
Grid.RowSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
<ScrollBar Name="PART_VerticalScrollBar"
HorizontalAlignment="Right"
Opacity="0"
Grid.Column="1"
IsTabStop="False"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar Name="PART_HorizontalScrollBar"
VerticalAlignment="Bottom"
Orientation="Horizontal"
Opacity="0"
Grid.Row="1"
IsTabStop="False"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<StackPanel IsItemsHost="True" Name="PART_ItemsHost" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I tried it with something like this:
<ScrollViewer.Triggers>
<EventTrigger RoutedEvent="ScrollViewer.ScrollChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ScrollViewer.Triggers>
But if I put this directly inside the ScrollViewer it cannot find the ScrollBars and if I put it inside the Grid it is completly ignored (the Grid itself has no control over the ScrollViewer and seems not to bubble this up to it.
I found an answer where someone used the VisualStateManager, but this only seems to work in Silverlight, not in C#. It looked like this:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Has someone an idea how to make this work?
A coworker of mine found the answer:
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ScrollViewer.ScrollChanged">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation Duration="0" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
<DoubleAnimation BeginTime="00:00:02" Duration="00:00:01.5" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar"/>
<DoubleAnimation BeginTime="00:00:02" Duration="00:00:01.5" From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
So if you put the EventTrigger inside the ControlTemplate.Triggers, it works like a charm... really cool. You only have to put these MouseEnter and MouseLeave inside the ScrollBars or else they are also triggered if the cursor enters the content of the ScrollViewer, not only on entering the ScrollBars.
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>
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>
I am using the template below to render a semi-transparent 'label' to display certain data. as you can see the the display is elliptical (i'm using Border.CornerRadius for this). I am now trying to popout and contract the label when based on mouse enter/exist. this works, but the problem is, when popped out, the text displayed appears in rectanble, not elipse..and furthermore it seems that while the text itself is expanded, the border is not, making causing some of the text to become cut off. So to summarize...how can i make get the pop out to also show as an elipse and not cut any text off?
<DataTemplate x:Key="LabelTmplt" >
<Border Name="myBorder" BorderThickness="0" CornerRadius="9" RenderTransformOrigin="0.5,0.5" >
<Border.Background>
<SolidColorBrush Opacity=".3" Color="Red"/>
</Border.Background>
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5" Margin="0,0,0,0"/>
<Border.RenderTransform>
<ScaleTransform />
</Border.RenderTransform>
<Border.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</DataTemplate>
If you don't mind the text actually shrinking and growing with the popup you could put it inside a ViewBox
<Viewbox Margin="0,0,0,0">
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5"/>
</Viewbox>