Creating a calendar in Xamarin Monodroid

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?

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!

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

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

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

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,

1. View latest news from National Geographic.
2. View the picture of the day
3. Set the picture as lock screen background.
4. Check out the videos from National Geographic.
5. 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

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

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..

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!

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

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

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

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

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

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