I have a simple animation that alternate two frames changing the image. It works perfectly until I try to bind the bitmapimage urisource.
<Image Stretch="Fill">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00" Duration="{Binding ElementName=MyControl, Path=FrameDuration}"
Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.000000">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Assets/frame1.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="{Binding ElementName=MyControl, Path=FrameBeginTime}" Duration="{Binding ElementName=MyControl, Path=FrameDuration}"
Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Assets/frame2.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
I tried these two bindings but none of them work:
XAML:
<BitmapImage Source="{Binding ElementName=MyControl, Path=FrameUri1}" />
Code:
public Uri FrameUri1 { get { return _frameUri1; } set { _frameUri1 = value; NotifyPropertyChanged("FrameUri1"); } }
and
XAML:
<Image Source="{Binding ElementName=CosoControl, Path=BitmapSource}" />
Code:
public ImageSource BitmapSource
{
get
{
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri("pack://application:,,,/Myassembly;component/Assets/frame1.png");
bitmap.EndInit();
return bitmap;
}
}
I read other threads with similar issue, but I'm quite new to WPF/C# and I could not figure out how to solve it. I read about IValueConverter but no idea how to arrange that.
Best way is to use diff. images with proper binding and hide them. Then animate opacity/visibility of the needed one.
<Border BorderThickness="3" BorderBrush="#FF341A1A" Height="200">
<Border.Background>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image x:Name="Img1" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl1}"/>
<Image x:Name="Img2" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl2}"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Duration="0:0:3"
Storyboard.TargetName="Img1"
Storyboard.TargetProperty="Visibility"
>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
Related
I have some challenges with a code as follows.
I need to start this simpliest animation code by means of e.g. ButtonClick event or a method in Code Behind.
Could anyone shed the light on this matter?
Update: The code itself is working perfectly. I need just start it by a button. Not while window loading.
Thanks in advance!
<StackPanel>
<Button x:Name="Button" Content="Start" Click="Button_Click"/>
</StackPanel>
<Image
Name="img"
Width="128"
Height="128">
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Duration="0:0:2.0">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="D://Speakers//Wave_00.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:.5">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="D://Speakers//Wave_01.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="D://Speakers//Wave_02.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:1.5">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="D://Speakers//Wave_03.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
try to change
eventtrigger routedevent="loaded"
in
EventTrigger RoutedEvent="Button_Click"
i hope it works
<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding CardItems}" Name="cardsList" SelectionChanged="cardsList_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="220">
<Grid>
<Grid x:Name="cardBack" Height="200" Width="300" Visibility="{Binding visualBackSide, Mode=TwoWay}">
<Image Source="/Assets/BackCard.png"/>
<TextBox Background="Transparent" BorderBrush="Transparent" TextWrapping="Wrap" Height="140" Width="250" Text="{Binding CardFrontSide, Mode=TwoWay}" TextAlignment="Center" />
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
</Grid>
<Grid x:Name="cardFront" Height="200" Width="300" Visibility="{Binding visualFrontSide, Mode=TwoWay}">
<Image Source="/Assets/FrontCard.png"/>
<TextBox Background="Transparent" BorderBrush="Transparent" TextWrapping="Wrap" Height="170" Width="280" Text="{Binding CardBackSide, Mode=TwoWay}" TextAlignment="Center" />
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
</Grid>
<Grid.Resources>
<Storyboard x:Name="flipTo" >
<PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardFront">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardFront">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardBack">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="flipFrom">
<PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardFront" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardFront" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardBack">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="cardFront">
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
</Grid>
<StackPanel>
<Button toolkit:TiltEffect.IsTiltEnabled="True" BorderThickness="0" Click="DeleteCard_Click" Style="{StaticResource ButtonPressedTransparent}">
<Image Source="/Assets/AppBarButtons/delete.png"/>
</Button>
<Button toolkit:TiltEffect.SuppressTilt="True" BorderThickness="0" Click="FlipCard_Click" Style="{StaticResource ButtonPressedTransparent}">
<Image Source="/Assets/AppBarButtons/refresh.png"/>
</Button>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
<phone:LongListSelector.ListFooterTemplate>
<DataTemplate>
<Button Content="Add new card" Width="200" Click="AddNewCard_Click"/>
</DataTemplate>
</phone:LongListSelector.ListFooterTemplate>
</phone:LongListSelector>
So, here's the animation that turns over the grid with image and the textbox on it.
Code behind
private void FlipCard_Click(object sender, RoutedEventArgs e)
{
var temp = sender as Button;
StackPanel stp = (StackPanel)temp.Parent;
StackPanel stp1 = (StackPanel)stp.Parent;
Grid all = (Grid)stp1.Children[0];
Grid cardBack = (Grid)all.Children[0];
Grid cardFront = (Grid)all.Children[1];
if (cardBack.Visibility == Visibility.Visible)
{
Storyboard sb = all.Resources["flipTo"] as Storyboard;
sb.Begin();
cardBack.Visibility = Visibility.Collapsed;
cardFront.Visibility = Visibility.Visible;
}
else
{
Storyboard sb = all.Resources["flipFrom"] as Storyboard;
sb.Begin();
cardBack.Visibility = Visibility.Visible;
cardFront.Visibility = Visibility.Collapsed;
}
}
But whenever I rotate two elements (or more (I use two elements while testing)) to different sides, I face the next problem: When the longlistselector opens up again, objects vanish from the screen. I set visibility correctly for all the objects though. Objects may vanish both as well as one , even if I don't touch the object, the same picture comes up when I add a new object: If I've turned over the previous one, the next one appears empty, like visibility property for both grids is set 'collapsed'. It's not, though.
I'm sorry, but i cant post images yet.
I want to do a usercontrol, that show and hide (visible & collapsed) a vector object in my project. For that a got a canvas element in my grid.
And truing to make an animation of 2 object Layer1 and Layer2.
<UserControl.Resources>
<Storyboard x:Key="ProgressAnimation" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer1" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer2" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:02" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Next I make a trigger :
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="ProgressAnimationBeginStoryboard" Storyboard="{StaticResource ProgressAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
And insert my element in to Grid :
<Grid>
<Canvas x:Name="Layer1" Margin="74,112,78,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="148.219" Canvas.Left="0" Canvas.Top="0" Width="147.623"/>
</Canvas>
<Canvas x:Name="Layer2" Margin="74,113,79,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="147.36" Canvas.Left="0" Canvas.Top="0" Width="147.243"/>
</Canvas>
</Grid>
In MainForm insert that code to XAML :
<Grid>
<control:LoadingForm HorizontalAlignment="Center" VerticalAlignment="Center" Height="298" Width="304"/>
</Grid>
And that not work properly - got that error :
Error 1 The animation(s) applied to the 'Visibility' property calculate a current value of 'Visible', which is not a valid value for the property. J:\Projects\LoadingPj\LoadingPj\MainWindow.xaml 1 2 LoadingPj
Who can help me to understand my problem?
Thx.
Try to specify Visibility.Visible value explicitly:
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}" />
Seems like it was treated as a string value.
Is there a way to show marquee style border around objects in WinRT?
I see there is stroke style of border,
but I want it to move around the object like the lasso tool border in Photoshop or Paint.
Also I need to decide what should be the color of the gap between two strokes of the dashes.
Thank you.
This is what you want, since you want the fill color:
<Page.Resources>
<Storyboard RepeatBehavior="Forever" x:Name="Test">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
Storyboard.TargetName="Marquee1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="3.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
Storyboard.TargetName="Marquee2">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Rectangle x:Name="Marquee1" Height="200" Width="200"
Stroke="Red" StrokeThickness="10" StrokeDashArray="0.5 2"
StrokeDashOffset="1" StrokeDashCap="Square" />
<Rectangle x:Name="Marquee2" Height="200" Width="200"
Stroke="Green" StrokeThickness="10" StrokeDashArray="0.5 2"
StrokeDashOffset="0" StrokeDashCap="Square" />
<Image Height="175" Width="175" />
</Grid>
Looks like this:
Best of luck!
Found a way to get Marquee style border work like in Photoshop:
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeDashArray">
<DiscreteObjectKeyFrame KeyTime="0" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3, 3"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeDashOffset">
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
I still don't have a way to specify the Gap color though
I have an issue with a custom control and its template.
I have a control which extends Button, its template was created via Expression Blend 4 and it is available in ressources of App.xaml.
This is template :
<ControlTemplate x:Key="ImageButtonControlTemplate1" TargetType="maquette_v0__1_Controles_persos:ImageButton">
<Grid Margin="0" Width="150">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="image1" Source="{TemplateBinding Image}" Height="150"/>
<Image x:Name="image" Source="{TemplateBinding PressedImage}" Height="150"/>
</Grid>
</ControlTemplate>
In a page, I want to add dynamically a custom control.
To do that, I have a grid in my file Xaml "menu_commune" and it is in this grid which I want show my control.
This is the code C# :
ImageButton b = new ImageButton();
b.SetValue(Grid.RowProperty, 0);
b.SetValue(Grid.ColumnProperty, 2);
// bool t = Application.Current.Resources["ImageButtonControlTemplate1"] == null;
ControlTemplate ctemp = (ControlTemplate) Application.Current.Resources["ImageButtonControlTemplate1"];
b.Template = ctemp;
BitmapImage bi_noPress = new BitmapImage(new Uri("/Images/menu_agenda.png"));
BitmapImage bi_Press = new BitmapImage(new Uri("/Images/menu_agenda_selected.png"));
b.Image = bi_noPress;
b.PressedImage = bi_Press;
menu_commune.Children.Add(b);
The problem is nothing is shown.
However, declaration in Xaml runs well.
<UC:ImageButton Grid.Row="2" Grid.Column="2" Image="../Images/menu_office-de-tourisme.png" PressedImage="../Images/menu_office-de-tourisme_selected.png" Height="150" Template="{StaticResource ImageButtonControlTemplate1}" Click="tourisme_Click" />
Thanks
<UC:ImageButton Grid.Row="2" Grid.Column="2" Image="../Images/menu_office-de-tourisme.png" PressedImage="../Images/menu_office-de-tourisme_selected.png" Height="150" Template="{StaticResource ImageButtonControlTemplate1}" Click="tourisme_Click" />
Here you use Grid.Row="2" Grid.Column="2", and in code you need to use same values. Replace
b.SetValue(Grid.RowProperty, 0);
b.SetValue(Grid.ColumnProperty, 2);
for this
b.SetValue(Grid.RowProperty, 2);
b.SetValue(Grid.ColumnProperty, 2);
Hope its help.