Im trying to create an effect in my tabcontrol when draging over a tab I want to move it x number of pixels to the right creating a sliding effect as I drag over, but I cant seem to get the animation to fire. What am I missing here:
<Style TargetType="{x:Type TabItem}">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform />
<TranslateTransform />
<SkewTransform />
<ScaleTransform />
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="TabItem.DragEnter" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(TabItem.RenderTransform).(TranslateTransform.X)"
From="0"
To="50"
Duration="0:0:0.5"
FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
You have set the RenderTransform property to a TransformGroup and you want to animate the X property of the second child of this one so the Storyboard.TargetProperty should be set to RenderTransform.Children[1].X:
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].X"
From="0"
To="50"
Duration="0:0:0.5"
FillBehavior="Stop"/>
Your current DoubleAnimation should work if you set the RenderTransform property to a TranslateTransform:
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform />
</Setter.Value>
</Setter>
Related
I beginner in wpf and I want rotate a TextBlock but I have error:"Cannot resolve all property references in the property path 'RotateTransform.Angle'. Verify that applicable objects support the properties."
<TextBlock Grid.Row="1" Grid.Column="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource Rotate}">
<TextBlock.RenderTransform>
<TransformGroup>
<RotateTransform Angle="-16.308"/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Background>
<ImageBrush ImageSource="image/1.png"></ImageBrush>
</TextBlock.Background>
</TextBlock>
and this is my style
<Style x:Key="Rotate" TargetType="{x:Type TextBlock}">
<!--<Setter Property="Width" Value="10"></Setter>
<Setter Property="Height" Value="10"></Setter>-->
<Setter Property="Background" Value="Black"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RotateTransform.Angle" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
You should be able to use the orientation of a stack panel in your xaml to rotate easily, but this does not give immediate access to the angle.
<StackPanel Orientation="Horizontal">
<Textbox ...../>
</StackPanel>
Or in your style you can add a setter property.
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-90"></RotateTransform>
</Setter.Value>
</Setter>
If you need TransformGroup in your RenderTransorm, then StoryboardTargetProperty will be look like
RenderTransform.Children[0].Angle
If you leave only RotateTransform there, then it will be
RenderTransform.Angle
In both cases, as you see, we start searching property from RenderTransform.
Here's custom style:
<Style TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Background" Value="{StaticResource AppBackBrush}"/>
<Setter Property="Foreground" Value="{StaticResource AppBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{StaticResource AppBrush}"
Name="content"
BorderThickness="1"
CornerRadius="3"
Background="{StaticResource AppBackBrush}"
>
<Grid Background="Transparent">
<Label Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Grid.Row="0" Grid.Column="0"
Background="Transparent"
Style="{x:Null}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}"/>
</Grid>
<Border.RenderTransform>
<!-- push the content a bit to the left and the top -->
<TranslateTransform x:Name="translation"
X="-1" Y="-1"/>
</Border.RenderTransform>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="content" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I save this ResourceDictionary that contains this style to string like this:
XamlWriter.Save(s);
where s is ResourceDictionary. The problem is that when I get expected string, it looks so:
<Style TargetType=\"Button\" x:Key=\"{x:Type Button}\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"UIElement.Focusable\">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#FFF1F2F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"TextElement.Foreground\">
<Setter.Value>
<SolidColorBrush>#FF13776A</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"Control.Template\">
<Setter.Value>
<ControlTemplate TargetType=\"Button\">
<Border BorderThickness=\"1,1,1,1\" CornerRadius=\"3,3,3,3\" BorderBrush=\"#FF13776A\" Background=\"#FFF1F2F4\" Name=\"content\">
<Border.RenderTransform>
<TranslateTransform X=\"-1\" Y=\"-1\" />
</Border.RenderTransform>
<Grid>
<Grid.Style>
<Style TargetType=\"Grid\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Style>
<Label Content=\"{TemplateBinding ContentControl.Content}\" Background=\"#00FFFFFF\" Foreground=\"{TemplateBinding TextElement.Foreground}\" HorizontalContentAlignment=\"Center\" VerticalContentAlignment=\"Center\" Padding=\"{TemplateBinding Control.Padding}\" Style=\"{x:Null}\" Grid.Column=\"0\" Grid.Row=\"0\" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=\"ButtonBase.IsPressed\">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property=\"UIElement.IsEnabled\">
<Setter Property=\"UIElement.Opacity\" TargetName=\"content\">
<Setter.Value>
<s:Double>0.5</s:Double>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please take a look at TranslateTransform in Border.RenderTransform. In the ResourceDictionary it has x:Name="translation", but the name is missing in the output string.
Where was I mistaken or is this a bug? Thanks in advance.
According to this MSDN blog post, "some markup extensions, such as {x:Static}, are resolved at load-time by XamlReader and the markup extension itself is discarded, so there is no means for XamlWriter to re-produce it." It looks like x:Name is one of those markup extensions that is lost.
It looks like you are trying to create two styles - an original and an extended one - that both implicitly target button (presumably in different scopes). If that is the case, you can create a base style in a resource both styles above can reference, then use Style's BasedOn property to keep from duplicating the template.
I have a ListBox with items that will be bound to a datasource and ItemTemplate will be a user control. I need to get new items added to the datasource collection to animate / move in from out of view into view.
Here is what I have. (please ignore the lack of data binding / ItemTemplate) I want to focus on the animation.
<ListBox Width="350" Height="125">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform x:Name="transform"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" To="-0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>
<Rectangle Width="320" Height="50" Fill="Green">
<Rectangle.RenderTransform>
<TranslateTransform X="-50"/>
</Rectangle.RenderTransform>
</Rectangle>
</ListBoxItem>
</ListBox>
If you run this, you will see the opacity change works. However the item does not animate to 0. Nor does it work if I add a duration.
This is how I do an upwards slide animation on listboxitems:
<ListBox DataContextChanged="klantListBox_DataContextChanged" Name="klantListBox" Width="380" Height="255" Margin="0 10 10 0" ItemsSource="{Binding}" SelectionChanged="klantListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="230" X="0" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" To="0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
The animation is being applied to the ListBoxItem thanks to the
TargetType="{x:Type ListBoxItem}"
however the transformation is on the
Rectangle.RenderTransform.
Move the <TranslateTransform x="-50"> to the ListBoxItem's RenderTransform.
I want , when mouse enter button , foreground of button's font change to another color
i have this style for my button but Doesn't work Animation
<Style x:Key="StartButton" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{Binding solid1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" x:Name="Body">
<Grid Name="Figure">
<Grid.Resources>
<SolidColorBrush x:Key="solid1" x:Name="solid2" Color="Black"/>
</Grid.Resources>
.
.
.
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="solid2"
Storyboard.TargetProperty="Color">
<ColorAnimation From="Black" To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
thanks.
Instead of
Storyboard.TargetName="solid2"
try
Storyboard.Target="{StaticResource solid1}"
Well i have a custom control and when Visibility is changed to Visible I have a Trigger with a enter/exit action but the problem is that when the exit action fires the Visibility is no longer Visible so the animation can't be seen how would I fix this?
here is my Trigger:
<ControlTemplate.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Hide}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Show}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
I tried this too and failed. I think it is not possible to accomplish this in a simple ControlTemplate with a Trigger on the Visibility property. What you can do is add an Opacity animation From 1 To 0 to a Trigger for a different property, for instance a DependencyProperty that you add in the code behind yourself.
You could also use ObjectAnimationUsingKeyFrames to set Visibility for animation period.
In such case there is no need in any codebehind.
There is a way to achieve it. Not 100 % pure, but works for me:
Don't use Visibility property, but use Opacity and Tag property.
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border CornerRadius="5"
BorderThickness="2"
BorderBrush="DodgerBlue"
Background="#CC4f9dea" >
<Grid>
<ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch" />
<Button x:Name="btnClose" Opacity="0" Content="X" Style="{StaticResource RoundedButtonStyle}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" TargetName="btnClose" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2" BorderBrush="Black">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Tag" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="0.5" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.5" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>