c#xamlanimationwindows-phone-8windows-phone-7.1
Random animation of object in windows phone
I'm working on random animation of object similar to the mole and hammer game for phones but not using thirds in C#, i'm trying to work only using animation but random.
I have used 9 Ellipse in a grid, and my point is to change the color for the ellipse from white to blue just for a second or less then tern again to white, the ellipse will be chosen randomly or just to set the 9 Ellipse as invisible, then show them randomly, but with animation for seconds then hide.
how could I connect the animation as object and create random from the storyboard !
Here is my C# code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace Game
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void LayoutRoot_Loaded(object seander, RoutedEventArgs e)
{
Random rmd = new Random();
mystory1.Begin();
}
}
}
and here is my xaml :
<phone:PhoneApplicationPage
x:Class="Game.MainPage"
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="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="mystory1">
<ColorAnimation Storyboard.TargetName="El1"
Storyboard.TargetProperty="Color"
From="White" To="Blue"
Duration="0:0:2"
></ColorAnimation>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">
<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">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El1" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse2" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El2" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse3" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El3" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse4" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Row="1" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El4" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse5" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" Grid.Row="1" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El5" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse6" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" Grid.Row="1" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El6" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse7" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Row="2" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El7" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse8" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="1" Grid.Row="2" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El8" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Height="107" HorizontalAlignment="Center" Name="ellipse9" Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" Width="120" Grid.Column="2" Grid.Row="2" >
<Ellipse.Fill>
<SolidColorBrush x:Name="El9" Color="White">
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Solution
You will need a DispatchTimer to trigger a random selection and start the storyboard. To get you started, you can take a look at this code. If you run it, all it does is turn a random white circle to blue each second. You will need to use the code as a reference and change it to meet your needs.
We need to change some XAML and name the ColorAnimation so:
In App.xaml put
<!--Application Resources-->
<Application.Resources>
<Storyboard x:Name="mystory1">
<ColorAnimation
x:Name="myColorAnimation"
Storyboard.TargetName="El1"
Storyboard.TargetProperty="Color"
From="White" To="Blue"
Duration="0:0:2"
/>
</Storyboard>
</Application.Resources>
In MainPage.xaml put
<!-- add in the loaded event to the page to start the timer -->
<phone:PhoneApplicationPage Loaded="PhoneApplicationPage_Loaded">
Namespaces
using System.Windows.Threading; // DispatchTimer
using System.Windows.Media.Animation; // Storyboard
using System.Windows.Media; // Brushes
using System.Windows.Shapes; // Shapes
Create our DispatchTimer so it runs every XYZ second
public partial class MainPage : PhoneApplicationPage
{
DispatcherTimer dt;
// Constructor
public MainPage()
{
InitializeComponent();
// create our dispatch timer
dt = new DispatcherTimer();
dt.Interval = TimeSpan.FromSeconds(1);
dt.Tick += dt_Tick;
}
// start the timer only when the page has loaded
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
dt.Start();
}
/// Every tick, generate a random number from 1 to 9.
/// Use this number to find the Ellipse
/// Set the Storyboard to this found Ellipse
/// Start the Animation
void dt_Tick(object sender, EventArgs e)
{
// generate a random number
Random rmd = new Random();
int random_int = rmd.Next(1, 9);
Storyboard sb = (Storyboard)Application.Current.Resources["mystory1"]; // get the storyboard from Resources
ColorAnimation ca = (ColorAnimation) sb.Children[0]; // get the color animation
sb.Stop(); // stop the storyboard to change the target name
object myobject = this.FindName("El" + random_int.ToString()); // setup the name based off the random number
Storyboard.SetTarget(ca, (DependencyObject) myobject); // set the new target
sb.Begin(); // start the animation
}
}
Now you can add in a lot more Storyboard animations and have a mechanisms to target and start/stop to finish what you're trying to do.
- When did C allow casting constants and variables to struct for assignment?
- Why in C can I initialize more values than the size of an array?
- Using c to create a file and write+read to it, what went wrong?
- Does write system call need the data to be read to give >-1 return?
- Difference between fgetc() and read() function in C
- How can I get to know the IP address for interfaces in C?
- read fails with EFAULT
- In this case, how to achieve modularity and information hiding at the same time?
- Are global variables always initialized to zero in C?
- OpenGL function calls seemingly affecting unrelated data
- What Values of Variables x and y Will Produce Incorrect Results When Testing for Overflow After Subtraction of x-y in the Following Program?
- How to write a general-type queue library in c?
- Which gcc and g++ version support which standard of c and c++?
- How to dereference a member in a struct whose definition is not visible?
- How to name a type in a meaningful way?
- What are Vectors and < > in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- How to organize the receive msg and user current input in C network such that it's clean
- Using inclusive scan syntax in OpenMP in the C language
- Unable to understand context in book "OOP in C" by Axel Schreiner
- variable-length array in struct with TI compiler in C (socket programming)
- A faster way to test 32bpp DDBs for a valid Alpha channel
- How can I compile the zephyr example-application as a freestanding application?
- Why does my forked process sometimes overwrite data in a file?
- _Generic in C needs typecasting?
- Declaring/defining an unused variable changes the output from an unrelated variable
- How to use gdb to explore the stack/heap?
- How can I read an input string of unknown length?
- Confused by difference between expression inside if and expression outside if
- Fast Arc Cos algorithm?