<Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120">
<Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="#24C5E3"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="#38CBE6"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" Stretch="Fill" Fill="#4CD1EA"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="#60D7ED"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" Stretch="Fill" Fill="#74DEF1"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="#88E4F4"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="#9CEAF8"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" Stretch="Fill" Fill="#B0F0FB"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="#C4F6FF"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" Stretch="Fill" Fill="#10BFDF"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0"/>
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="ContentControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:01"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
this works fine in a border, grid, etc, but in resourcedictionary stop working with the error:
"System.InvalidOperationException: ''SpinnerRotate' name cannot be found in the name scope of 'System.Windows.Controls.Canvas'.'"
code in resourcedictionary
<Window x:Class="test.Windows.Window1"
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:test.Windows"
xmlns:system="clr-namespace:System;assembly=System.Runtime"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Key="Loading" RenderTransformOrigin="0.5,0.5" Width="120" Height="120">
<Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="#24C5E3"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="#38CBE6"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" Stretch="Fill" Fill="#4CD1EA"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="#60D7ED"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" Stretch="Fill" Fill="#74DEF1"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="#88E4F4"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="#9CEAF8"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" Stretch="Fill" Fill="#B0F0FB"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="#C4F6FF"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" Stretch="Fill" Fill="#10BFDF"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0"/>
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="ContentControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:01"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="mainGrid" >
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="1" VerticalContentAlignment="Bottom" Content="Button" VerticalAlignment="Bottom" Click="Button_Click"/>
<Border Child="{StaticResource Loading}">
</Border>
</Grid>
how make this animation work from the resourcedictionary? i MUST have this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Key="Loading" RenderTransformOrigin="0.5,0.5" Width="120" Height="120">
<Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="#24C5E3"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="#38CBE6"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" Stretch="Fill" Fill="#4CD1EA"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="#60D7ED"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" Stretch="Fill" Fill="#74DEF1"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="#88E4F4"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="#9CEAF8"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" Stretch="Fill" Fill="#B0F0FB"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="#C4F6FF"/>
<Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" Stretch="Fill" Fill="#10BFDF"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0"/>
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="ContentControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:01"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</ResourceDictionary>
in a external xaml and load in runtime, except for the load/inject resourcedictionary NO CODE to complement the canvas/animation above, the animation must be 100% xaml and do not depend in ANY code behind to run, MUST work from ResourceDictionary reference, again: NO EXTRA CODE!
is that possible, to me seams 'simple' is just adjust the references, maybe extract the value to another keys in ResourceDictionary? so i will have 'angle' inside the canvas reference that angle and in the trigger reference the key of the angle? that link works? how i do that?
Related
Trying to implement two animation which will run forever but not getting idea how to do here are my findings which i was trying
<Grid Grid.Row="0" Background="#339FFE">
<Image Source="Assets\ic_nytra_logo.png" HorizontalAlignment="Left" Stretch="Fill" Width="84" Height="72"
Margin="10,0,0,0"/>
<Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="Uniform" Width="49" Height="49"
Margin="0,10,15,0"/>
</Grid>
<Grid x:Name="ImageGrid" Grid.Row="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,-240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="245,-134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="285,2,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="254,134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="10,286,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,252,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-239,146,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-266,10,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-232,-122,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,-238,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Image x:Name="ImageBlock" Source="Assets/ic_out_circle.png" HorizontalAlignment="Center" Stretch="Uniform" Width="230">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation">
<DoubleAnimation To="0" From="360" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="ImageGrid"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Canvas x:Name="round_anima" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-120,10,0,130" >
<Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/ic_round_animation.png" Height="120" Width="120">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation1">
<DoubleAnimation To="360" From="0" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="round_anima"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
</Grid>
but the storyboard containing second animation is not working.Any reference or idea regarding this issue.one can refer for image in given postenter link description here
but the storyboard containing second animation is not working.Any reference or idea regarding this issue.
The second animation should target round_anima1(image) instead of round_anima(canvas), you are defining a PlaneProjection on an image, not on Canvas.
I guess you want to rotate the second image(round_anima1) anticlockwise. You are doing it correctly, but since the second image is inside of ImageGrid, it's also rotating with the ImageGrid. Thus the second animation looks like it's not working.
To fix the problem, change Storyboard.TargetName="round_anima" to Storyboard.TargetName="round_anima1" and change To value from 360 to 720:
<Image x:Name="round_anima1" Canvas.ZIndex="2" Source="Assets/profiler.jpeg" Height="120" Width="120">
<Image.Projection>
<PlaneProjection />
</Image.Projection>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation1">
<DoubleAnimation To="720" From="0" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="round_anima1"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Here is the result:
I have implemented the structure that is rotating continuously in clockwise direction and now want to implement small circle attached along with it which should also rotate along the same direction in which pointed structure is rotating. Code for that are given below.
XAML
<Grid Name="mainGridView">
<Grid.Background>
<ImageBrush ImageSource="Assets/info_bg.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition x:Name="rowDefSubjectHeadingGrid" Height="1*"/>
<RowDefinition x:Name="rowDefSubjectListGrid" Height="4.4*"/>
<RowDefinition x:Name="rowDefButtonGrid" Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#339FFE">
<Image Source="Assets\ic_nytra_logo.png" HorizontalAlignment="Left" Stretch="Fill" Width="84" Height="72"
Margin="10,0,0,0"/>
<Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="Uniform" Width="49" Height="49"
Margin="0,10,15,0"/>
</Grid>
<Grid Grid.Row="1">
<Image Stretch="Uniform" Name="Display" HorizontalAlignment="Center" Source="Assets/ic_out_circle.png" Width="230">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
</Grid>
<Grid Grid.Row="2" Background="#339FFE">
</Grid>
</Grid>
CS
public sealed partial class MainPage : Page
{
private Storyboard rotation = new Storyboard();
public MainPage()
{
this.InitializeComponent();
DoubleAnimation animation = new DoubleAnimation();
animation.From = 0.0;
animation.To = 360.0;
// animation.BeginTime = TimeSpan.FromSeconds(1);
animation.RepeatBehavior = RepeatBehavior.Forever;
animation.Duration = TimeSpan.FromSeconds(15);
Storyboard.SetTarget(animation, Display);
Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Z" + ")");
rotation.Children.Clear();
rotation.Children.Add(animation);
rotation.Begin();
}
}
Image given below
i got the solution
<Grid x:Name="ImageGrid" Grid.Row="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,-240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="245,-134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="285,2,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="254,134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="10,286,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,252,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-239,146,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-266,10,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-232,-122,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,-238,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Image x:Name="ImageBlock" Source="Assets/ic_out_circle.png" HorizontalAlignment="Center" Stretch="Uniform" Width="230">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation">
<DoubleAnimation To="0" From="360" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="ImageGrid"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
Why the storyboard is fading my TextBox x:Name="WelcomeText" inside RelativePanel x:Name="WelcomeRelativePanelUserControl".
In my comprehension the storyboard target is
the FlipView x:Name="fvWelcome" inside the RelativePanel x:Name="fvWelcomeRelativePanel"
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"/>
</RelativePanel>
The other control:
<RelativePanel x:Name="fvWelcomeRelativePanel">
<FlipView x:Name="fvWelcome"
RelativePanel.AlignBottomWithPanel="True">
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0"
To="1"
Duration="0:0:4"
RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemTemplate >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="Welcome" Height="0.3*"/>
<RowDefinition x:Name="GuestName" />
</Grid.RowDefinitions>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0"
Text="{Binding}"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79">
</TextBox>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
My fade effect is working well but why does the text of my TextBox x:Name="WelcomeText" also fade? It shouldn't. I don't understand why? And how can I forbid this effect on this textbox and make it run on the TextBox x:Name="GuestNameTextBox" in the second control fvWelcome
<RelativePanel x:Name="GeneralPanelGuest">
I resolved it just by putting this general relativePanel with 2 others RelativePanel for each of the 2 differents items that I didn't want to have the same behavior and by removing the grid inside the fliepView that I used to put the welcome above which was making inheritance
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center" FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"
/>
<TextBlock x:Name="WelcomeTextException2"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="WelcomeText"
Margin="215,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
HorizontalAlignment="Center" FontSize="34"
/>
</RelativePanel>
<RelativePanel x:Name="relFvWelcome" RelativePanel.Below="WelcomeRelativePanelUserControl">
<FlipView x:Name="fvWelcome"
VerticalAlignment="Center"
Background="#FF1F4E79"
RelativePanel.AlignBottomWithPanel="True"
>
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="1x"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate >
<DataTemplate>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0" Text="{Binding}"
FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
>
</TextBox>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
</RelativePanel>
So I try to generate the xaml code below with visual studios, Silverlight.
But when I put parts into comment to check where my fault is, it never works.
So I would like to find out where my fault is so I can try to interact with Javascript
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ShowGridLines="True" Loaded="onLoaded">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform" Grid.Row="1" Grid.Column="1">
<Canvas Height="300" Width="600">
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="61.57098099504444" Height="160.95803800991115" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="0.0" Y1="157.95" X2="45.0" Y2="157.95" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="112.86424230466895" Height="153.59151539066212" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="75.0" Y1="110.34" X2="120.0" Y2="110.34" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="54.47593841460492" Height="120.54812317079018" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="150.0" Y1="185.25" X2="195.0" Y2="185.25" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="178.28025619556524" Height="95.23948760886945" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="225.0" Y1="74.10000000000002" X2="270.0" Y2="74.10000000000002" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="60.658737319718924" Height="82.68252536056214" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="300.0" Y1="198.0" X2="345.0" Y2="198.0" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="176.2529831230876" Height="52.79403375382487" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="375.0" Y1="97.34999999999997" X2="420.0" Y2="97.34999999999997" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="66.47512033126283" Height="129.84975933747432" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="450.0" Y1="168.6" X2="495.0" Y2="168.6" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="31.87007514135977" Height="145.05984971728049" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="525.0" Y1="195.6" X2="570.0" Y2="195.6" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="93.02414165274203" Height="156.551716694516" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="600.0" Y1="128.7" X2="645.0" Y2="128.7" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="106.2876271364089" Height="30.724745727182178" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="675.0" Y1="178.35000000000002" X2="720.0" Y2="178.35000000000002" />
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="0" Height="148.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="0" Height="276.6" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="0" Height="183.0" Opacity="0.5" Fill="Yellow" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="0" Height="142.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="0" Height="121.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="0" Height="237.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="0" Height="141.0" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="0" Height="100.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="0" Height="207.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="0" Height="124.50000000000001" Opacity="0.5" Fill="red" />
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="0.0" X2="750.0" Y2="0.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="0" Canvas.Left="-50">0</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="30.0" X2="750.0" Y2="30.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="30" Canvas.Left="-50">2</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="60.0" X2="750.0" Y2="60.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="60" Canvas.Left="-50">4</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="90.0" X2="750.0" Y2="90.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="90" Canvas.Left="-50">6</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="120.0" X2="750.0" Y2="120.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="120" Canvas.Left="-50">8</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="150.0" X2="750.0" Y2="150.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="150" Canvas.Left="-50">10</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="180.0" X2="750.0" Y2="180.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="180" Canvas.Left="-50">12</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="210.0" X2="750.0" Y2="210.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="210" Canvas.Left="-50">14</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="240.0" X2="750.0" Y2="240.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="240" Canvas.Left="-50">16</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="270.0" X2="750.0" Y2="270.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="270" Canvas.Left="-50">18</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="300.0" X2="750.0" Y2="300.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="300" Canvas.Left="-50">20</TextBlock>
<TextBlock Canvas.Left="35" Canvas.Bottom="106.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Computersystemen 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="110" Canvas.Bottom="170.3" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Databanken 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="185" Canvas.Bottom="123.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Engels
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="260" Canvas.Bottom="103.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Frans
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="335" Canvas.Bottom="80" Foreground="White" VerticalAlignment="Center" Width="100" TextWrapping="Wrap" LineHeight="AUTO">
Boekhoudkundig inzicht
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="410" Canvas.Bottom="150.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Netwerken1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="485" Canvas.Bottom="102.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Programmeren 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="560" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Software engineering 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="635" Canvas.Bottom="135.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
User interfaces 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="710" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Management accounting
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Viewbox>
<Border Grid.Row="0" Grid.Column="1" Width="180" Height="200" BorderThickness="1">
<TextBlock Grid.Row="0" Grid.Column="1" TextAlignment="Center" FontSize="20">Fred Sanchez</TextBlock>
</Border>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0">
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Fred Sanchez
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Lois Weaver
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Denise Andrews
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Charles Butler
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Joan Willis
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Patrick Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Michael Elliott
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Wanda Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Bonnie Collins
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
John Black
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center">
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" MouseLeftButtonUp="onSagemClicked" Margin="1">
Standaardafwijking en gemiddelde
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" Margin="1">
Minimum en maximum
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
</Grid>
I'm looking for xaml that can represent a loading icon, like vista does.
Visual Description:
Round ( about 1/3 inch in width )
lighter blue color
transparent center
gel button looking (rounded edges wtih a little shadow)
white spinner around the edge, to give the movement
light(er) sky blue / gel pack looking
I've found spinning rectangles, and we can create XAML that gives the illusion of spinning, but we're just drawing 12 parts of a clock, and animating each one individually.
Does it absolutely have to be full-XAML? For this kind of effects, transparent PNGs work just great. Simply stack the PNGs up in a Grid and animate some of them using RotateTransform and DoubleAnimation.
If your application does not have to zoom much, that will be the easiest way to do the trick.
Greetings,
Laurent
Here is a super simple spinner I created in SL that you could convert to WPF.
<UserControl x:Class="Spinner.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<UserControl.Resources>
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</UserControl>
#Joeln, Thank you I was able to convert this to WPF, and get what I needed, thank you.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard Name="beginThis">
<Storyboard x:Name="Animiation" RepeatBehavior="Forever">
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:.25" Storyboard.TargetName="e1" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.125" Duration="0:0:.25" Storyboard.TargetName="e2" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.25" Duration="0:0:.25" Storyboard.TargetName="e3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.375" Duration="0:0:.25" Storyboard.TargetName="e4" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.5" Duration="0:0:.25" Storyboard.TargetName="e5" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.625" Duration="0:0:.25" Storyboard.TargetName="e6" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.75" Duration="0:0:.25" Storyboard.TargetName="e7" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".5" AutoReverse="True" BeginTime="0:0:0.825" Duration="0:0:.25" Storyboard.TargetName="e8" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
<Grid x:Name="LayoutRoot" Background="White">
<Grid Width="100" Height="100" x:Name="gridSpinner">
<Ellipse x:Name="e1" Margin="40,80,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e2" Margin="12,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e3" Margin="0,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e4" Margin="12,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e5" Margin="40,0,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e6" Margin="68,12,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e7" Margin="80,40,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Ellipse x:Name="e8" Margin="68,68,0,0" Height="20" Width="20" Fill="Gray" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</Grid>
</Page>