Canvas loaded event : Canvas « Containers « Silverlight

1. Silverlight
2. Containers
3. Canvas

Canvas loaded event

    

<UserControl x:Class='SilverlightApplication3.MainPage'
    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' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>

    <Canvas x:Name="LayoutRoot" 
            Background="White" 
            Loaded="LayoutRoot_Loaded">

        <Canvas.Resources>
            <Storyboard x:Name="AnimationController">
                <PointAnimation From="100, 100"
                                To="100, 450"
                                Duration="00:00:02"
                                AutoReverse="True"
                                RepeatBehavior="Forever"
                                Storyboard.TargetName="Ball1"
                                Storyboard.TargetProperty="Center" />

                <ColorAnimation From="Red"
                                To="Yellow"
                                Duration="00:00:05"
                                AutoReverse="True"
                                RepeatBehavior="Forever"
                                Storyboard.TargetName="MyPath"
                                Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" />


                <DoubleAnimation From="0"
                                 To="360"
                                 Duration="00:00:03"
                                 RepeatBehavior="Forever"
                                 AutoReverse="True"
                                 Storyboard.TargetName="Ball2Rotate"
                                 Storyboard.TargetProperty="Angle" />

                <DoubleAnimation From="100"
                                 To="300"
                                 Duration="00:00:05"
                                 AutoReverse="True"
                                 RepeatBehavior="Forever"
                                 Storyboard.TargetName="Ball2Translate"
                                 Storyboard.TargetProperty="X" />

                <DoubleAnimation From="120"
                                 To="200"
                                 Duration="00:00:05"
                                 AutoReverse="True"
                                 RepeatBehavior="Forever"
                                 Storyboard.TargetName="Ball2Translate"
                                 Storyboard.TargetProperty="Y" />
            </Storyboard>
        </Canvas.Resources>

        <Path x:Name="MyPath" 
              Fill="Red">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry x:Name="Ball1"
                                 Center="100, 100"
                                 RadiusX="50"
                                 RadiusY="50" />
                </GeometryGroup>
            </Path.Data>
        </Path>

        <Ellipse x:Name="Ball2"
                 Width="100"
                 Height="30"
                 Canvas.Top="120"
                 Canvas.Left="100"
                 Fill="Blue">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="Ball2Rotate" />
                    <TranslateTransform x:Name="Ball2Translate" />
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>

</UserControl>


//File: Page.xaml.cs

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;

namespace SilverlightApplication3
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            AnimationController.Begin();
        }
    }
}

   
    
    
    
  

Related examples in the same category

1.	Positioning UI Elements with a Canvas
2.	A Simple Canvas Control and Three Image Controls
3.	Use tag rather than attribute to set canvas background
4.	Add button to Canvas
5.	The Canvas.ZIndex is based on a number starting with 0 being the farthest back
6.	Create Canvas controls that contain other controls and even nest them in other Canvas or Grid controls.
7.	Nested Canvas Objects
8.	To draw a rectangle, specify its Canvas.Top, Canvas.Left, Width, Height, and Fill color
9.	A basic Canvas element
10.	A basic Canvas with some content.
11.	Simple Canvas Layout
12.	Set control position for Canvas
13.	Get position on a Canvas with Canvas.GetLeft
14.	Canvas dependant
15.	Canvas without Viewbox
16.	Adding Rectangles to Canvas
17.	Put text on Canvas
18.	Put control into a Canvas
19.	Set Canvas background to White
20.	Add Thickness for Padding