When using a color binding like
Background="{Binding Design.LeftBarColor}"
and executing an animation like
<DoubleAnimation From="1" To="0.5" Storyboard.TargetName="appName"
Storyboard.TargetProperty="(Label.Background).(SolidColorBrush.Opacity)"
Duration="0:0:0.25"/>
all of the controls Binding to "Design.LeftBarColor" are refreshed. But I only want to refresh the label's (appName) background color. I just tried to change the binding mode, but this did not work. What am I doing wrong?
Instead of directly using the Design.LeftBarColor Brush for the Background of the Label, you could create a new Background brush for every Label, and bind the new Brush's Color to Design.LeftBarColor.Color.
<Label Name="appName" ...>
<Label.Background>
<SolidColorBrush Color="{Binding Design.LeftBarColor.Color}"/>
</Label.Background>
...
</Label>
Not sure if i am correct about what you are trying to do. I would say if you want to fade out a control on animation, do not target the brush's opacity. Put a border control on top of the label, and modify the border's opacity.
Sample code here:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Red"/>
</Window.Resources>
<Grid>
<Border Name="Container">
<Label Background="{StaticResource MyBrush}">
<Label.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Container"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Label.Triggers>
Lorem ipsum
</Label>
</Border>
</Grid>
</Window>
Related
I'm looking to create an animation similar to the 'wipe' animation in Microsoft PowerPoint using WPF.
Put simply, I'd like an image to fade in from left to right over 1 second.
This is the XAML I have so far, which fades the image in all at once:
<Window x:Class="WpfApplication2.MainWindow"
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"
xmlns:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="fade">
<DoubleAnimation From="0" To="1" Duration="0:0:1"
Storyboard.TargetName="logo"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Source="image.png" x:Name="logo"/>
</Grid>
</Window>
In the code behind, I just play the animation when window has loaded:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
BeginStoryboard((Storyboard)FindResource("fade"));
}
What do I need to add to the Storyboard tag in order to make the image fade in similar to the wipe animation on PowerPoint?
Found the answer myself from this blog post. The code I needed to achieve the effect I needed is identical to the code in the post, but I don't need the first image. (UFO.jpg)
<Window x:Class="LearnWPF.WipeEffect.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow">
<Grid>
<!--First image not needed.-->
<!--<Image Source="Images/UFO.jpg" />-->
<Image Source="Images/ladder.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
<GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!--Duration changed to half a second as this is what I need. -->
<DoubleAnimation Storyboard.TargetName="TransparentStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="BlackStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5"
BeginTime="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
</Window>
I am making an UserControl with XAML which is a simple border with a Dock Panel inside it. And inside the Dock there is an image and text bellow as properties ( i got that all figured out already).
However i need the Border that contains everything to change color on the MouseEnter event of the DockPanel and change it again to default when the MouseLeave event is triggered.
It compiles just fine. The problem is that when i use it on a normal window the Triggers are not even working and the mouse cursor doesnt change when i hover the DockPanel.
<UserControl x:Name="StartBtn" x:Class="NMis.Controls.StartCenterButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="155" d:DesignWidth="155" FontFamily="Open Sans" TextOptions.TextFormattingMode="Display" ScrollViewer.VerticalScrollBarVisibility="Disabled" UseLayoutRounding="True" IsHitTestVisible="False">
<Border BorderThickness="1.5" Height="155" Width="155" CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop x:Name="Grad1" Color="#FF151515" Offset="0"/>
<GradientStop x:Name="Grad2" Color="#E54D9EA9" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<DockPanel x:Name="Condominio_Dock" Margin="5,10,5,5" Cursor="Hand" Background="#FFF" MouseDown="DockPanel_MouseDown">
<DockPanel.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#5fb357" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#E54D9EA9"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#5fb357"></ColorAnimation>
<ColorAnimation To="#E54D9EA9" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
<Image UseLayoutRounding="True" Stretch="Uniform" Source="{Binding ElementName=StartBtn, Path=Image}" Height="104" DockPanel.Dock="Top"></Image>
<TextBlock Text="{Binding ElementName=StartBtn, Path=Text}" DockPanel.Dock="Top" TextTrimming="WordEllipsis" Margin="0,5,0,0" TextAlignment="Center" FontWeight="SemiBold"></TextBlock>
</DockPanel>
</Border>
</UserControl>
You can also get this problem is the dock panel doesn't have a brush. Because then its transparent it doesn't get found by the hit test.
Fixed it.
Apparently IsHitTestVisible must be true for the DockPanel use Triggers
I want to create a toggle button which gives rise to a rectangular panel on clicking. Since rectangle is not having click property so I have enclosed it in a button. Please provide me further guidance.
<Window x:Class="AnimatedRectangle.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" BorderBrush="Black" BorderThickness="2" Foreground="White" VerticalAlignment="Stretch" WindowStartupLocation="CenterScreen">
<Grid>
<Button Name="MyButton">
<Button.Template>
<ControlTemplate>
<Rectangle
Name="MyRectangle"
Width="150"
Height="30"
Fill="Cyan"
Margin="0,220,0,0">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Please visualize it this way : Both the rectangle and button are of same width and initially the button overlaps(or hide in any other way)the rectangle. When the button is clicked then the rectangle appears and it looks like the rectangular body is part of a button.
JUST LIKE we press downward symbol in address bar and the history/suggestions appears in rectangular body. But here I want a button to give rise to a rectangle body rather than a downward symbol like in address bar.
StackOverflow is not letting me post images as I need to have 10 reputation posts :(
Thanks a lot..!!
So in the WPF project I'm just starting I have a UserControl that will be eventully functioning as a sort of document tab (I have simplified the code for this question). On the UserControl is a TextBlock, and the desired behavior is that when the user mouses over the control the text should change color. The XAML below works (resources defined in another file) BUT the ColorAnimation happens to every instance of the UserControl, not just the one I'm mousing over. So if I scatter some of these controls over the UI and mouse over one of them, ALL of them change color. Why??? I've tried adding the triggers to the UserControl, the Grid, and the TextBlock itself but it appears to make no difference. As ever, grateful for any advice.
<UserControl x:Class="OurCompany.TabControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Height="24" Width="Auto">
<UserControl.Resources>
<Storyboard x:Key="MouseEnterFade">
<ColorAnimation Storyboard.TargetName="TabTitleText" Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:0.1"
To="{DynamicResource FrameBorderColor}"/>
</Storyboard>
<Storyboard x:Key="MouseLeaveFade">
<ColorAnimation Storyboard.TargetName="TabTitleText" Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:0.1"
To="{DynamicResource MenuForegroundColor}"/>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MouseEnterFade}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MouseLeaveFade}"/>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="TabGrid" Background="Transparent">
<TextBlock x:Name="TabTitleText" Text="{Binding Path=Header}" Margin="10,0,10,0" Foreground="{DynamicResource MenuForegroundBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</UserControl>
I've worked with Opacity property in storyboard
but I cant figure it out how to move an UI element like grid stackpanel button ..... in c#?
(I am writing the storyboard in c# not in xaml )
Well, that depends on your actual layout: Do you want to animate a button in a Grid or in a Canvas (could animate the Margin property or the Canvas.Left attached property, respectively)? Do you want to animate the property itself or a transform (the latter would animate a RenderTransform - specifically a TranslateTransform). You would use the RenderTransform if you still want to refer to the "old" position.
One simple way is:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(Canvas.Left)" From="1" To="350"
Duration="0:0:10" BeginTime="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Canvas x:Name="myCanvas" Background="Yellow">
<Button x:Name="myButton" Width="100" Height="30" Canvas.Left="100" Canvas.Top="100" />
</Canvas>
</Grid>
</Window>
it would be better if you use blend for storyboard ..i have genrated a code for stackpanel movement towards right ..just check it..
you can go through this video aslo it's very good it will perfectly work in your case
<Page.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="hello">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name="hello" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" >
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
<TextBlock Text="hello1" FontSize="50" />
<Button Content="Button" FontSize="50" Click="Button_Click_1" />
</StackPanel>
</Grid>
and to start do this on button click..
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
}
for better understand just read about how to use blend..