I create an animation with Adobe After Effects. I want to use this animation in my Windows Phone 8.1 app. I crate the png sequence from Adobe. How can I use this animation in Windows Phone Applcation.
You can create frame by frame animation with Expression Blend.
Link: Create a simple animation
Edit:
I tried to change Image Source in timeline recording. For some reason, when I change the Source, Blend applies it to actual Image instead of adding it as a part of Storyboard.
I can do it with XAML though. See if you can use this:
Say your Image is defined like this:
<Image x:Name="myImg"/>
Then you can define StoryBoard like this:
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="myImg"
Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Assets/image1.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="/Assets/image2.png"/>
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="/Assets/image3.png"/>
..........
..........
..........
</ObjectAnimationUsingKeyFrames>
</Storyboard>
The KeyTime is specified as hour:min:sec. You can also specify miliseconds, like 0:0:0.100
Related
If I put the following code in a skeleton WinRT app, it won't construct the Main Page:
<Page
x:Class="TestApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="Blue">
<Page.Resources>
<ListPickerFlyout x:Key="btnfly"/>
</Page.Resources>
<Grid>
</Grid>
</Page>
The error is:
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in TestApp1.WindowsPhone.exe but was not handled in user code
WinRT information: Cannot create instance of type '%0' [Line: 12 Position: 42]
Changing the Background tag back to {ThemeResource ApplicationPageBackgroundThemeBrush} fixes the problem.
Any ideas how I can change the background color of my page and still use a ListPickerFlyout?
The easy solution is to set the background colour inside the constructor, after the call to InitializeComponent:
public MainPage()
{
this.InitializeComponent();
// Or the colour of your choice...
Background = new SolidColorBrush(Windows.UI.Colors.Blue);
this.NavigationCacheMode = NavigationCacheMode.Required;
}
The interesting question is "why?" - my guess is that because the ListPickerFlyout is not actually a UIElement there is something strange interaction going on during Initialization.
Yes, "why" is an interesting question, and Peter's answer is good.
I also found another answer from another StackOverflow question.
First, override the FlyoutBackgroundThemeBrush by adding the following to App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="Blue" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="Blue" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Then change the background of the page to Background="{ThemeResource FlyoutBackgroundThemeBrush}"
After, what I thought was a successful porting of Windows Phone toolkit ExpanderView to WinRT, I noticed that it not working 100% as it should.
Here is what i'm trying to do:-
I have a ListView with the ItemsSource being databound, inside the ItemTemplate of this ListView there is a ExpanderView which I port???!!! The idea is that, I want the expander view to expand when I tap on the ListView item.
This per say, is happening BUT when the ExpanderView expands, it overlap the next ListView item, i.e ListViewItem Height is not changing. Why is that I really don't know. Been trying every possible idea I came up with to solve this but in vain :(
Can anyone helps me and guide me in the right direction?
Below is a link to a simple example (VS project with all the necessary code) to demo the problem
Simple Universal App to demo the problem
Thanks in advance
There are quite a few places where you have animations that are making layout changes. These animations are very UI-thread heavy, so require the property EnableDependentAnimations to be set to True. You can find more out about it here. You will likely need to go into the styles and manually change the VisualStates to make this change. One such example is:
In your ExpanderResource.xaml:
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed"
GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas" EnableDependentAnimation="True">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0" />
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
Note that the DoubleAnimationUsingKeyFrames targetting (FrameworkElement.Height) requires EnableDependentAnimations="True", as this affects the layout.
This is not the only place in that file that needs to be fixed. Further, I don't think it will solve all of your layout problems. It will get it property expanding the layout though.
Be sure you are using a stackpanel as your panel.
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Best of luck!
Currently we are using the HubTile to display a large (50-70) images and text overlayed.
<toolkit:HubTile Margin="0,12,12,0"
Title="{Binding title}"
Message="{Binding itemLink}"
Source="{Binding media}"
GroupTag="BindingHubTile"
Style="{StaticResource HubTileStyle1}">
</toolkit:HubTile>
<TextBlock Height="Auto" FontSize="14" FontFamily="{StaticResource PhoneFontFamilyLight}"
TextWrapping="Wrap" Text="{Binding votes}" TextTrimming="WordEllipsis" VerticalAlignment="Bottom"
Foreground="{StaticResource PhoneForegroundBrush}" TextAlignment="Right" Margin="0,0,15,-7" />
The source is bound to a URI that is retrieved from a webserver which then allows the phone to download the image and display it. The problem is, with this amount of images we are finding that the UI is locking up.
Our hubtiles are loaded into a listbox by means of listbox.ItemSource.
Is there an easy way around this?
When you set to an image - URI it downloads in background and doesn't lock the UI - tested.
The only thing that remains is to find where you have locked it.
I had a similar project, but i created CustomControls to fill ListBox. Custom Control contained - date field, text and image.
Image was loaded like this:
BitmapImage image = new BitmapImage(new Uri(article.ImageURL));
NLBI.Thumbnail.Source = image;
And all images were loading async in background and UI was usable.
Is there any way to change the background color for the ad control banner in Windows Phone 8? The background color property or the border property doesn't seem to do it.
I have the same issue.
As a work around I created a rectangle with the background color and positioned it where my ad control is.
You may have to set the z index and set the margins on your page to accommodate it but it will give the same result as changing the ad controls back ground.
Here is my XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Width="480" Height="85" VerticalAlignment="Bottom" Fill="Black"/>
</Grid>
and the c# for the ad control:
AdControl adControl = new AdControl(APPLICATION_ID, // ApplicationID
AD_UNIT_ID, // AdUnitID
true); // isAutoRefreshEnabled
adControl.Width = 480;
adControl.Height = 80;
adControl.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
LayoutRoot.Children.Add(adControl);
I hope this helps, I'd be interested to hear any other solutions if there are any.
I've recently started to use AdDuplex which is much more straight forward and produces it's own container.
I am using an ItemsControl in WP application to show a list of objects ( bind an observable collection to this list).
In WPF we can update the UI if any object properties is updated , but when it comes to WP8 , how can i do the same? Below is the syntax used in WPF , but in WP8 it shows Triggers not found
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Triggers>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
how can i update UI in WP8 ? What i am planning to do is based on the property of an Object set the visibility of a button in the Items.
Rather than use a Trigger. How about using a converter (implementing IValueConverter) to set the visibility based on the property. So your xaml would look like:
<button visibility="{binding YourObjectProperty, Converter={staticresource YourVisibilityConvert}} ... />
Then whenever the propertychanged event is fired for the property, the ui will update visibility based on the value returned by the converter.
you could try to set behavior using Expression blend
xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" x:Class="XXX_XXXX"
<Image Source="/Assets/Images/Tick.png"
Stretch="None"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<interactivity:Interaction.Triggers>
<ec:DataTrigger Binding="{Binding Change}" Value="False">
<ec:ChangePropertyAction PropertyName="Source">
<ec:ChangePropertyAction.Value>
<BitmapImage UriSource="/Assets/Images/Close.png"/>
</ec:ChangePropertyAction.Value>
</ec:ChangePropertyAction>
</ec:DataTrigger>
</interactivity:Interaction.Triggers>
</Image>
Msdn