Laurent Bugnion created 56 useful vector arrows in XAML format. Resource is available in WPF and Silverlight format.
View Demo: New Window
Download: /wp-content/uploads/zip/UsefulArrows.zip
Posts Tagged ‘XAML’
29
Sep
Sep
Loading Animation
1 Comment »
Popularity: 11%
A very simple loading animation in XAML format.
View Demo: New Window
Create a simple loading in XAML:
<UserControl x:Class="ShineDraw.Controls.LoadingAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="400" >
<UserControl.Resources>
<Storyboard x:Name="Rotation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="45"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="45"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="90"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="90"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="135"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="135"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="180"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="180"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="225"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="225"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="270"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="270"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="315"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="315"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="100" Height="100" Fill="#FF000000" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FFAAAAAA" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="45" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FFAAAAAA" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FFAAAAAA" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="135" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FF999999" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FF777777" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="225" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FF555555" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="270" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse Width="100" Height="100" Fill="#FF333333" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="315" CenterX="200" CenterY="50"/>
<TranslateTransform X="-150"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</UserControl>
Website: http://www.shinedraw.com
28
Sep
Sep
Text Strike Through
Post a comment »
Popularity: 4%
The follow XAML let you to add a "strike though" effect on your text. It works for single line text and you are able to customize the font size and color.
View Demo: New Window
XAML to create a strike through text:
<usercontrol height="300" width="400" x:class="ShineDraw.Controls.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid background="White" x:name="LayoutRoot">
<grid horizontalalignment="Center" verticalalignment="Center">
<grid.columndefinitions>
<columndefinition width="Auto"></columndefinition>
</grid.columndefinitions>
<textblock fontsize="28" text="Shine Draw"></textblock>
<line x:name="StrikeThroughLine" stretch="Fill" x2="20" x1="0" strokethickness="1" stroke="Black"></line>
</grid>
</grid>
</usercontrol>
Website: http://www.shinedraw.com
26
Sep
Sep
Create Path in C# and XAML
Post a comment »
Popularity: 1%
Matthias Shapiro demonstrated how you create a geometry object using C# and XAML.
26
Sep
Sep
Create Gradient Background
Post a comment »
Popularity: 1%
Most of the time when you are using Visual Studio and you don’t’ want to open Blend for just setting a very Gradient Background! The below code can surely help you.
Creat gradient background in c#:
LinearGradientBrush linear = new LinearGradientBrush(); linear.StartPoint = new Point(0.5, 0); linear.EndPoint = new Point(0.5, 1); GradientStop g1 = new GradientStop(); g1.Color = _backgroundColor1; g1.Offset = 0; GradientStop g2 = new GradientStop(); g2.Color = _backgroundColor2; g1.Offset = 1; linear.GradientStops.Add(g2); linear.GradientStops.Add(g1); Border border = new Border(); border.Background = linear;
Creating gradient background in xaml:
<UserControl x:Class="GradientBackground.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600" Height="400">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Stroke="Black" Height="180" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="285">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black" Height="190" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="285">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="0.1"/>
<GradientStop Color="Black" Offset="0.2"/>
<GradientStop Color="White" Offset="0.3"/>
<GradientStop Color="Black" Offset="0.4"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Black" Offset="0.6"/>
<GradientStop Color="White" Offset="0.7"/>
<GradientStop Color="Black" Offset="0.8"/>
<GradientStop Color="White" Offset="0.9"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black" Height="180" HorizontalAlignment="Right" Margin="0,10,10,0" VerticalAlignment="Top" Width="285">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black" Height="190" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="285">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</UserControl>
View Demo: New Window
Website: http://www.shinedraw.com
23
Sep
Sep
Clip/Mask To Actual Size
Post a comment »
Popularity: 1%
Colin Eberhardt created a very useful Clipping behavior class which helps you do clipping easily. The behavior can detect the ActualHeight and ActualWidth at run time and create a RectangleGeometry() to Clip your Grid.
c# implementation of the behavior:
using System;
using System.Windows;
namespace Namespace
{
public class Clip
{
public static bool GetToBounds(DependencyObject depObj)
{
return (bool)depObj.GetValue(ToBoundsProperty);
}
public static void SetToBounds(DependencyObject depObj, bool clipToBounds)
{
depObj.SetValue(ToBoundsProperty, clipToBounds);
}
/// <summary>
/// Identifies the ToBounds Dependency Property.
/// <summary>
public static readonly DependencyProperty ToBoundsProperty =
DependencyProperty.RegisterAttached("ToBounds", typeof(bool),
typeof(Clip), new PropertyMetadata(false, OnToBoundsPropertyChanged));
private static void OnToBoundsPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
FrameworkElement fe = d as FrameworkElement;
if (fe != null)
{
ClipToBounds(fe);
// whenever the element which this property is attached to is loaded
// or re-sizes, we need to update its clipping geometry
fe.Loaded += new RoutedEventHandler(fe_Loaded);
fe.SizeChanged += new SizeChangedEventHandler(fe_SizeChanged);
}
}
/// <summary>
/// Creates a rectangular clipping geometry which matches the geometry of the
/// passed element
/// </summary>
private static void ClipToBounds(FrameworkElement fe)
{
if (GetToBounds(fe))
{
fe.Clip = new RectangleGeometry()
{
Rect = new Rect(0, 0, fe.ActualWidth, fe.ActualHeight)
};
}
else
{
fe.Clip = null;
}
}
static void fe_SizeChanged(object sender, SizeChangedEventArgs e)
{
ClipToBounds(sender as FrameworkElement);
}
static void fe_Loaded(object sender, RoutedEventArgs e)
{
ClipToBounds(sender as FrameworkElement);
}
}
}
sample usage in XAML:
<UserControl x:Class="Namespace.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:this="clr-namespace:Namespace;assembly=Namespace"
>
<Grid x:Name="LayoutRoot" this:Clip.ToBounds="True" >
</Grid>
</UserControl>
19
Sep
Sep
Create Storyboard using C# and XAML
Post a comment »
Popularity: 1%
Kris Meeusen demonstrated how to create Storyboard animation identically using C# or XAML. A good article for you to reference how to create your first animation.
View Demo: New Window
