SilverSpot

Creating a calendar in Xamarin Monodroid

noreply@blogger.com (Ramya) — Mon, 07 Oct 2013 09:31:00 +0000

I had to create a calendar in Android using Xamarin and found it really tough initially. So I thought of writing this so that it becomes easy for others to just follow.

Do it before you forget

It is important to add permissions so to make sure that the code works well on the device.

Code:

<uses-permission android:name="android.permission.READ_CALENDAR" />
 <uses-permission android:name="android.permission.WRITE_CALENDAR" />

we will be using the CalendarContract so make sure that the minimum SDK level is set to 14

How to create Calendar
First you have to query the columns and create the properties that the calendar will have.

Code:

var uri = CalendarContract.Calendars.ContentUri;
            ContentValues val = new ContentValues();
            val.Put(CalendarContract.Calendars.InterfaceConsts.AccountName, AccountName);
            val.Put(CalendarContract.Calendars.InterfaceConsts.AccountType, CalendarContract.AccountTypeLocal);
            val.Put(CalendarContract.Calendars.Name, "My Calendar");
            val.Put(CalendarContract.Calendars.InterfaceConsts.CalendarDisplayName, "Silverspot");
            val.Put(CalendarContract.Calendars.InterfaceConsts.CalendarColor, Android.Graphics.Color.Red);       
            val.Put(CalendarContract.Calendars.InterfaceConsts.OwnerAccount, AccountName);
            val.Put(CalendarContract.Calendars.InterfaceConsts.Visible, true);
            val.Put(CalendarContract.Calendars.InterfaceConsts.SyncEvents, true);
            uri = uri.BuildUpon()
                .AppendQueryParameter(CalendarContract.CallerIsSyncadapter, "true")
                .AppendQueryParameter(CalendarContract.Calendars.InterfaceConsts.AccountName, AccountName)
                .AppendQueryParameter(CalendarContract.Calendars.InterfaceConsts.AccountType, CalendarContract.AccountTypeLocal)
                .Build();
            var calresult = ContentResolver.Insert(uri, val);

CallerIsSyncadapter will give you more powers to customize the calendar and create you own calendar instead of adding events in the already existing default calendar. If you dont want it you may set it to false. ContentResolver.Insert will create a new calendar in the native calendar app. This will return a url that will have the calendar ID that will be used in creating events against the calendar that you just created. In my next post ill explain how to create event in the calendar that you just created.

Why the obsession with Start Button?

noreply@blogger.com (Ramya) — Fri, 19 Apr 2013 05:16:00 +0000

Since the day Windows 8 was introduced to the world everybody is speculating about the absence of start button which is totally beyond my understanding. I have been using Windows 8 since the time it was in its consumer preview stages and I have NEVER felt the use of start button. In fact there is no need of start button at all!

If I think back I remember start button had all the shortcuts to the commonly used applications plus a search box and if you wanted to go somewhere easily all you had to do was just press the start button… Now let’s see what does Windows 8 has to offer… A start screen which can hold any number of tiles which are nothing but the shortcuts to your favorite and most used applications. The age old start button could hold a limited number of shortcuts whereas the start screen can have any number of tiles and you can even group them according to the category or your frequency of use. You have the amazing Semantic zoom if you have added many tiles on the start screen.

Coming on to the search box which otherwise popped up in the start menu when we clicked on Start button, I know it was a handy search box. In Windows 8 all you have to do is start typing when you are on the start screen and it would start searching for you in the various apps that you have installed, in files and even in settings. For example if I wanted to search for the Hyper-V settings or the Remote connection settings I just have to start typing the text and Windows 8 searches for these in the settings and quickly shows you the result. I don’t think this is possible with the search text box in start menu!

Now if you are missing the fact the you could have gone to the start menu even when you had opened many applications on the desktop then to compensate that, there is a Window key available on your keypad, and you just have to press it to go back to the start screen or press the Window icon on the Charms

I think people are just not exploring enough. There is nothing missing in Windows 8. Windows 8 has reinvented the whole desktop. Windows 8 has got a beautiful and super user friendly start screen which needs to be used correctly.

Got a problem? Write an app for it!

noreply@blogger.com (Ramya) — Thu, 18 Apr 2013 13:04:00 +0000

I have been working on App development from the past 2 years now and I see that after I started working on it there is a significant change in my thought processes. App development has changed the way I think completely. I now think of apps all the time. I look at problems and think of developing an app to fix that. I keep telling this to my juniors. Finally decided to write a post on how I think and how our simple thought can convert into an app.

Here is what I wrote for one of the company's blog,
http://blog.aditi.com/design/got-a-problem-write-an-app-it/

Hope you'll agree with me :)

National Geographic for Windows 8: milestone

noreply@blogger.com (Ramya) — Wed, 19 Dec 2012 02:37:00 +0000

National Geographic for Windows 8 reached a milestone today... Its not even a month since it was launched, it has already crossed 10k downloads. A serious bug has caused its ratings to go down but we hope people will like the update that we have added. Hope to see more downloads in the coming month. Thank you all for enjoying this app so far. If you find any bugs or have any suggestions please email us to silverspots@outlook.com

National Geographic for windows 8: Update available

noreply@blogger.com (Ramya) — Tue, 18 Dec 2012 16:52:00 +0000

A new update is available for National Geographic for windows 8. Some interesting bugs are fixed. :) We will soon be launching exciting features to it. till then sorry for the inconvenience caused. Keep rating it good. :)

National Geographic for Windows 8: Launch

noreply@blogger.com (Ramya) — Tue, 18 Dec 2012 16:47:00 +0000

Happy to launch the new app dedicated for National Geographic lovers. Get all the news, photos and videos from National Geographic.
The killer features include,

View latest news from National Geographic.
View the picture of the day
Set the picture as lock screen background.
Check out the videos from National Geographic.
view them with in the app.

Get it from here http://apps.microsoft.com/windows/en-us/app/national-geographic-for-windows/329d02e5-806a-45f5-9b62-9bd9f7c324f0

Set your image as lock screen background in Windows 8

noreply@blogger.com (Ramya) — Sun, 02 Dec 2012 13:47:00 +0000

Ever wondered how many times we change our wallpapers?? Well I change it everyday! With Windows 8 you can change your lock screen background too. And I can change it everyday because of my App called as National Geographic for Windows 8. And this is how I did it in xaml,

StorageFile file = await StorageFile.CreateStreamedFileFromUriAsync(URI), new Uri(URI),
                RandomAccessStreamReference.CreateFromUri(new Uri(URI)));
            await LockScreen.SetImageFileAsync(file);
            MessageDialog md = new MessageDialog("This image is set as your lock screen background", "Hurray");
            var result = await md.ShowAsync();

this code snippet would set an image from a uri and display a friendly message to the user.
you will have to include
using Windows.Storage.Streams;

using Windows.System.UserProfile;

to use the LockScreen class. LockScreen.SetImageFileAsync accepts a StorageFile object that contains a new image for the lock screen.
Now you can create an app on your own or download my app and get beautiful wallpapers and lock screen backgrounds everyday! Happy Coding!

To embed Youtube videos in Windows 8 xaml

noreply@blogger.com (Ramya) — Sun, 02 Dec 2012 05:05:00 +0000

I was making my 5th windows 8 application called National Geographic for Windows 8. The best part of the channel’s info lies in videos and all the major videos are uploaded on YouTube. Though YouTube exposes all the videos through its feeds, its difficult to embed their video in xaml. Mainly because xaml does not support Flash. Now YouTube supports HTML 5 videos but I was not able to find many such videos. So I thought of going ahead with Flash players in xaml. The trick lied in embedding the player in an Iframe in a WebView.

This is the code snippet,

 str = string.Format(@"<iframe width='{0}' height='{1}' src='{2}' frameborder='{3}'></iframe>", videoView.ActualWidth - 10, videoView.ActualHeight - 10, link, 0);
videoView.NavigateToString(str);

where "link" is my YouTube video url and "videoView" is my WebView control in the xaml like this

<Grid Style="{StaticResource LayoutRootStyle}">
<WebView x:Name="videoView" Grid.Row="2" Margin="120,0,10,90"/>
</Grid>

I just did a bit of styling and here is the output,

Things that I hate in Nokia Lumia 800..

noreply@blogger.com (Ramya) — Mon, 27 Aug 2012 10:03:00 +0000

Ever since I got Nokia Lumia 800 I have not stopped admiring it for its cut finishing and smooth touch response. But there are few things that I totally hate. No matter how hard I try I still cannot forget the facts that few things are so complex , rather just not there!

I am a person who loves to change the ringtone everytime a new song is released. But that was until I got Lumia. This phone does not allow the user to set their songs as ringtone. I cannot say that it does not allow completely as we can set the ringtone through Zune.

Steps to set ringtone in Lumia 800,

1. Start your PC and plug your phone.

2. Start Zune and search for you song.

3. Change its genre to ringtone.

4. Go back to your phones settings and search for your song.

5. If you find it there then you are lucky and can set it as ringtone.

6. If not then you have to “understand” that the song which you have selected must have been greater than 1 mb. Argh!!!

Steps to set ringtone in any other phone

1. Search your favourite song and go to options

2. Set as ringtone!!!

Oh I miss my old phone for this simplicity!! On top of it I thought of ending this problem and creating my own application that would simply set the ringtone without going to zune….To my surprise the classes are not exposed, the music file is not exposed!!!!! Why on earth did Microsoft do this!

Another thing that I really hate is not being able to use mobile tethering or sharing the internet connection with other devices. After a lot of searches on forums I found that it is not a windows phone 7 problem as its not available only in Nokia Lumia 800!!

These are few moments when I hate myself for buying this phone. I am otherwise a Microsoft fan and a pro Microsoft person but few things like these makes me crazy.

Our first WP7 application-PicLabs is live!

noreply@blogger.com (Ramya) — Sat, 10 Mar 2012 16:02:00 +0000

I was busy all these days creating a new application for Windows Phone 7..and I am so happy to announce that it is live! The app is called as PicLabs and is a photo editing tool. You can even post your edited photos on Facebook. Try it from here,
PicLabs on WP7 Market Place or check out the QR code

Telerik Chart Legend in Metro Style

noreply@blogger.com (Ramya) — Mon, 30 Jan 2012 16:14:00 +0000

In my previous post you saw how to style the Telerik chart item in Metro Style. However you saw that the Legend was not at all matching the Metro Style. So let’s Style the ChartLegend.

Add a ChartLegend like this,

<telerikCharting:ChartLegend HorizontalAlignment="Left" VerticalAlignment="Top"/>

(Remember to delete this extra ChartLegend once you finish style as this is just to ease the creation of the style.)

Once added right click on the ChartLegend and select the Edit Template->Edit a copy option. Once the template for the ChartLegend opens up you will see the basic elements of style used in the slice.

The border for the CharLegend has a gradient fill. Change it to a solid fill to match the metro UI.

Apply this Style to you chart Legend.

Code:

SeriesMapping pieSeries = new SeriesMapping();
pieSeries.SeriesDefinition = new PieSeriesDefinition();
pieChart.DefaultView.ChartLegend.LegendItemStyle = App.Current.Resources["ChartLegendItemStyle"] as Style;

On applying the style your Legend will partially get the Metro look.

I am saying partially because if you have noticed the Legend Item, it is still having a non-metro look.

Lets style this Legend Item as well. Follow the same procedure and open up the template for a ChartLegendItem. You will notice that the glossy look is because of the gradient fill in the PART_SelectedState path. Just remove this gradient fill or replace it with a solid fill.

Apply the ChartLegendItem style,

pieChart.DefaultView.ChartLegend.LegendItemStyle=App.Current.Resources["ChartLegendItemStyle"] as Style;

After all this our chart will be metro ready

Here is the complete code,

Code:

 <!--Legend Style-->
        <SolidColorBrush x:Key="LegendForeground" Color="#FF000000"/>
        <LinearGradientBrush x:Key="LegendBackground" EndPoint="1.96000003814697,0.5" StartPoint="-0.959999978542328,0.5">
            <GradientStop Color="#FFB5B5B5"/>
            <GradientStop Color="#FFF0F0F0" Offset="0.5"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="LegendBorderBrush" Color="#FF848484"/>
        <Thickness x:Key="LegendBorderThickness">1</Thickness>
        <telerik:TextToVisibilityConverter x:Key="textToVisibilityConverter"/>
        <Style x:Key="ChartLegendStyle" TargetType="telerik:ChartLegend">
            <Setter Property="Foreground" Value="{StaticResource LegendForeground}"/>
            <Setter Property="Background" Value="{StaticResource LegendBackground}"/>
            <Setter Property="Padding" Value="10,10,10,5"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="BorderBrush" Value="{StaticResource LegendBorderBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource LegendBorderThickness}"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ChartLegend">
                        <Border Background="#FF1B1B1B" BorderThickness="0">
                            <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                              <VisualState x:Name="Normal"/>
                              <VisualState x:Name="Disabled"/>
                             </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="5">
                          <Grid.RowDefinitions>
                           <RowDefinition Height="Auto"/>
                           <RowDefinition Height="*"/>
                          </Grid.RowDefinitions>
                          <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="White" FontFamily="Segoe UI" />
                          <ItemsPresenter Grid.Row="1"/>
                         </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <TextBlock FontSize="12" HorizontalAlignment="Left" Height="Auto" Padding="0,0,0,2" TextWrapping="Wrap" Text="{Binding}"  Width="Auto"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
     <LinearGradientBrush x:Key="LegendItemMarkerMask" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#D8FFFFFF" Offset="0.009"/>
      <GradientStop Color="#66FFFFFF" Offset="1"/>
      <GradientStop Color="Transparent" Offset="0.43"/>
      <GradientStop Color="#7FFFFFFF" Offset="0.42"/>
     </LinearGradientBrush>
        <!--End-->
        <!--Legend Item Style-->
        <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask" Color="#FF000000"/>
     <SolidColorBrush x:Key="LegendItemMarkerMaskStroke" Color="White"/>
     <System:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</System:Double>
     <SolidColorBrush x:Key="LegendItemMarkerMask2" Color="Transparent"/>
        <Style x:Key="ChartLegendItemStyle" TargetType="telerik:ChartLegendItem">
            <Setter Property="Foreground" Value="#FFFFFFFF"/>
            <Setter Property="Padding" Value="5,0,5,0"/>
            <Setter Property="Margin" Value="0,3,0,2"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ChartLegendItem">
                        <Grid x:Name="PART_MainContainer" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoverStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_LegendItemMarker">
                                                <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="#B2000000"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="PART_LegendItemMarker">
                                                <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Double>2</System:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Path x:Name="PART_LegendItemMarker" 
         Height="10" 
        Style="{TemplateBinding ItemStyle}" Stretch="Fill" 
        StrokeThickness="{TemplateBinding MarkerStrokeThickness}" Width="10"
         HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                                </Path.Data>
                            </Path>

                            <Path x:Name="PART_SelectedState" Height="10" 
        OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}" Stretch="Fill" 
        StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}" Width="10" 
        HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
                                </Path.Data>
                            </Path>

                            <TextBlock x:Name="PART_TextBlock" Grid.Column="1" Padding="{TemplateBinding Padding}" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" FontFamily="Segoe UI"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--End-->

Telerik Chart Item in Metro Style

noreply@blogger.com (Ramya) — Mon, 30 Jan 2012 15:30:00 +0000

Recently all the sites and apps have started following the Metro UI. Even I like it as it looks elegant and simple. So I thought of giving my old Telerik chart application a metro theme. However, as the site says, I did not had the Telerik.Windows.Themes.Metro.dll, I could not add the theme just by writing one line of code. So I thought of creating it on my own. At first it looked tough for me to rip down the super glossy, rich and otherwise super cool UI of Telerik Charts into Solid fills and non glossy UI to match the Metro standards. Not because it was difficult but it was hard for me to disturb the richness of the Telerik charts :) Phew! This is how I finally did it...

All you have to do is delete the gloss in the charts. This is usually done by adding an extra basic UI element with a partially transparent gradient fill. For eg. If you take the Pie chart...this is the extra circle that gives the gloss effect.

You may not be able to able to remove this layer by styling the entire Pie chart. For this you will have to style a single Pie Element or Slice. You may search in the Assets panel of your expression Blend for a Pie slice or may add this

<telerikCharting:Pie HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>

Once added right click on the Pie and select the Edit Template->Edit a copy option. Once the template for the Pie opens up you will see the basic elements of style used in the slice. You will find that there is an ellipse on top of the “PART_DefiningGeometry”. This ellipse must be having the transparent gradient. Remove this ellipse or collapse this ellipse.

Now apply this style to your SeriesDefinition...your metro UI will be applied.

To apply the style from code behind use this

Code:

SeriesMapping pieSeries = new SeriesMapping();
pieSeries.SeriesDefinition = new PieSeriesDefinition();
pieSeries.SeriesDefinition.ItemStyle = App.Current.Resources["PieStyle1"] as Style;

Here is what the end product will look like. I have added few bright colours in the PalleteBrushes collection to match the dark background.

Here is the complete code to this style,

Code:

<RadialGradientBrush x:Key="PieMaskBrush" GradientOrigin="0.5,0.5">
      <GradientStop Color="#33FFFFFF" Offset="0.88"/>
      <GradientStop Color="#00FFFFFF" Offset="0.65"/>
      <GradientStop Offset="0.89"/>
     </RadialGradientBrush>
     <Style x:Key="PieStyle1" TargetType="telerik:Pie">
      <Setter Property="Template">
       <Setter.Value>
        <ControlTemplate TargetType="telerik:Pie">
         <Canvas x:Name="PART_MainContainer">
          <Canvas.RenderTransform>
           <TransformGroup>
            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" ScaleX="0"/>
            <TranslateTransform x:Name="PART_ExplodeTransform"/>
           </TransformGroup>
          </Canvas.RenderTransform>
          <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="HoverStates">
            <VisualState x:Name="Normal">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Hovered">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Hidden">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
           </VisualStateGroup>
           <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
              <DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Selected">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
              <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
             </Storyboard>
            </VisualState>
           </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Ellipse Clip="{TemplateBinding FigurePath}" Height="{TemplateBinding ItemActualHeight}" Style="{TemplateBinding ItemStyle}" StrokeThickness="0" Width="{TemplateBinding ItemActualWidth}"/>
          <Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Fill="Transparent" Style="{TemplateBinding ItemStyle}" Stroke="{x:Null}"/>
          <Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{StaticResource PieMaskBrush}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Visibility="Collapsed"/>
         </Canvas>
        </ControlTemplate>
       </Setter.Value>
      </Setter>
     </Style>

The only thing that is not metro is the LegendItem. It is not giving the entire chart a metro look. Let's style the Legend as well :) You can check my nextpost to see how to style the Legends. Keep watching this space for more!!

Adding a Marker point on Telerik chart

noreply@blogger.com (Ramya) — Fri, 27 Jan 2012 09:16:00 +0000

I was thinking how to add a marker on a telerik chart. After doing a lot of research I found that there is a layer in the ChartArea to add MarkedZones. However, this did not allow me to add a marker image and it had entirely a different usage. Please check the telerik site to know more about the MarkedZones. There might be other ways to do what i wanted to, but this is the approach which i took...

A marked zone is actually a rectangle which takes up the chart coordinates and creates a rectangle using them. So, all we have to do is create a rectangle with the x and y points of the chart and fill the resulting rectangle with an image brush.Simple!!! :)

Here is the code to create a MarkedZone on chart item Click

Code:

 MarkedZone markedZone = new MarkedZone();
            markedZone.StartY = e.DataPoint.YValue;
            markedZone.EndY = e.DataPoint.YValue + ((Axis)(((((ChartArea)(sender)))).AxisY)).ActualStep;
            markedZone.StartX = e.DataPoint.XValue;
            markedZone.EndX = e.DataPoint.XValue + ((Axis)(((((ChartArea)(sender)))).AxisX)).ActualStep;
            BitmapImage bitmap = new BitmapImage(new Uri("/Pointer.png", UriKind.RelativeOrAbsolute));
            ImageBrush imageBrush = new ImageBrush();
            imageBrush.AlignmentX = AlignmentX.Left;
            imageBrush.AlignmentY = AlignmentY.Bottom;
            imageBrush.Stretch = Stretch.None;
            imageBrush.ImageSource = bitmap;
            markedZone.Background = imageBrush;
            LineChart.DefaultView.ChartArea.Annotations.Add(markedZone);

All I have done is create a rectangle using the coordinates and used image brush to fill it... the result was like this.

Now that our pointer is in place lets work to make it look beautiful. As you can see the pointer is just behind the label or item point mark. It is because the layer for marked zone(PART_AnnotationLayer) is below the layer for the item point mark(PART_LabelsPanel). All we have to do now is change the layers by styling the chart area. You can see how it is done here. Once that is done here is what it looks like..

Preloader in Silverlight (Part III) : Bottle filling up animation

noreply@blogger.com (Ramya) — Tue, 24 Jan 2012 14:58:00 +0000

Many a times we come across a situation where we need to create an attractive preloader which resembles filling up of a bottle. For eg. If you have a site for some beverage company, it makes complete sense to create its preloader in the form of a bottle filling up to the top. This will be equally creative and will keep the users attention while your service is busy doing the usual data pick up tasks.

Creating a bottle filling up animation is quite simple. All you have to do it show the user that something is going up the bottle. Though you may choose several ways to show this, I choose the simplest way of changing the color of the liquid (path) inside the bottle from transparent to yellow.

First we need an empty bottle. You may get a png empty bottle image for this. I have created a path for this. It is easily created in Expression Design. You may check out my last post to see how we can create complex paths. My path will look like this,

Once my bottle was ready i created one more path in the shape of the bottle till the neck which had a Z-Index lesser than the bottle. This path will act as my liquid inside.

To create a liquid rising effect I filled the path with a LinearGradientBrush, with one gradient stop completely transparent and other gradient stop with a golden yellow color. I just changed the gradient stops gradually which gave the liquid rising effect.

The whole animation was as simple as changing the color stops. J

All you need to create an animation is just imagination. You may download the application from here

To cut an image in Microsoft Expression Design

noreply@blogger.com (Ramya) — Tue, 24 Jan 2012 10:37:00 +0000

Expression Design is an amazing tool to create designs and images. However, people in the industry say it’s nowhere close to Adobe Photoshop. I would say though it is not as strong as Photoshop but it has some really cool features. We can very well design a complete site in it. I use this tool to design everything from e-cards to images for a complete website. Best part of it is to export the design elements in the form of XAMLs. We can very well copy these paths and create lite Silverlight applications which can be configured.

The only thing that I find very difficult to do in Expression design is cutting a complex image which is really very useful at times. I have tried a lot to do it many a times and end up going to a Photoshop guy to get it cut for me. But recently I have found a way to cut images in Expression design. I find it interesting and easy.

For example if you want to cut a bird from an image(I am using a nice bird wallpaper :)) you may do it the following simple steps,

1. Export the image in Expression Design canvas. You may use Ctrl+E or simply drag the image on to the canvas.

2. Right click the Pen tool to open up the various options available. And find the Polyline or B-Spline tool. A Polyline will typically create straight line paths and the B-Spline will create curved paths.

3. For now use the B-Spline and create anchor points around the desired object, in my case the bird. By this you are basically tracing the image.

4. If you will color the traced path with a solid color it will look like this.

5. Now choose an image fill from the color pallet.

6. Click on the import button in the pallet to choose the parent image, in my case the bird image.

7. On replacing the image in it, the path will be filled with the image brush.

8. Now simply adjust the image by giving transforms to the image brush.

9. You may adjust the height and width percent according to your path. Adjust the X and Y transform to get it to the desired position.

10. Export this and your image is ready J

Preloader in Silverlight (Part II)

noreply@blogger.com (Ramya) — Tue, 09 Feb 2010 08:17:00 +0000

In my previous post I showed you how to create simple preloader. Let’s take it to the next level and create a circular preloader. Circular preloaders are very common and can be seen everywhere. You can Download Source Code here and use it as a usercontrol in your project or add it as a new project. Now keep your users busy watching your animation while you are busy fetching data! Keep watching this space for more such preloaders.

Slide Show in Silverlight

noreply@blogger.com (Ramya) — Sun, 17 Jan 2010 17:22:00 +0000

When my friends come and ask me how to start with Silverlight, I always point them to http://silverlight.net/ But when they ask me to give them some kind of a task so that they can have hands on, then I always tell them to make a simple slide show. Slide show is a thing which is very easy and which can be made equally complex. I find that from the making of this simple show to its conversion to a complex carousel, we get to learn Silverlight and in turn gain confidence over it.

For a beginner it’s always good to start with some static images put in some layout element, when we explore further to see what will be the best container for a stack of images we in turn explore different layouts. Then to make things look better and to add a Silverlight touch to it, I tell them to add little animations on mouse over and out events. Then I tell them to add few buttons and control the slide show using them. By now they ask me how they can do the entire thing dynamically. Then a series of events and changes are done on the same old slide show and in the end a wonderful carousel is made. If you are a beginner in Silverlight then I would suggest you to start learning it by making a slide show. People have made thousands of slide shows but each has a different touch. Here is my version for you to start with.

In this I am locally maintaining an XML that has links to images of some cute dogs. I am reading this xml and then displaying them in the age old filmstrip fashion. To read the xml I have used Linq. The slide show is controlled by a pair of forward and backward buttons.

So, now when everything is all set, why don’t you Download Source Code and get started!

Reading xml from a SharePoint server

noreply@blogger.com (Ramya) — Mon, 11 Jan 2010 06:20:00 +0000

Every now and then we have to send and receive data through an xml or an RSS feed. Some of these xml files can be kept somewhere at the server or can be kept locally. If the xml is stored at a different location then you have to write a web service that would call it and put a Client access policy there. I had a requirement to read an xml file stored at a sharepoint server. Here is how I have done it without web services.

List<string> itemDetailsList = new List<string>();

List<string> itemTitleList = new List<string>();

List<string> itemSourceList = new List<string>();

private XNamespace z = "#RowsetSchema";

public MainPage()

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

void MainPage_Loaded(object sender, RoutedEventArgs e)

//this xml path will be kept at a SharePoint server and the uri will have the address of the SharePoint Server.

Uri absUrl = new Uri("http://yourSite/_vti_bin/owssvr.dll?Cmd=Display&List=%7BCA37%2D7F%2D408CBF6%2D059D&XMLDATA=TRUE", UriKind.RelativeOrAbsolute);

WebClient xmlClient = new WebClient();

xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(xmlClient_DownloadStringCompleted);

xmlClient.DownloadStringAsync(absUrl);

void xmlClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

if (e.Error == null)

XDocument doc = XDocument.Parse(e.Result.ToString());

var docNode = from item in doc.Descendants(z + "row")

select new

ItemTitle = item.Attribute("ows_NameOrTitle") == null ? string.Empty : item.Attribute("ows_NameOrTitle").Value,

ItemDetails = item.Attribute("ows_Details") == null ? string.Empty : item.Attribute("ows_Details").Value,

ItemSource = item.Attribute("ows_RequiredField") == null ? string.Empty : item.Attribute("ows_RequiredField").Value

};

foreach (var itemContent in docNode)

itemTitleList.Add(itemContent.ItemTitle);

itemDetailsList.Add(itemContent.ItemDetails);

itemSourceList.Add(itemContent.ItemSource);

else

MessageBox.Show("error while reading from the server");

Preloader in Silverlight

noreply@blogger.com (Ramya) — Mon, 21 Dec 2009 05:50:00 +0000

Preloaders are those special and small animations which makes the user still stay at your page, when data is retrieved and when there is nothing to be displayed. These small packets of animation can be simple and at the same time can be very creative. Preloaders can actually show how creative or how funny or how professional your website or application is.They actually does add lots of XP's to your app.

You can check this site for some really funny and creative Flash based preloders . Here is one such simple and very common preloader. You may add this as a seperate xap in your project or just copy the xaml into your project. Keep watching this space for more such preloaders.
Download source code here.

Connecting JQuery/javascript and Silverlight

noreply@blogger.com (Ramya) — Mon, 16 Nov 2009 19:09:00 +0000

I had a requirement to send few parameters to silverlight from aspx
page. One of the option I had was to send the parameters as initparams, but initparams
are visible in the page source. Another one was to send the parameters using
JQuery or simple javascript. To go with approach, there is a problem. The problem is not with writing a javascript but
is to send parameters to the silverlight function or to call a javascript function
from silverlight.
To use JQuery we need to add a small javascript file to your
project. Once it is done the rest of the things become very easy. You can
get the
JQuery file here.

Calling Silverlight function from JQuery functionCalling Silverlight
function from JQuery function

A function in silverlight cannot be understood by a jquery function directly.

But we can always make it understand a silverlight function using a simple
[ScriptableMember] tag which indicates that a particular function or
event is accessible to a javascript function. We can add it on a function or
event in silverlight like this

namespaceJQuerySLinteraction
{
   public partial class MainPage : UserControl
   {
      string time;
      publicMainPage( )
     {
        InitializeComponent( );
       HtmlPage.RegisterScriptableObject("MainPage", this);
     }
     [ScriptableMember]
     public void GetTime( )
     {
        time = DateTime.Now.ToShortTimeString( );
        time_txt.Text = time;
     }
   }
}

...and in the aspx page you first need to give an id to your silverlight objcet
tag. In the example I have given the id as SLinteractionXapMarker.
You will have to add the source of the .js file which you downloaded to support
the JQery and make your work easier and efficient. The code with the id and
source of js would look like this..

<head>
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," id="SLinteractionXapMarker" type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/JQuerySLinteraction.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe  id="_sl_historyFrame"  style="visibility: hidden;  height: 0px;  width: 0px;
 border: 0px"></iframe>
</body>

now to call the JQuery or to trigger an event we will make a hyperlink, and on click of that we will call the JQuery that will in turn call the silverlight function
. We will write a small script that would be called on this hyperlink's
click.

<head>
<script language="javascript" type="text/javascript">
$(function() { $("#_time").click(callGetTimeFunc); });
function callGetTimeFunc() {
document.getElementById("SLinteractionXapMarker").Content.MainPage.GetTime();
}
</script>
</head>
<a id="_time" href="default.aspx">Get Time</a>

Note that the #_time is identifying which hyperlink is clicked. The
SLinteractionXapMarker is identifying
which xap has to be addressed, MainPage
is with which we have registered the scriptable object. We can pass any
parameters as well in this way.
Happy Coding!

Create a simple DeepZoom sample application

noreply@blogger.com (Ramya) — Sun, 01 Nov 2009 17:46:00 +0000

A really great feature added by microsoft to interact with images and create amazing zooming applications is Deep Zoom. In short, Deep Zoom provides the ability to interactively view high-resolution images. You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables
smooth loading and panning by serving up multi-resolution images and using spring animations. With its help we can create amazing web experience.
Some of the best examples would be hard rock memorablia, Deep Zoom Pix

How to Create the simplest Deep Zoom application

Install Deep Zoom Composer .
After installation create a new project. Go to File -> New project. A new project will be created with a .dzprj extension.
Collect few good quality pictures.
Start importing it in your project by clicking the add image button.
Prepare a storyboard in your mind. By storyboard I mean how you would like your application to react on mouse events.
Start positioning and composing the images by clicking on the compose tab.
Select an image which would serve as your base image. For example, if I want to make an application similar to Google Earth, then I will take the satellite image of the world as my base image.
Drag and drop the base image into the storyboard area and make it fit to screen.
Add rest of the images on to the base image and reduce their size, till it looks like small yellow lense on your base image.

Add more images and do the same.
Your deep zoom application is ready to be exported!!
Export it and keep zoomin!!!

Create Glow effect in Silverlight

noreply@blogger.com (Ramya) — Fri, 16 Oct 2009 08:06:00 +0000

It every designer's requirement to have three basic effects,
1. Drop shadow effect.
2. Glow effect.
3. Blur effect.
but Silverlight 3 doesn't have glow effect directly. But the good news is that we can create it indirectly!!!
Lets see how it can be done:
1. Create a normal button or any component and style it as you want.
2. Add Drop shadow effect ot it.
3. Set the depth of the shadow to 0.
Thats it!!! Your glow effect is ready!

To achieve this you just need to do a small adjustment in your blend,

Styling a Text Block

noreply@blogger.com (Ramya) — Tue, 06 Oct 2009 19:19:00 +0000

Now a days everybody is bored with age old white contemporary text block!!!Lets make something good!
Here is the TextBlock with a button

This Text block has a button at its end though! I will be posting the code for that button in my next post.
Here is the code:

<Style x:Key="BookmarkTxt" TargetType="TextBox">
           <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="#FFFFFFFF"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid x:Name="RootElement">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF000000"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF333333"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF45494D"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF45494D"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF262626"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#00333333"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border" Opacity="1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4,4,4,4" Background="#FF242424" BorderBrush="#FF45494D">
                                <Grid>
                                    <Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#72F7F7F7" CornerRadius="4,4,4,4"/>
                                    <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
                                        <ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" BorderBrush="#FF525252"/>
                                    </Border>
                                </Grid>
                            </Border>
                            <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                            <Border Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Make a Rating star style button

noreply@blogger.com (Ramya) — Mon, 05 Oct 2009 19:06:00 +0000

Every site has a rating section and to make such star shaped buttons is not an easy task.First because its difficult to make the star shape and second its difficult to manage the checked and unchecked states separately. So, to make your task simpler I have made a simple star style rating button.
To manage its states easily I have used toggle button instead of a button.
Checked state:

Here is the code for this button

Styling a Toggle Button

noreply@blogger.com (Ramya) — Thu, 01 Oct 2009 18:00:00 +0000

The ToggleButton is a Silverlight control which allows the user to change its state. It is the base class for CheckBox and RadioButton controls but it can also be used as a standalone control.

Unchecked state:

Checked State:

Make this button yours here..

<Style x:Key="ToggleButtonStyle2" TargetType="ToggleButton">    <Setter Property="Background" Value="#FF1F3B53"/>    <Setter Property="Foreground" Value="#FF000000"/>    <Setter Property="Padding" Value="3"/>    <Setter Property="BorderThickness" Value="1"/>    <Setter Property="BorderBrush">     <Setter.Value>      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">       <GradientStop Color="#FFA3AEB9" Offset="0"/>       <GradientStop Color="#FF8399A9" Offset="0.375"/>       <GradientStop Color="#FF718597" Offset="0.375"/>       <GradientStop Color="#FF617584" Offset="1"/>      </LinearGradientBrush>     </Setter.Value>    </Setter>    <Setter Property="Template">     <Setter.Value>      <ControlTemplate TargetType="ToggleButton">       <Grid>        <VisualStateManager.VisualStateGroups>         <VisualStateGroup x:Name="CommonStates">          <VisualState x:Name="Normal"/>          <VisualState x:Name="MouseOver"/>          <VisualState x:Name="Pressed"/>          <VisualState x:Name="Disabled">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>         </VisualStateGroup>         <VisualStateGroup x:Name="CheckStates">          <VisualState x:Name="Checked">           <Storyboard>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.459"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.888"/>            </DoubleAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFB4DCE5"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFEEF6F8"/>            </ColorAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unchecked"/>         </VisualStateGroup>         <VisualStateGroup x:Name="FocusStates">          <VisualState x:Name="Focused">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value="1"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unfocused"/>         </VisualStateGroup>        </VisualStateManager.VisualStateGroups>        <Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">         <Border.BorderBrush>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFFCFEFD" Offset="0"/>           <GradientStop Color="#FFE1EFEB" Offset="1"/>          </LinearGradientBrush>         </Border.BorderBrush>         <Border.Background>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFD2DBD9" Offset="0"/>           <GradientStop Color="#FFC2E0E2" Offset="0.909"/>           <GradientStop Color="#FFE0EFED" Offset="0.087"/>           <GradientStop Color="#FFE1EFEB" Offset="0.988"/>          </LinearGradientBrush>         </Border.Background>         <Grid Margin="1"/>        </Border>        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>        <Rectangle x:Name="FocusVisualElement" Stroke="{x:Null}" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>       </Grid>      </ControlTemplate>     </Setter.Value>    </Setter>   </Style><br /> <br />