WPF or silverlight XAML element collision detection
WPF or silverlight XAML element collision detection.
private bool CheckCollision(FrameworkElement ctl1,FrameworkElement ctl2)
{
bool retval = false;
Point ptTopLeft = new Point(Convert.ToDouble(ctl1.GetValue(Canvas.LeftProperty)), Convert.ToDouble(ctl1.GetValue(Canvas.TopProperty)));
Point ptBottomRight = new Point(Convert.ToDouble(ctl1.GetValue(Canvas.LeftProperty)) + ctl1.Width, Convert.ToDouble(ctl1.GetValue(Canvas.TopProperty)) + ctl1.Height);
Rect r1 = new Rect(ptTopLeft, ptBottomRight);
//System.Diagnostics.Debug.WriteLine("+++x:" + ptTopLeft.X.ToString() + " Y " + ptTopLeft.Y.ToString() + " " + ptBottomRight.X.ToString() + " " + ptBottomRight.Y.ToString());
Point ptTopLeft2 = new Point(Convert.ToDouble(ctl2.GetValue(Canvas.LeftProperty)), Convert.ToDouble(ctl2.GetValue(Canvas.TopProperty)));
Point ptBottomRight2 = new Point(Convert.ToDouble(ctl2.GetValue(Canvas.LeftProperty)) + ctl2.Width, Convert.ToDouble(ctl2.GetValue(Canvas.TopProperty)) + ctl2.Height);
Rect r2 = new Rect(ptTopLeft2, ptBottomRight2);
r1.Intersect(r2);
if (!r1.IsEmpty)
{
retval = true;
}
return retval;
}
Silverlight Toolkit Column Series – Display Label on bar (Column Labels) ( datapoint labels )
Silverlight Toolkit Column Series – Display Label on bar (Column Labels) ( datapoint labels )
Final Output:
Silverlight Toolkit Column Series – Display Label on bar (Column Labels) ( datapoint labels )
<navigation:Page x:Class="SL4Test.Page1"
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"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="Page1 Page" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<Grid x:Name="LayoutRoot" Margin="0, -17, 0, 0">
<toolkit:Chart HorizontalAlignment="Left" Margin="124,79,0,0" Name="chart1" Title="Labels on Bar" VerticalAlignment="Top" Height="317" Width="418">
<toolkit:ColumnSeries DependentValuePath="X" IndependentValuePath="Y">
<toolkit:ColumnSeries.DataPointStyle>
<Style TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ColumnDataPoint">
<Grid>
<Rectangle
Fill="{TemplateBinding Background}"
Stroke="Black"/>
<Grid
Background="#aaffffff"
Margin="0 -40 -10 0"
HorizontalAlignment="Right"
VerticalAlignment="Center">
<TextBlock
Text="{TemplateBinding FormattedDependentValue}"
FontWeight="Bold" Width="40"
Margin="2"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
<toolkit:ColumnSeries.ItemsSource>
<PointCollection>
<Point>1,10</Point>
<Point>2,20</Point>
<Point>3,30</Point>
<Point>4,40</Point>
</PointCollection>
</toolkit:ColumnSeries.ItemsSource>
</toolkit:ColumnSeries>
</toolkit:Chart>
</Grid>
</navigation:Page>
Silverlight 4 Pie Chart Customization – Palett color, Silce color change, Observable collection and 2 color pie chart
Silverlight 4 Pie Chart Customization – Palett color, Silce color change, Observable collection and 2 color pie chart.
Output:
Silverlight Pie chart customization
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 System.Windows.Threading;
using System.Collections.ObjectModel;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Controls.DataVisualization;
namespace SL4Test
{
public partial class MainPage : UserControl
{
private ObservableCollection w;
public MainPage()
{
InitializeComponent();
PopulateChart();
}
private void PopulateChart()
{
//Set chart color palette
//We just want 2 colors red and green
ResourceDictionaryCollection palette = new ResourceDictionaryCollection();
for (int i = 0; i <= 1; i++)
{
byte r;
byte g;
if (i == 0) {r= Convert.ToByte(255);} else{ r = Convert.ToByte(0);}
if (i == 0) { g = Convert.ToByte(0); } else { g = Convert.ToByte(255); }
byte b = Convert.ToByte(0);
Style style = new Style(typeof(Control));
style.Setters.Add(new Setter(BackgroundProperty,
new SolidColorBrush(Color.FromArgb(255, r, g, b))));
//style.Setters.Add(new Setter(TemplateProperty, this.Resources["PieDataPointTemplate"]));
ResourceDictionary dictionary = new ResourceDictionary();
dictionary.Add("DataPointStyle", style);
palette.Add(dictionary);
}
//Set the Chart Grid Background to transparent
Style style1 = new Style(typeof(Grid));
style1.Setters.Add(new Setter(Grid.BackgroundProperty, Colors.Transparent.ToString()));
this.mychart.PlotAreaStyle = style1;
//Set the new ( 2 color) palette to chart object
this.mychart.Palette = palette;
this.w = new ObservableCollection
{
new Counter { Name = "a", Current =0 },
new Counter { Name = "b", Current = 100 }
};
this.DataContext = this.w;
TestDispatcherTimer();
}
private void TestDispatcherTimer()
{
DispatcherTimer timer = new DispatcherTimer();
int iLast = 0;
int iTotal = 100;
if (timer.IsEnabled) timer.Stop(); else timer.Start();
timer.Tick +=
delegate(object s, EventArgs args)
{
iLast += 10;
iTotal -= 10;
if (iTotal == 0) timer.Stop();
w.Clear();
this.mychart.DataContext = null;
w.Add(new Counter { Name = "a", Current = iLast });
w.Add(new Counter { Name = "b", Current = iTotal });
this.mychart.DataContext = w;
this.mychart.Palette = new Collection(mychart.Palette);
};
timer.Interval = new TimeSpan(0, 0, 1); // one second
timer.Start();
}
}
public class Counter
{
public string Name { get; set; }
public int Current { get; set; }
}
}
<UserControl x:Class="SL4Test.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:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System_Windows_Controls_DataVisualization_Charting_Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
>
<UserControl.Resources>
<Style x:Key="ChartStyle1" TargetType="toolkit:Chart">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Palette">
<Setter.Value>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB9D6F7"/>
<GradientStop Color="#FF284B70" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFFBB7B5"/>
<GradientStop Color="#FF702828" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB8C0AC"/>
<GradientStop Color="#FF5F7143" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFFDE79C"/>
<GradientStop Color="#FFF6BC0C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFA9A3BD"/>
<GradientStop Color="#FF382C6C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB1A1B1"/>
<GradientStop Color="#FF50224F" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF9DC2B3"/>
<GradientStop Color="#FF1D7554" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB5B5B5"/>
<GradientStop Color="#FF4C4C4C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF98C1DC"/>
<GradientStop Color="#FF0271AE" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFC1C0AE"/>
<GradientStop Color="#FF706E41" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFADBDC0"/>
<GradientStop Color="#FF446A73" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF2F8CE2"/>
<GradientStop Color="#FF0C3E69" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFDCDCDC"/>
<GradientStop Color="#FF757575" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFB7B7B7" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFA3A3A3" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</Setter.Value>
</Setter>
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="toolkit:Title">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="LegendStyle">
<Setter.Value>
<Style TargetType="toolkit:Legend">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="75"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Chart">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<toolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
<Grid Margin="0,15,0,15" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<toolkit:Legend x:Name="Legend" Grid.Column="1" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>
<System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Style="{TemplateBinding PlotAreaStyle}" Canvas.ZIndex="-1"/>
<Border BorderBrush="#FF919191" BorderThickness="0" Canvas.ZIndex="10"/>
</System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Image Source="11.jpg" Height="Auto" Width="Auto"></Image>
<toolkit:Chart x:Name="mychart" Style="{StaticResource ChartStyle1}" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="1" Padding="0" BorderThickness="0" Margin="50">
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Current}" Width="Auto" Height="Auto" VerticalContentAlignment="Center" Opacity="1" Margin="0" Background="#01000000" BorderThickness="0">
<toolkit:PieSeries.BorderBrush>
<SolidColorBrush />
</toolkit:PieSeries.BorderBrush>
</toolkit:PieSeries>
</toolkit:Chart>
</Grid>
</UserControl>
Usercontrol with Events
Next button user control with 3 states – MouseEnter, MouseLeave and MouseLeftButtonUp.
<UserControl x:Class="Msoni.UserControls.NextButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="47" Height="43">
<Canvas x:Name="LayoutRoot" MouseEnter="LayoutRoot_MouseEnter" MouseLeave="LayoutRoot_MouseLeave" MouseLeftButtonDown="LayoutRoot_MouseLeftButtonDown" MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp" >
<Image x:Name="BtnNextImg" Source="../Assets/Images/Controls/Next_0.png" />
</Canvas>
</UserControl>
namespace Msoni.UserControls
{
public partial class NextButton : UserControl
{
public delegate void clickHandler(object sender, EventArgs e);
public event clickHandler nextClick;
public NextButton()
{
InitializeComponent();
}
private void LayoutRoot_MouseEnter(object sender, MouseEventArgs e)
{
BtnNextImg.Source = commonclass.GetImageSource("../Assets/Images/Controls/Next_1.png");
}
private void LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
{
BtnNextImg.Source = commonclass.GetImageSource("../Assets/Images/Controls/Next_0.png");
}
private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
BtnNextImg.Source = commonclass.GetImageSource("../Assets/Images/Controls/Next_2.png");
}
private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
BtnNextImg.Source = commonclass.GetImageSource("../Assets/Images/Controls/Next_0.png");
nextClick(this, e);
}
}
}
Placed usercontrol inside Main Page
<myUC:NextButton x:Name="btnNext" Canvas.Left="1213" Canvas.Top="749" Visibility="Collapsed" nextClick="NextButton_Click" />
Silverlight 3 calendar Control Change Font Size
Style for Silverlight 3 calendar control with Large font Date display for touch scenarios.
[ Large font silverlight 3 calender)
ScreenShot
Silverlight 3 Calendar control with large fonts
<Style x:Key="CalendarDayButtonStyle1" TargetType="System_Windows_Controls_Primitives:CalendarDayButton">
<Setter Property="Background" Value="#FFBADDE9"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="5"/>
<Setter Property="MinHeight" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="System_Windows_Controls_Primitives:CalendarDayButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".35"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedBackground" Storyboard.TargetProperty="Opacity" To=".75"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CalendarButtonFocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Active"/>
<VisualState x:Name="Inactive">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="RegularDayGradientStart" Storyboard.TargetProperty="Color" To="#FF777777"/>
<ColorAnimation Duration="0" Storyboard.TargetName="RegularDayGradientEnd" Storyboard.TargetProperty="Color" To="#FF777777"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="RegularDay"/>
<VisualState x:Name="Today">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="TodayBackground" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="TodayGradientEnd" Storyboard.TargetProperty="Offset" To="1"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="RegularDayGradientStart" Storyboard.TargetProperty="Offset" To="1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay"/>
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="BlackoutVisual" Storyboard.TargetProperty="Opacity" To=".2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="TodayBackground" Fill="#FFAAAAAA" RadiusX="1" RadiusY="1" Opacity="0"/>
<Rectangle x:Name="SelectedBackground" Fill="{TemplateBinding Background}" RadiusX="1" RadiusY="1" Opacity="0"/>
<Rectangle x:Name="Background" Fill="{TemplateBinding Background}" RadiusX="1" RadiusY="1" Opacity="0"/>
<ContentControl x:Name="Content" FontSize="{TemplateBinding FontSize}" IsTabStop="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,1,5,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentControl.Foreground>
<LinearGradientBrush>
<GradientStop x:Name="TodayGradientStart" Color="#FFFFFFFF" Offset="0"/>
<GradientStop x:Name="TodayGradientEnd" Color="#FFFFFFFF" Offset="0"/>
<GradientStop x:Name="RegularDayGradientStart" Color="#FF333333" Offset="0"/>
<GradientStop x:Name="RegularDayGradientEnd" Color="#FF333333" Offset="1"/>
</LinearGradientBrush>
</ContentControl.Foreground>
</ContentControl>
<Path x:Name="BlackoutVisual" Fill="#FF000000" Stretch="Fill" HorizontalAlignment="Stretch" Margin="3" VerticalAlignment="Stretch" Opacity="0" RenderTransformOrigin="0.5,0.5" Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"/>
<Rectangle x:Name="FocusVisual" Stroke="#FF6DBDD1" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Navigation Application – Navigate Child page from Parent page
In silverlight navigation app, if your parent page has a control ( like move next previous) you can use following code to navigate child page from parent page.
Uri nUri = new Uri("/About", UriKind.Relative);
this.ContentFrame.Navigate(nUri);
Change Image
public static ImageSource GetImageSource(string sFilePath)
{
Uri myuri = new Uri(sFilePath, UriKind.Relative);
ImageSource imgS = new BitmapImage(myuri);
return imgS;
}
//Usage:
//bgimg.source = GetImageSource("../assets/bg1.png");
Drawing with Ink
1. XAML Page
2. Code behind
<UserControl x:Class="InkXaml.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="Gray" CornerRadius="20" x:Name="borderInk" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" >
<InkPresenter x:Name="inkP" Background="Transparent" Cursor="Stylus" MouseLeftButtonDown="inkP_MouseLeftButtonDown" MouseLeftButtonUp="inkP_MouseLeftButtonUp" MouseMove="inkP_MouseMove"/>
</Border>
<Button x:Name="btnErase" Content="Eraser" Grid.Column="0" Grid.Row="1" Height="40" Width="100" Click="btnErase_Click" />
<Button x:Name="btnDraw" Content="Draw" Grid.Column="1" Grid.Row="1" Height="40" Width="100" Canvas.Left="100" Click="btnDraw_Click" />
</Grid>
</UserControl>
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Ink;
namespace InkXaml
{
public partial class Page : UserControl
{
private Stroke _stroke = null;
private StylusPointCollection eraserPoints;
private InkMode _mode = InkMode.Draw;
public enum InkMode
{
Draw,
Erase
}
public Page()
{
InitializeComponent();
}
private void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
inkP.CaptureMouse();
if (_mode == InkMode.Draw)
{
_stroke = new Stroke();
_stroke.DrawingAttributes.Color = Colors.White;
_stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
inkP.Strokes.Add(_stroke);
}
if (_mode == InkMode.Erase)
{
eraserPoints = new StylusPointCollection();
eraserPoints = e.StylusDevice.GetStylusPoints(inkP);
}
}
private void inkP_MouseMove(object sender, MouseEventArgs e)
{
if (_mode == InkMode.Draw)
{
if (null != _stroke)
{
_stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
}
}
if (_mode == InkMode.Erase)
{
if (null != eraserPoints)
{
eraserPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
StrokeCollection hits = inkP.Strokes.HitTest(eraserPoints);
for (int cnt = 0; cnt < hits.Count; cnt++)
{
inkP.Strokes.Remove(hits[cnt]);
}
}
}
}
private void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_stroke = null;
eraserPoints = null;
inkP.ReleaseMouseCapture();
}
private void btnErase_Click(object sender, RoutedEventArgs e)
{
inkP.Cursor = Cursors.Eraser;
_mode = InkMode.Erase;
}
private void btnDraw_Click(object sender, RoutedEventArgs e)
{
inkP.Cursor = Cursors.Stylus;
_mode = InkMode.Draw;
}
}
}
Toggle Full Screen
Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
Navigation Application – Refer main page from child page
Silverlight 3 navigation app – Here is the code to refer main page control from within child page.
var mainPage = Application.Current.RootVisual as MainPage; mainPage.ApplicationNameTextBlock.Visibility = Visibility.Collapsed;
leave a comment