UserControl animation doesn't apply after binding content - wpf

Please don't get daunted by the size of the code. It is a very small user control.
This user control is supposed to wave the text inside it (marquee) :
<UserControl x:Class="WpfTest.Marquee"
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"
xmlns:local="clr-namespace:WpfTest"
mc:Ignorable="d"
d:DesignHeight="25" d:DesignWidth="50">
<UserControl.Resources>
<Storyboard x:Key="Storyboard1" AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid Width="50">
<StackPanel Width="1000">
<Label x:Name="label"
Content="{Binding Content, FallbackValue='a long long text to test'}"
RenderTransformOrigin="0.5,0.5" ClipToBounds="False"
>
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-20" />
</TransformGroup>
</Label.RenderTransform>
</Label>
</StackPanel>
</Grid>
</UserControl>
When I use it without changing the content it works fine and animation works:
<Window x:Class="WpfTest.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:WpfTest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Marquee></local:Marquee>
</Grid>
</Window>
But when I assign content to it the animation doesn't apply :
<Window x:Class="WpfTest.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:WpfTest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Marquee Content="This is another long long text to test"></local:Marquee>
</Grid>
</Window>
Do you know how can I make it working after binding the content?

Related

Why isn't the easing working in this WPF app done entirely in Blend

I'm having trouble understanding why easing isn't working in my app. As a test I created a very simple app in Blend and it doesn't work there either. My test app is below. The animation of the Border works fine but there is no easing. What am I missing?
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="343.43"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="57.926" Margin="36.854,0,0,27.098" VerticalAlignment="Bottom" Width="67.683" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
</Window>
The first animation has an Easing KeyTime set to zero seconds, which will appear to have no animation and may explain why it appears to not be working. The second animation appears to be working, by dragging the border from the left side of the screen to the right in one second.
The piece of code i am referencing:
<EasingDoubleKeyFrame KeyTime="0" Value="0">

How can I move an EllipsePath using animation in WPF?

I want to make a slider button using WPF. So I have this code to create a circle and to move it when clicked.
<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">
<Grid>
<Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
<Path Fill="Red">
<Path.Data>
<EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
</Path.Data>
<Path.Effect>
<DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
</Path.Effect>
<Path.Triggers>
<EventTrigger RoutedEvent="Border.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetProperty="Center" Duration="0:0:0.3" From="20,20" To="60,20"></PointAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Path.Triggers>
</Path>
</Border>
</Grid>
It is okey that it shows up when program started. But it throws an exception when clicked on it. The error is System.InvalidOperationException. So how can I fix this problem?
Perhaps this is something closer to what you are looking to do?
<Window x:Class="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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
<Canvas>
<Ellipse Fill="Red" Width="40" Height="40" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Effect>
<DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
</Ellipse.Effect>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Border.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.3" From="0" To="40" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</Border>
</Grid>

How do you set a DataContext to a Static property in XAML?

This isn't working for me
<UserControl x:Class="BenchmarkPlus.PMT.UI.Views.Circle"
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="300" d:DesignWidth="300" x:Name="root"
DataContext="{Binding Source={x:Static Brushes.Blue}}">
<UserControl.Resources>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="{Binding DataContext}" />
</Style>
</UserControl.Resources>
<Grid>
<Ellipse Stroke="Black"></Ellipse>
</Grid>
</UserControl>
Make it simply DataContext="{x:Static Brushes.Blue}" and change Value="{Binding DataContext}" to Value="{Binding}".
When you specify a path in your binding expression, it's always relative to your DataContext, so when you use {Binding DataContext}, you're actually binding to DataContext.DataContext, which isn't what you want.
I think you want
<UserControl x:Class="BenchmarkPlus.PMT.UI.Views.Circle"
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="300" d:DesignWidth="300" x:Name="root"
DataContext="{x:Static Brushes.Blue}">
<UserControl.Resources>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="{Binding}" />
</Style>
</UserControl.Resources>
<Grid>
<Ellipse Stroke="Black"></Ellipse>
</Grid>
</UserControl>

How do I prevent a control from getting clipped by its ListBox parent's boundary during animation?

I have an Image icon inside a StackPanel that's inside a ListBox and I want to animate it using a translate behaviour so that it does a "bounce".
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="MyApp.PhonePage1"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="BounceStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-111"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<ListBox>
<Image x:Name="image" Source="Common/Main/res/drawable/smiley.png" Width="96" RenderTransformOrigin="0.5,0.5" Margin="180,0">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</ListBox>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
But when it moves up, the top portion of the image gets clipped inside its listbox parent's boundaries.
Is there a property I can tweak to have it overlap over the boundaries while its animating?
Thanks!
You need to make your parent Grid bigger.
Try giving the StackPanel a Margin of 22.
Update with working example
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="outofboundaryissue1.MainPage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="m_activateIdentityStoryboard" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-22"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="22"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF2D0C0C">
<StackPanel d:LayoutOverrides="Height">
<Image x:Name="image" Source="/Koala.jpg" RenderTransformOrigin="0.5,0.5" Width="100" Height="75">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

WPF swing out an element

Say we have a standard WPF-application, and I want to show some UI-elements on the left side besides my main application window.
Is there a way to go "beyond the borders" of the window and show a visual element with buttons on the left besides my main window? If there is, can you point me to a tutorial / video / hint how to accomplish it?
Not sure if you're aiming to do all of this in code or in XAML, but using a Popup, you could do something like this?
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonsOnPopup.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="400" Height="300">
<Window.Resources>
<Storyboard x:Key="OnMouseLeftButtonDown1">
<BooleanAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="popup" Storyboard.TargetProperty="(Popup.IsOpen)">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnClick1">
<BooleanAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="popup" Storyboard.TargetProperty="(Popup.IsOpen)">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="00:00:00.2" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="textBlock">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeftButtonDown1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard x:Name="OnClick1_BeginStoryboard" Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Popup x:Name="popup" Placement="Left">
<StackPanel Background="White">
<TextBlock Text="Outside Window" TextWrapping="Wrap"/>
<Button x:Name="button" Width="75" Content="Close this"/>
</StackPanel>
</Popup>
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="MouseDown here" TextWrapping="Wrap" Background="#FFBFFFBD"/>
</Grid>
Hope this helps.
Popup maybe.
simple example:
<Window x:Class="WpfPopupTest.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">
<Grid>
<Popup HorizontalOffset="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" IsOpen="True">
<StackPanel Background="HotPink">
<TextBlock Text="Hey from outside!" Foreground="Gold" />
<Button>Button!</Button>
</StackPanel>
</Popup>
</Grid>
Probably don't what you want to do, but i think that it could work for you.
You could use a non-modal dialog with no window border. It could then appear to be floating out in space if you want.
Cory

Resources