Sharker Khaleed Mahmud Silverlight Tips & Tricks

94. Using the Bing API in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 09 Jan 2011 02:22:06 +0000

The Version 2 of Bing API has cross domain policy…so now it can easily do Bing Search from silverlight app. In this entry, I will do a simple query search using the API applying MVVM pattern and ICommand.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Let look at the initial code

        public void Search(string query, ActionXElement>> searchCallBack)
        {
            string AppId = “—”; //API for http:// silverlightips.net site
            string _baseURI = “http://api.search.live.net/xml.aspx?Appid={0}&query={1}&sources=web“;

Uri address = new Uri(String.Format(_baseURI, AppId, query));

            WebClient service = new WebClient();
            service.OpenReadCompleted += (sender, e) => searchCallBack(GetResults(e));
            service.OpenReadAsync(address);
        }

As you can see I created a simple URI to do a API search. In here, the parameter that i am passing are appid, query text and the sources in the base uri. Just to give u the idea of the URI that is being created, i will debug it and put a snapshot below.

Copy the url and test paste it in the browser to check if the url works or not. Do note that our e.result should return exactly the same output as shown in the browser.

Our webclient should return exactly this. If you look in the above code, we are calling a method GetResults where we are returning the results as shown below.

        private XElement GetResults(OpenReadCompletedEventArgs e)
        {
            XElement element = null;

            if (e.Error == null)
            {
                if (e.Result != null)
                {
                    element = XElement.Load(XmlReader.Create(e.Result));
                }
            }

return element;
}

The above code returns the search result. The type of result that it give is stream type. To do LINQ queries on XML, I converted the result to XElement. So, the converted XElement result should be equivalent to the one the url I pasted before. Let debug and check it.

So we basically can see the result that it gives. So we can conclude the WebService part of the project is working. The web service is being invoked through a view model through an interface.

BingAPIViewModel.cs

    public class BingAPIViewModel
    {
        public ObservableCollection Results { get; set; }
        public IAPIService APIService { get; set; }

        public BingAPIViewModel()
        {
            this.Results = new ObservableCollection();
            this.APIService = new APIService();
            this.APIService.Search(“cricket”, this.OnSearchCompleted);
        }

        private void OnSearchCompleted(XElement searchResults)
        {
            this.Results.Clear();
        }
    }

Here the return type is XElement which is great for LINQ queries. Now lets create a simple Model for the return collection.

    public class SearchResult
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public string UrL { get; set; }
    }

The main idea is now to iterate our collection of XElement and fill our Results of type Observablecollection which is done below.

        private void OnSearchCompleted(XElement elements)
        {
            this.Results.Clear();
            const string WEB_NS = “http://schemas.microsoft.com/LiveSearch/2008/04/XML/web“;
            IEnumerable nodes = null;
            nodes = elements.Descendants(XName.Get(“Results”, WEB_NS)).Nodes();

            if (nodes.Count() > 0)
            {
                var results = from uris in nodes
                              select new SearchResult
                              {
                                  UrL = ((XElement)uris).Element(XName.Get(“Url”, WEB_NS)).Value,
                                  Title = ((XElement)uris).Element(XName.Get(“Title”, WEB_NS)).Value,
                                  Description = ((XElement)uris).Element(XName.Get(“Description”, WEB_NS)).Value,
                              };

                foreach (SearchResult result in results)
                {
                    Results.Add(result);
                }
            }
        }

Ok, we have received the search result into our view model. Now if we bind the view model to our view we can see the data. This can be easily done by this.

this.DataContext = new BingAPIViewModel(); at code and in UI

So far, we have used fixed variable for our query search. Now lets make it dynamic. For this I will use simple ICommand. Bind the button with an ICommand in view model.

and the modified view model using ICommand

       public ICommand SearchCommand { get; set; }
        public IAPIService APIService { get; set; }
        private const string WEB_NS = “http://schemas.microsoft.com/LiveSearch/2008/04/XML/web“;

        public BingAPIViewModel()
        {
            this.Results = new ObservableCollection();
            this.APIService = new APIService();
            this.SearchCommand = new DelegateCommand(this.SearchCommandChanged, this.CanInputTexChanged);
            this.APIService.Search(“sample”, this.OnSearchCompleted);
        }

        internal bool CanInputTexChanged(object param)
        {
            return true;
        }

        private void SearchCommandChanged(object param)
        {
            this.APIService.Search(param as string, this.OnSearchCompleted);
        }

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: silverlight bing search

93. Animated Vertical Scrollable Content in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sat, 01 Jan 2011 21:52:38 +0000

In this entry, I will create a simple animated vertical sliding content. To do this I will start first by creating a simple listbox and then do the binding using MVVM pattern and afterwards apply animation to the listboxitem content from code behind.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

So lets look at the initial listbox code.

                    StackPanel>

It basically is a simple data structure but works, now the data need to be binded to a collection. In this case the collection is items eg. ItemsSource=”{Binding Items}”. In my case, I am going to create a simple view model with this property and bind the view model to the user control i.e views. This can be easily achieved by setting like this.

MainPage.xaml.cs
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = new ItemViewModel();
        }
ItemViewModel.cs

namespace ScrollableContent.ViewModels
{
    public class ItemViewModel
    {
        public ItemViewModel()
        {

        }
    }
}

We need a collection say items in the view model which will be binded to the listbox. Now if you go t the Image class, you will notice that the source has type ImageSource.

In other words, the Items need to be like this. The below code would have work if we are only binding the image. We also have text to bind. So a model needs to be created having the properties to be binded to the listbox.

    public class ItemViewModel
    {
        public List Items { get; set; }

        public ItemViewModel()
        {
            this.Items = new List();
        }
    }

So the changed code is
    public class ItemViewModel
    {
        public List Items { get; set; }

        public ItemViewModel()
        {
            this.Items = new List();
        }
    }

where the ItemModel is

    public class ItemModel
    {
        public ImageSource Source { get; set; }
        public string Description { get; set; }
    }

and to this property is to be binded to the listbox. So the data template need to be changed.

Lets add a simple dummy data to check if our Model-View-ViewModel actually works.

        public ItemViewModel()
        {
            this.Items = new List();
            this.Items.Add(new ItemModel() {
                Source = new BitmapImage(new Uri(“../Images/unknown.png”, UriKind.Relative)),
                Description = “This is some text”,
            });
        }

Now we have that cleared lets add some more data before animation is tried on collection. Instead of adding data on constructor, add all the data in another method for more simplicity. One thing to note here is that the listbox size will increase if we increase the size of the collection. Now restrict the current list box to show only two contents at a time.

Ok, now we want to animate and scroll the content of the listbox we are going to translate the Y property of the listBox. To do this i will write a storyboard and manipulate it using parameter as shown below.

        public static Storyboard VerticalAnimation(UIElement controlToAnimate, double positionToMove)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.Duration = new Duration(TimeSpan.FromSeconds(1));

            Storyboard sb = new Storyboard();
            sb.Duration = new Duration(TimeSpan.FromSeconds(1));
            sb.Children.Add(da);

            Storyboard.SetTarget(da, controlToAnimate);
            Storyboard.SetTargetProperty(da, new PropertyPath(“(UIElement.RenderTransform).(TranslateTransform.Y)”));
            da.To = positionToMove;
            return sb;
        }

Ok, so basically this storyboard will either slide upwards or downwards and we can send a parameter “position to move” on this storyboard. This makes all of it very simple. Add two events and invoke this story board to do the slide up/down effect as shown below…

        int move = 0;
        int imgShown = 2;
        private const int h = 350;

        public MainPage()
        {
            InitializeComponent();
            this.Next.Click += new System.Windows.RoutedEventHandler(Next_Click);
            this.Back.Click += new System.Windows.RoutedEventHandler(Back_Click);
            this.DataContext = new ItemViewModel();
        }

        void Back_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            if (imgShown != 2)
            {
                imgShown -= 2;
                move += h;
                VerticalAnimation(this.Collection, move).Begin();
            }
        }

        void Next_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            if (this.Collection.Items.Count > imgShown)
            {
                imgShown += 2;
                move -= h;
                VerticalAnimation(this.Collection, move).Begin();
            }
        }

This complete the whole coding. Now lets clean the view and move all the parameter to the App.xaml/resource dictionary as you see fit. In this case. after cleaning the view looks like this.

Now you might be wondering what happened to data template. It is now in the being applied as style. In other words, the data template can now be reused for other types of control beside listbox.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: photo gallery, scrolling animation

92. Animated Note Control using Triggers in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Fri, 29 Oct 2010 22:25:59 +0000

In this entry, I am going to create a simple note control. Let’s look at the initial code I have written below. The idea is that the control should be very simple and easy to create. Create a class and name it say…SlideNoteControl and then refer this control to your Mainpage.xaml where controls: is the namespace of the project.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

SlideNoteControl.cs

    public class SlideNoteControl : ContentControl
    {
        public SlideNoteControl()
            : base()
        {
            this.DefaultStyleKey = typeof(SlideNoteControl);
        }

public static readonly DependencyProperty NoteProperty = DependencyProperty
.Register(“Note”, typeof(UIElement), typeof(SlideNoteControl), null);

        public UIElement Note
        {
            get { return (UIElement)this.GetValue(SlideNoteControl.NoteProperty); }
            set { this.SetValue(SlideNoteControl.NoteProperty, value); }
        }
    }

and here is how you use it in .xaml

So basically I created a dependency property to hold content for this note control. Now I will open blend and go to app.xaml to design this note control. Now think of what a note control needs…a border with a shadow and some text in it. So basically the controltemplate should define a simple note looks. Look at the .xaml below

App.xaml

and the output looks like this…the below image shows a readonly mode note. I say that this is readonly as i have used textblock only.

However, you can chang the textblock to any control that you feel like. For eg, if you want to write on the note….great use a TextBox.

MainPage.xaml

Now the note should slide and when click close. Let’s use trigger to create a storyboard and stop it when close icon clicked. For demonstration purpose, the above example uses a textblock. First of all create a simple storyboard which translate the note control from left to right in blend. How to do that?…ok just hold the slide control and create two keyframe which will translate this control. Obviously the storyboard should be in the styles. For now lets look at the code below.

Dummy StoryBoard Created in Blend

   DoubleAnimationUsingKeyFrames>

I need to animate my note control. As a result, the targetName need to change when this storyboard will be put inside the style as shown below.

App.xaml










                                EventTrigger>

Great, now the sliding animation is working. One last touch that is needed is that the current note control needs a close button. For this i will be using triggers from blend. The below code shows how I manipulate the storyboard using triggers when the close button is clicked.

                                                        ei:ControlStoryboardAction.Storyboard>
                                                    ei:ControlStoryboardAction>

Here is the output..

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: custom control, note control, silverlight triggers

91. Custom preloader in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 03 Oct 2010 23:21:04 +0000

Lets start this entry by first congratulating newly awarded (and re-awarded) Silverlight MVPs. Congratulation to all of them…!!!

Ok, now back to today’s entry. You can see the live example here [live demo] (Put on your headphone : )

The SOURCE CODE(.zip) is at the end of the page for download.

The first thing about creating a preloader is that you should be using a separate xaml file which can be pointed from Silverlight object tag. For now, look at the code below,

Right click on you .web and add a Silverlight 1.0 Jscript Page. A sample xaml page with Canvas should get created along with a js file.

With the help of js function, we can actually manipulate the xaml file. Before I get to that, lets open blend and design a sample preloader. The idea is very simple. There will be a text, where it will show the downloaded progress and…a bar which will show the progress. It is more flexible if you do the design in MainPage.xaml and then relocate the code in your customPreloader.xaml. I have taken the design idea of the bar from here

CustomPreloader.xaml

http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“>

Now lets add some bulky data. For demonstration purpose, I will add a random mp3 file.

MainPage.xaml

Compile the project. Your .xap file size should increase. My speed is not that great …so this size is good enough for test purpose.

Now lets get back to the js file. We want to write a function where we can manipulate the width of the bar and text in xaml. This can be done by writing the function assigned in the silverlight object tag as shown below.

customPreloader.js

function SourceDownloadProgressChanged(s, e) {
    var bartext = s.findname(“bartext”);
    var bar = s.findname(“bar”);
    if (bartext != null || bar != null) {
        var value = Math.round(e.progress * 100)
        bartext.Text = value + “%”;
        var newWidth = 2.8 * value;
        bar.Width = Math.round(newWidth)
    }
}

Notice that the xaml “bar” parent has border width 280. So if we divided the width in 100 region each part will be 2.8. So in js our bar.Width is being calculated as bar.Width = Math.round(2.8 * value) where values is the current percentage downloaded. The important thing to remember is to point the reference of the js file in your page.

Finally when it is published, make sure to add the xaml file.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: preloader silverlight, silverlight preloader

90. Drawing on Image in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sat, 25 Sep 2010 06:26:32 +0000

In last entry, I talked about drag-and-drop image. In this I will write about how you can draw on your image and maybe in next post save it. Today for drawing, I will use InkPresenter.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Lets look at initial coding.

As you can see in the above code, I have added 3 event handlers. Lets talk about the first one.

        private void ink_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
// while pressed, we want to start drawing
        }

So here goes the code.

        private void ink_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //capturing the ink
            ink.CaptureMouse();
            //current set of point collection
            StylusPointCollection points = e.StylusDevice.GetStylusPoints(ink);
            currentStroke = new Stroke(points);
            //set color of stroke
            currentStroke.DrawingAttributes.OutlineColor = Colors.White;
            currentStroke.DrawingAttributes.Color = Colors.White;
            //adding current stroke
            ink.Strokes.Add(currentStroke);
        }

Now comes the mouse move region. In here we are adding the points to our current stroke.

        private void ink_MouseMove(object sender, MouseEventArgs e)
        {
            if (currentStroke != null)
            {
                StylusPointCollection points = e.StylusDevice.GetStylusPoints(ink);
                currentStroke.StylusPoints.Add(points);
            }
        }

and the last part where we release and reset everything….

        private void ink_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            //releasing the inkPrensenter
            ink.ReleaseMouseCapture();
            //setting to null so when mouse moved when not pressed…no draw.
            currentStroke = null;
        }

Now, lets run the app. Try drawing, nothing happens. So basically we have made an obvious mistake. If you look at the xaml coding, we have set the ink presenter behind the image. So no wonder, nothing gets drawn. Lets fix it.

MainPage.xaml

        http://silverlightips.net” IsTabStop=”False” Height=”30″ VerticalAlignment=”Top” HorizontalAlignment=”Center” Foreground=”White” />

Run the app. It should work. Now let’s try drawing on the image. I took the image from deviant art gallery for demonstration purpose.

In this way, we can customize any image and give the feeling of personal touch. In next entry, I will talk more about saving this image.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: ink Presenter

89. File Drag-and-Drop Support in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Thu, 16 Sep 2010 10:22:43 +0000

In this entry, I will talk about drop support that came with Silverlight 4. It is actually very simple to use and you can take the advantage of it if you happen to create a simple Silverlight Image Editor. This is a simple introduction to an editor currently I am working to customize images and in future apply adobe effects. However, in this entry, I will talk about only image(s) drag and drop from external place to your Silverlight application.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

First I will start coding drag feature. An image at the moment can easily be dragged using the default MouseDragElementBehavior. So just add that to your image and it will become draggable as shown in the code below.

MainPage.xaml

Silverlight is too fun, when coding gets this simple . So the image can now be dragged around. Now lets add the drop feature.

For making everything very simple, I will just now add AllowDrop=”True” and then add a drop handler to handle any file that is being dropped.

Now, lets move to the code behind. For demonstration purpose, I will use images from deviantArt gallery.

MainPage.xaml.cs

        //make sure you drag an image to drop
        private void LayoutRoot_Drop(object sender, DragEventArgs e)
        {
            if (e.Data != null)
            {

}
}

Now reading a drop file, this can be easily be done as shown below. You can drop multiple files in the editor, but in this scenario I will code to get only one file.

//reading the drop file
FileInfo file = ((FileInfo[])e.Data.GetData(DataFormats.FileDrop)).FirstOrDefault();

Now, we have actually got hold of the file that is being dropped. At the moment, I have assumed that the file drop is an image. If it is not then you should implement code to handle that kind of scenario. I will not talk about that but go ahead and assuming the user did drop an image file.

So we now have a reference to the dropped file. Lets create BitmapImage of the dropped file.

                //creating a bitmapImage
                BitmapImage img = new BitmapImage();

                using (Stream s = file.OpenRead())
                {
                    img.SetSource(s);
                }

Once that is done, set the image to your image control in xaml like this.

//setting the image in xaml
DropImage.Source = img;

You are done applying the above image. Now lets save the collection of drop image.

Everytime a image is dropped, I will add it to my Stackpanel. You can add scrollviewer or use ItemsControl to hold the collection. I will be using stackpanel for demonstration purpose.

        //make sure you drag an image to drop
        private void LayoutRoot_Drop(object sender, DragEventArgs e)
        {
            if (e.Data != null)
            {
                //reading the drop file
                FileInfo file = ((FileInfo[])e.Data.GetData(DataFormats.FileDrop)).FirstOrDefault();

//setting the image in xaml
DropImage.Source = img;

                Image newImage = new Image { Source = img };
                newImage.MouseLeftButtonDown += (a, b) =>
                {
                    DropImage.Source = newImage.Source;
                };

                DropCollection.Children.Add(newImage);
            }
        }

As you can see, that dropped image is added to the collection. Click on the collection image and that will be displayed on the center image. This sample can easily be updated allowing multiple Images to be dragged and dropped but I will continue with it on my next entry.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: file drag drop silverlight, file drag silverlight, file drop silverlight

88. Clipboard Support in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Wed, 15 Sep 2010 06:17:43 +0000

In this entry I am going to do a simple scenario involving copy and paste. Basically, the clipboard class has three members, ContainsText, GetText and SetText. To demonstrate, I will use a simple textbox.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Create a simple xaml having a buttons and a textbox. Add a handler to each button so we can write code against the click events.

MainPage.xaml

87. Adding DropTargetValidation to MouseDragElementBehavior in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sat, 04 Sep 2010 06:44:01 +0000

One of the testers gave me a scenario where the objects get lost to a project I worked some time ago. This happened due to the use of MouseDragElementBehavior. To explain more of the scenario, open the live link given below.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

For demonstration purpose, I will be using an one piece anime image from deviant art gallery. Starting from the left side, drag the first object out from the box and then release your mouse. You would notice that the object can not be seen anymore. This happens to be the case when you donot restrict an object in a particular bound.

MainPage.xaml

Now a possible solution to the problem would be to use . If that is the case, then try dragging the second object from the box. Notice that for object that are bigger than the restricted zone…do not works out well.

MainPage.xaml

So basically, I will be customizing the MouseDragElementBehavior to support this kind of scenario where the objects do not get lost.

So let’s start by creating a custom class inheriting our default dragelementbehaviour.

Now to make an object reset to its original position, I will add this new property

1. ResetX : This will deal with the X position that the object should get reset to. It could be the objects initial postion or at any position the user chooses to.

2. ResetY : This will deal with the Y position that the object should get reset to. It could be the objects initial postion or at any position the user chooses to.

3. AllowDropWidth : This property validate the amount of X plane that the object can move around without getting reset.

4. AllowDropHeight: This property validates the amount of Y plane that the object can move around without getting reset.

5. IsDropTargetValidate: This is a Boolean variable that determines if the object drop position needs to be validated.

Now let’s add this property in our CustomDragBehaviour

        #region ResetX
        public static readonly DependencyProperty ResetXProperty = DependencyProperty
            .Register(“ResetX”, typeof(double), typeof(CustomDragBehaviour), null);

        public double ResetX
        {
            get { return (double)this.GetValue(CustomDragBehaviour.ResetXProperty); }
            set { this.SetValue(CustomDragBehaviour.ResetXProperty, value); }
        }
        #endregion

        #region ResetY
        public static readonly DependencyProperty ResetYProperty = DependencyProperty
            .Register(“ResetY”, typeof(double), typeof(CustomDragBehaviour), null);

        public double ResetY
        {
            get { return (double)this.GetValue(CustomDragBehaviour.ResetYProperty); }
            set { this.SetValue(CustomDragBehaviour.ResetYProperty, value); }
        }
        #endregion

        #region AllowDropWidth
        public static readonly DependencyProperty AllowDropWidthProperty = DependencyProperty
            .Register(“AllowDropWidth”, typeof(double), typeof(CustomDragBehaviour), null);

        public double AllowDropWidth
        {
            get { return (double)this.GetValue(CustomDragBehaviour.AllowDropWidthProperty); }
            set { this.SetValue(CustomDragBehaviour.AllowDropWidthProperty, value); }
        }
        #endregion

        #region AllowDropHeight
        public static readonly DependencyProperty AllowDropHeightProperty = DependencyProperty
            .Register(“AllowDropHeight”, typeof(double), typeof(CustomDragBehaviour), null);

        public double AllowDropHeight
        {
            get { return (double)this.GetValue(CustomDragBehaviour.AllowDropHeightProperty); }
            set { this.SetValue(CustomDragBehaviour.AllowDropHeightProperty, value); }
        }
        #endregion

        #region IsDropTargetValidate
        public static readonly DependencyProperty IsDropTargetValidateProperty = DependencyProperty
            .Register(“IsDropTargetValidate”, typeof(bool), typeof(CustomDragBehaviour),null);

        public bool IsDropTargetValidate
        {
            get { return (bool)this.GetValue(CustomDragBehaviour.IsDropTargetValidateProperty); }
            set { this.SetValue(CustomDragBehaviour.IsDropTargetValidateProperty, value); }
        }
        #endregion

Look at the above picture. I am using my new CustomDragBehaviour. I am setting IsDropTargetValidate=”true”. When the object gets out of the region, it can reset to any position that you assigned . Now allowing the amount of XY plane that the object can move around freely should be equal to the amount to the view region. So instead of giving hardcoded value, I am binding it to the parent width and height.

Now comes the part where we implement the moment validation rule. In this example, the validation needs to happen when the user releases the mouse. In behavior, we usually do that on two properties as shown in the code

        protected override void OnAttached()
        {
            base.OnAttached();
            if (IsDropTargetValidate)
                this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            if (IsDropTargetValidate)
                this.AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
        }

In here, I am adding an MouseLeftButtonUp handler when the object gets attached…and removing it when the objects get detached. Inside the event now apply the validation as written below.

        void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            var img = (Image)sender;

            if (this.X >= ResetX + AllowDropWidth || this.Y >= ResetY + AllowDropHeight || this.X <= -(img.ActualWidth – ResetX) || this.Y <= -(img.ActualHeight – ResetY))
            {
                this.X = ResetX;
                this.Y = ResetY;
            }
        }

For easy of setting the reset value, you could uncomment the Message written below. Change reset value to make left/right equal.

        void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            var img = (Image)sender;

//resetX and resetY value is respective to MainCanvas

            //
            //so +/- resetX[value] at XAML till the image moves exactly at the right boundary line. When that happens both left/right[value] will become equal.
            //MessageBox.Show(X + “==” + (ResetX + AllowDropWidth)); //right validation

//so +/- resetY[value] at XAML till the image moves exactly at the bottom boundary line. When that happens both left/right[value] will become equal.
//MessageBox.Show(Y + “==” + (ResetY + AllowDropHeight)); // bottom validation

            //no need to change here….
            if (this.X >= ResetX + AllowDropWidth || this.Y >= ResetY + AllowDropHeight || this.X <= -(img.ActualWidth – ResetX) || this.Y <= -(img.ActualHeight – ResetY))
            {
                this.X = ResetX;
                this.Y = ResetY;
            }
        }

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: MouseDragElementBehavior

86. Multipurpose Ripple motion in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Tue, 31 Aug 2010 09:27:55 +0000

We all should be familiar with wave concept. If you throw a stone in water you can see how the motion plays out in water. I will try to create a sample animation which tries to replicate ripple motion in blend. I will not be using the ripple effect in Blend, but will create an animated one from scratch. This ripple is a bit different then the blend ripple effect. This ripple motion can be used for various purposes like in bing maps or giving some side effects in your site layout, some flashy click event and other times in your splash screen while showing the progress bar.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Now lets look at a simple ripple picture above. The movement is from center to outward and it has like 4 circles in it. Now lets talk in terms of blend.

1. 4 circle ~ 4 ellipse (I will demonstrate with 3)
2. Blue line ~ ellipse border
3. Ripple motion ~ apply story storyboard to enlarge ellipse.

So basically if we create those above steps we can have a static ripple created. Lets start with the 3 circle. Each circle should be placed in such way that one is bigger than the other and should look like a ripple. Here goes the code.

For each ellipse, I will animate these property, so it will give an effect of enlarging and compressing. The idea is the circle will go bigger and smaller with time line.

1. ScaleX
2. ScaleY
3. TranslateX
4. TranslateY
5. StrokeThickness
6. Opacity
7. Stroke
8. Fill

Creating a control

Now, after spending some quality time by manipulating I created a simple ripple effect. Now for ease of use, lets put it to a separate user control.

Now apply our newly created control on water surface. For demonstration, I will apply it in a water surface taken from a game level.

MainPage.xaml

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: highlight silverlight, ripple blend, ripple silverlight, silverlight ellipse

85. Custom Layout using ContentControl in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Tue, 24 Aug 2010 06:30:57 +0000

In this entry, I will use content control to create a site layout. So basically the layout control will have header, footer, left body, right body and main body.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Lets start by creating a class inheriting content control.

namespace SiteLayout
{
public class LayoutContentControl : ContentControl
{

}
}

Now before getting started with writing code, lets get the default design of the Content Control. This can easily be achieved by blend. Just drag a content control and click on “edit a copy”

Now remove the key and modify the target type to reflect your layout control as shown below.

Now, lets get back to our LayoutContentControl class and assign the the style to our control.

    public class LayoutContentControl : ContentControl
    {
        public LayoutContentControl()
        {
            this.DefaultStyleKey = typeof(LayoutContentControl);
        }
    }

As stated before, I will be creating 5 sections to my layoutContentControl. So basically, five dependency property needs to be created for this class

So we have to have five content presenter in our style.

and in the class…

LayoutContentControl.cs

public class LayoutContentControl : ContentControl
    {
        public LayoutContentControl() : base()
        {
            this.DefaultStyleKey = typeof(LayoutContentControl);
        }

public static readonly DependencyProperty HeaderProperty = DependencyProperty
.Register(“Header”, typeof(UIElement), typeof(LayoutContentControl), null);

public static readonly DependencyProperty LeftBodyProperty = DependencyProperty
.Register(“LeftBody”, typeof(UIElement), typeof(LayoutContentControl), null);

public static readonly DependencyProperty CenterBodyProperty = DependencyProperty
.Register(“CenterBody”, typeof(UIElement), typeof(LayoutContentControl), null);

public static readonly DependencyProperty RightBodyProperty = DependencyProperty
.Register(“RightBody”, typeof(UIElement), typeof(LayoutContentControl), null);

public static readonly DependencyProperty FooterProperty = DependencyProperty
.Register(“Footer”, typeof(UIElement), typeof(LayoutContentControl), null);

        public UIElement Header
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.HeaderProperty); }
            set { this.SetValue(LayoutContentControl.HeaderProperty, value); }
        }

        public UIElement LeftBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.LeftBodyProperty); }
            set { this.SetValue(LayoutContentControl.LeftBodyProperty, value); }
        }

        public UIElement RightBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.RightBodyProperty); }
            set { this.SetValue(LayoutContentControl.RightBodyProperty, value); }
        }

        public UIElement CenterBody
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.CenterBodyProperty); }
            set { this.SetValue(LayoutContentControl.CenterBodyProperty, value); }
        }

        public UIElement Footer
        {
            get { return (UIElement)this.GetValue(LayoutContentControl.FooterProperty); }
            set { this.SetValue(LayoutContentControl.FooterProperty, value); }
        }
    }

Well, we have finished creating our own layout, now lets apply it .xaml

MainPage.xaml

and here is the output

Now, make it more like a site template by adding and customizing the content as shown in demo.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: custom content control, silverlight content control

84. Create custom draggable Cursor like Acrobat in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 22 Aug 2010 07:30:55 +0000

I recently had fun with xaml cursor in blend. Anyway in this entry, I will try to show you how you can apply your own set of image cursor to your Silverlight project. For demonstration purpose, I will use the drag/hold icon of acrobat reader to make this entry a bit exciting. In acrobat, it shows two icons. One would be “Hand” and the other would be when you press (hold) the page.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Well, I am going to create exactly something like that. So lets start, first going to blend and create a draggable surface. This can be done now very easily using behavior. Lets look at our initial code.

                    amet, consectetur ais….continues”/>

The above code generates the below output. Ok, now go to behaviour section in blend and add a drag behaviour to your canvas. We are finished making our whole object draggable.

Now come the actual part, creating cursor. For now, I will use some picture instead of blend cursor to save time . The idea at the moment is very simple. I will drag a picture at the same place where my cursor is. To do this, we can use the mouse move event to our advantage as shown below.

            InitializeComponent();
            myPage.MouseMove += (s, e) => {

                Point pt = e.GetPosition(null);
                customIcon.SetValue(Canvas.LeftProperty, pt.X);
                customIcon.SetValue(Canvas.TopProperty, pt.Y);
            };

Now, the only thing left is to set the image. When the mouse enter, we want to show the “hand” icon and when the drag starts we want to show the hold icon as shown below.

This can be easily be achieved by adding a mouse enter and press event.

            myPage.MouseEnter += (s, e) => {
                ShowCursor(“cursor_hand.png”);
            };
            myPage.MouseLeave += (s, e) => {
                ShowCursor(string.Empty);
            };
        public void ShowCursor(string imageName)
        {
            customIcon.Source = new BitmapImage(
                new Uri(“Images/Cusors/” + imageName,
                    UriKind.Relative)
                );
        }

So in the above code, the moment I am moving my cursor enter on the canvas. I am setting it default hand image and when the mouse leave the canvas remove the image. Theoretically, this should work. Now to switch between drag icon and hold icon. This could easily be done here by making changes on mouse left press event as shown below.

            myPage.MouseLeftButtonDown += (s, e) => {

                isPressed = true;
                ShowCursor(“cursor_drag_hand.png”);
            };

PageLayout.MouseLeftButtonUp += (s, e) => {

                isPressed = false;
                ShowCursor(“cursor_hand.png”);
            };

Now the last criteria is this, the user will be moving the whole object while pressing the canvas. So we have to show the drag mouse icon as long as it is being dragged.

            myPage.MouseMove += (s, e) => {

                Point pt = e.GetPosition(null);
                customIcon.SetValue(Canvas.LeftProperty, pt.X);
                customIcon.SetValue(Canvas.TopProperty, pt.Y);

                if (isPressed)
                    ShowCursor(“cursor_drag_hand.png”);
                else
                    ShowCursor(“cursor_hand.png”);
            };

Now, once I run the page two bugs happens. One there is the default cursor and my custom cursor appears not in the correct position. The first can be fixed very easily. Set the grid and canvas cursor to none.

and the last part is that we want to move the cursor relative to the canvas not to the Grid layout..duh!!. So make modification here

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: custom cursor silverlight, silverlight custom cursor

83. Dynamic Left Click Context Menu in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 15 Aug 2010 09:19:07 +0000

The content used is for demonstration purpose. The idea is simple. Normally we handle context menu for right click event. In this entry, I will use context menu for left click event. So as it is a left click menu, then we can say that the user is actually clicking on something.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

Lets create a simple HyperlinkButton and add a context menu.

        CoolMail

Now fill up the our context menu with some data.

myContextMenu.ItemsSource = new string[] { “Inbox”, “Calendar”, “Contacts”, “Send e-mail” };

So when the mouse over, I will show the menu and when we leave the context menu, it will hide it self. So the modified code is…

MainPage.xaml.cs

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            myContextMenu.ItemsSource = new string[] { “Inbox”, “Calendar”, “Contacts”, “Send e-mail” };
            myContextMenu.MouseLeave += new MouseEventHandler(myContextMenu_MouseLeave);
        }

        void myContextMenu_MouseLeave(object sender, MouseEventArgs e)
        {
            myContextMenu.Visibility = Visibility.Collapsed;
        }

        private void HyperlinkButton_MouseEnter(object sender, MouseEventArgs e)
        {
            myContextMenu.Visibility = Visibility.Visible;
        }
    }

Now this is a bit of a problem, as with dynamic menu item we happen to have no handler. In other words we have to add handlers at runtime using VisualTreeHelper. Lets add a size change handler and find our menu items.

myContextMenu.SizeChanged += new SizeChangedEventHandler(myContextMenu_SizeChanged);

I will use Amyo’s visual tree helper to find all the menu items

List allMenuItem = GenericVisualTreeHelper.GetAllChildFrameworkElement(myContextMenu)
.Where(w => w.GetType().Equals(typeof(MenuItem))).Cast().ToList();

So we got the whole menu collection. Now lets add handler.

        void myContextMenu_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            List allMenuItem = GenericVisualTreeHelper.GetAllChildFrameworkElement(myContextMenu)
                .Where(w => w.GetType().Equals(typeof(MenuItem)))
                .Cast().ToList();

            if (allMenuItem.Count() > 0)
            {
                if (!eventAdded)
                {
                    eventAdded = true;
                    foreach (var item in allMenuItem)
                    {
                        MenuItem menuItem = (item as MenuItem);
                        if (menuItem != null)
                        {
                            menuItem.Click += new RoutedEventHandler(menuItem_Click);
                            menuItem.MouseEnter += new MouseEventHandler(menuItem_MouseEnter);
                            menuItem.MouseLeave += new MouseEventHandler(menuItem_MouseLeave);
                        }
                    }
                }
            }
        }

In the above code, I am adding click handler for each menu items and in the below code adding some code to execute on each handler.

        void menuItem_MouseLeave(object sender, MouseEventArgs e)
        {
            MenuItem menuItem = (sender as MenuItem);
            menuItem.Icon = null;
        }

        void menuItem_MouseEnter(object sender, MouseEventArgs e)
        {
            MenuItem menuItem = (sender as MenuItem);
            Image icon = new Image();
            icon.Width = 16;
            icon.Source = new BitmapImage(new Uri(“Images/menuOver.png”, UriKind.Relative));
            menuItem.Icon = icon;
        }

        void menuItem_Click(object sender, RoutedEventArgs e)
        {
            MenuItem menuItem = (sender as MenuItem);
            MessageBox.Show(“You just clicked ” + menuItem.Header);
        }

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: left click context menu, silverlight menu

82. Add DIV content over Silverlight Application

Sharker Khaleed Mahmud | shamrat231 — Thu, 12 Aug 2010 08:07:26 +0000

In this entry, I will show you how to add html content over Silverlight application. For demonstration purpose, I will reuse Mike Snow localization sample.

So basically, if you change the culture at param tag, the Silverlight culture changes. Now lets add some flag in our .aspx page for both culture.

Default.aspx

        ImageButton ID=”imgbtnen” ImageUrl=”Images/en.png” runat=”server”
            Height=”16″ onclick=”imgbtnen_Click” />
        ImageButton ID=”imgbtnfr” ImageUrl=”Images/fr.png” runat=”server”
            Height=”16″ onclick=”imgbtnfr_Click”/>

In here, I just added some flag in our .aspx page and on button click handler. I will modify the value of the param from .aspx.cs code behind as shown below

Now on code level

Default.aspx.cs

    public partial class _default : System.Web.UI.Page
    {
        protected void imgbtnen_Click(object sender, ImageClickEventArgs e)
        {
            slculture.Attributes.Remove(“value”);
            slculture.Attributes.Add(“value”, “en-us”);
        }

        protected void imgbtnfr_Click(object sender, ImageClickEventArgs e)
        {
            slculture.Attributes.Remove(“value”);
            slculture.Attributes.Add(“value”, “fr-ca”);
        }
    }

Now, lets run the application.

Now as the title of the entry suggested, I will put the div section over my Silverlight application. Now, lets set our div to absolute position and make the Silverlight content relative.

Now if you run the application, our Silverlight app will hide the whole div section. Basically this happens because we have not yet set our sl app to windowless true. So change the param tag to

and here is the output

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: div silverlight, silverlight localization

81. Deeply nested Path Binding using ItemsControl in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 08 Aug 2010 09:30:42 +0000

The idea is very simple. Lets say you received a lots of data from your BLL and the object that is returned to you is not…say simple format. By simple format, I mean that it is not easily bindable to the datagrid but most of the value that you need is nested deeper than the first layer of that object.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

In other words the object returned in not as simple as for say…

eg. Person class
        public class Person
        {
            public int Id { get; set; }
            public string Title { get; set; }
        }

So now you can do two things to the returned object.
1. Iterate at every level and create a collection like Person class that can easily bindable to DataGrid or…
2. Bind the object as it has been returned to Datagrid and display the information that you required in DataGrid by implementing deep nested path binding

In this entry, I will show you how to achieve the second option without doing any kind of data manipulation from managed code to get the desired output. So for now lets start by building a scenario and then work on it to create a object. Suppose a survey has been done for ABC company on their customer and asked about what type of products they have at their home. So basically the survey is being done for say three kinds of product, Wood, Steel and Plastic (took three eg. from top of my head . So lets create a simple data structure.

Data.cs

public class Data
    {
        public int CustomerId { get; set; }
        public object Wood { get; set; }
        public object Steel { get; set; }
        public object Plastic { get; set; }
    }

Ok, now say on the survey , customer gave some response say wooden spoon, pencil when asked about materials they have used related to wood. At the moment, I have a public object Wood { get; set; }. So from the customer answer, I can say that, that their could be multiple response to a particular category. So lets create a object say WoodType having a List for multiple responses.

    public class WoodType
    {
        public List Items { get; set; }
    }

Where say for each item I am keeping record of the title and pulling an image related to the product.

    public class Item
    {
        public string Title { get; set; }
        public BitmapImage Img { get; set; }
    }

Now, the changed data structure of the class would be

    public class Data
    {
        public int CustomerId { get; set; }
        public WoodType Wood { get; set; }
        public SteelType Steel { get; set; }
        public PlasticType Plastic { get; set; }
    }

Notice, that I am actually creating a complicated object for demonstration purpose. In reality, the data structure could differ in many variations. Ok, so we are done with a simple data structure where the title is not in first layer of the object. Now I will add some feedback data and create a collection, something like this
List entries = new List();
entries.Add(..)

Anyway, look at the class below.

    public class FeedBackData
    {
        public static System.Collections.IEnumerable GetCustomerFeedBack()
        {
            List entries = new List();

            //demonstration purpose…ideally it should follow MVVM structure
            //Customer 1
            entries.Add(new Data
            {
                CustomerId = 1,
                Wood = new WoodType
                {
                    Items = new List {
                    new Item { Title = “Pencil” , Img = new BitmapImage(new Uri(“Images/Wood/WoodenPencil.png”,UriKind.Relative)) },
                    new Item { Title = “Wooden Spoon” , Img = new BitmapImage(new Uri(“Images/Wood/WoodenSpoon.png”,UriKind.Relative))}}
                },
                Steel = new SteelType
                {
                    Items = new List {
                    new Item { Title = “Sword”, Img = new BitmapImage(new Uri(“Images/Steel/Sword.jpg”,UriKind.Relative)) },
                    new Item { Title = “Lock”, Img = new BitmapImage(new Uri(“Images/Steel/lock.png”,UriKind.Relative)) },
                    new Item { Title = “Key”, Img = new BitmapImage(new Uri(“Images/Steel/key.png”,UriKind.Relative))}}
                },
                Plastic = new PlasticType
                {
                    Items = new List {
                    new Item { Title = “Plastic Bag”, Img = new BitmapImage(new Uri(“Images/Plastic/plasticBag.png”,UriKind.Relative))},
                }
                }
            });

            //Customer 2
     // reapeat above….
            return entries;
        }
    }

If you look at the above screen shot, you will see that at one level we have CustomerId and at more deeper level we have the Title and an image related to it. So we initially set out to create a complicated object to bind and at this moment we have done it. In other words, the data return is not as simple as a person class.

Now, how do we represent this two sets of data at different level in the object?. For this entry, I am going to show using Datagrid and ItemsControl. Similarly, various other ways can be used to achieve the same output in Silverlight.

We do know that the main Data.cs has a property CustomerId, so this can easily be achieved if we add a DataGridTextColumn, some thing like this

But for the rest, we have to use templateColumn. So lets, break the scenario, at the moment, we are getting a list of customer feedback. Those are the rows. Now we know that for each row, it is returning this

Ok, using the above scenario lets create a sample DataTemplate. In the above DataTemplate, we know that in the grid for each row it will return a list of Items. So add a ItemsControl and set the ItemSource like this.

So, now we now that for each Item in ItemsControl we have a Item having Title and Image. So lets bind the Titel in the ItemTemplate for the ItemsControl. Look at the code below.

So basically this will follow for the rest product type. If we now bind our datagrid to the object, It will return as shown below.

Notice, that if a customer has multiple answers, it will show below, but on the same row. You can change the order by changing the orientation of ItemPanelTemplate.

Well, the hard path is done, Now we need to modify ItemTemplate

The final .xaml is this

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: nested path binding, silverlight datagrid, silverlight datagrid binding

80. Wet Effect in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Mon, 26 Jul 2010 08:56:17 +0000

In this entry, I am going to create a wet effect using Blend in Silverlight. It is more of a trick then a tip. The idea is actually pretty simple. This will be the second effect that I am creating for my effects library. I plan to create some more effects before I put all the effects into a dll for ease of use for others. Many other things will actually follow, but for now lets create a second effect. Try start finding a picture with a wet glass effect in search engines. One example would be the one I am using…which i found in some adobe tutorial blog. The given text here is changeable at code level. Have fun with it.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

The above are some example that are found in search engines. Now we need another picture on which we can reside the wet effect. One such picture that i randomly picked out from the Flickr is shown below.

Now comes the ordering. The one that is added last hides the other one. What is needed here is to put that wet effect on the second picture. So reduce the opacity of the crowd image.

Ok, so basically we are almost done giving a wet effect. Lets add some text eg. Silverlightips.net and make the textblock center in both horizontal and vertical direction. Add some blur effect

MainPage.xaml

      FontWeight=”Bold” TextAlignment=”Center” VerticalAlignment=”Center” HorizontalAlignment=”Center” RenderTransformOrigin=”0.5,0.5″ FontFamily=”Lucida Handwriting” >











  http://silverlightips.net By Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” VerticalAlignment=”Top” HorizontalAlignment=”Center” Height=”30″ IsTabStop=”False” Foreground=”White” />

In the above code, I added some brush image on the text, gave some blur effect and placed the text above both images. Now change the pictures and the text and you can end up having your own wet effect on your text and image.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: silverlight blogs, silverlight blur effects, silverlight effects, silverlight tips

79. Get your Gravatar Image in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Thu, 22 Jul 2010 07:35:02 +0000

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

I recently visited Justin article of Silverlight COM features. If you have not read that article, I definitely recommend to have a look at it. Anyway, at the end of the page, there is a reply section. When you type your email address, it gets your avatar. The whole site is in Silverlight.

In this entry, I will show you, how to do that for your Silverlight application. According to gravatar site, you need to create a MD5 hash. All URLs on Gravatar are based on the use of the hashed value of an email address. Images and profiles are both accessed via the hash of an email, and it is considered the primary way of identifying an identity within the system. To ensure a consistent and accurate hash, the following steps should be taken to create a hash:

1.Trim leading and trailing whitespace from an email address
2.Force all characters to lower-case
3.md5 hash the final string

Great, so basically, if I do the above three steps, I am good to go. You can get your MD5 class here by Reid Borsuk and Jenny Zheng.

Now at code level, all that is required is on button click event to generate an url…something like this

Lets go at code level and use the MD5 class to generate a proper url for the image control.

MainPage.xaml

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += (s, e) => {
                tbEmailAddress.Text = “sample@sample.com“;
            };
        }

private string GetUrl()
{

            //Jeff Wilcox wpf class code….
            StringBuilder sb = new StringBuilder();
            byte[] text = Encoding.UTF8.GetBytes(tbEmailAddress.Text.ToLower().Trim());
            byte[] md5hash = new MD5Managed().ComputeHash(text);

            foreach (byte b in md5hash)
            {
                sb.Append(b.ToString(“X2″));
            }

return sb.ToString();
}

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string url = “http://www.gravatar.com/avatar/” + GetUrl().ToLower() + “.jpg”;
            imgGravatar.Source = new BitmapImage(
                    new Uri(url, UriKind.Absolute));
        }
    }

In the above code, the email address is being converted to MD5 hash and a url is being generated. That url is being assigned to the Image control.

Now, run the .aspx page.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: silverlight gravatar

78. How do I create a simple Image Slider in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Wed, 21 Jul 2010 04:32:02 +0000

I will continue with my previous post next week. In the mean time, I will show you how to create a simple image slider. Basically a slider or tray of image can be used in many different scenarios. One common example would be IMDB slide show. Currently it has post back for every image. Anyway, I am going create a sliding image using deviant art gallery examples for demonstration purpose.

First of all, there are two ways we can integrate sliding behavior. One option would be to animate through Storyboard from Expression Blend. Another one is to do it using managed code from C#. The latter one is a bit trickier, but that is the one I will code for this scenario.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

A basic slide show needs to have a < previous and a next > image. Current version of Silverlight Image control do not support click event. So I will use HyperlinkButton as shown above.

MainPage.xaml

                HyperlinkButton.Content>


                Image….
            StackPanel>





        StackPanel>

Now let’s put some image in the above code. The main idea is that I will try to slide the whole image collection while always showing one image per slide. For this to work, there are two things that need to be done.

First of all, the portion that the user should see from the collection be a canvas with 500 width. So basically, at all times, any image that will be shown from the Stackpanel will be in the canvas control and rest will automatically get cut if it exceeds the clipping. Next thing that I have to do is to add a simple sliding effect here. For this purpose, I will modify translate X coordinates for PanelHost from code level. So the code at xaml becomes like this.

Ok, lets create a sliding storyboard from code behind.

Animation.cs

    public class Animation
    {
public static Storyboard SlideImageEffect(UIElement controlToAnimate, double positionToMove)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.Duration = new Duration(TimeSpan.FromSeconds(1));

            Storyboard sb = new Storyboard();
            sb.Duration = new Duration(TimeSpan.FromSeconds(1));
            sb.Children.Add(da);

            Storyboard.SetTarget(da, controlToAnimate);
            Storyboard.SetTargetProperty(da, new PropertyPath(“(UIElement.RenderTransform).(TranslateTransform.X)”));
            da.To = positionToMove;
            return sb;
        }
    }

Now call this managed code storyboard like this

MainPage.xaml.cs

    public partial class MainPage : UserControl
    {
        int imgSlide = 0;
        int noimgMoved = 1;
        public MainPage()
        {
            InitializeComponent();
        }

        private void Back_Click(object sender, RoutedEventArgs e)
        {
            if (noimgMoved != 1)
            {
                noimgMoved–;
                imgSlide += 600;
                Animation.SlideImageEffect(this.PanelHost, imgSlide).Begin();
            }
        }

        private void Next_Click(object sender, RoutedEventArgs e)
        {
            if (PanelHost.Children.Count != noimgMoved)
            {
                noimgMoved++;
                imgSlide -= 600;
                Animation.SlideImageEffect(this.PanelHost, imgSlide).Begin();
            }
        }
    }

In the above code, I am keeping track of no of image moved and how much translate has been made to the current stackpanel. By default I have set my main view width to 600. So every time it slides, it adds or remove the fixed width from the translate X position.

So the final markup of the MainPage.xaml is like this

MainPage.xaml

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008“
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006“
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”1000″>














        http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” Height=”30″ VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False”/>

I will continue more with this topic in next entry by adding other stuffs before going back to PhotoShop effects library.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: image previous next, image slide, image slider, Photo viewer, picture viewer, Silverlight Image Viewer, slide image

77. Apply Clipping on Photoshop Brush Effects in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Mon, 19 Jul 2010 09:25:04 +0000

In this entry, I tried to create a sparkling smiley. The beauty of this sample is that all you need to do is replace two images. All the hard work has been done in the sample source code and is to be explained below. Replace the two images on the project and you will have your own sets of broken effects applied on those images. If you have read my previous post you will see that I have ended up creating a broken mirror. One basic flaw with that mirror effect is that when a glass breaks, it usually does not show black edges on every crack effect. Now let’s start by changing that.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

To invert the photo negative of an image for expression media

1. Select an image file.

2. On the Window menu, click Image Editor.

3. Click the Invert Photo Negative filter.

4. In the Invert Photo Negative dialog box, click OK to invert the image.

or if you have Adobe Photoshop, just press CTRL+I. Enlarge the crack area. If your look at the mirror image, it has more height than width. So in this case, I will rotate it and clip the background floor.

If you want to change the mirror picture you can replace with different picture. So far, the total code generated is this

MainPage.xaml.cs

  http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” IsTabStop=”False” Foreground=”White” HorizontalAlignment=”Center” Height=”30″ VerticalAlignment=”Top”/>

Now i will try to show Wonderland world inside the crack. The idea of creating crack is explained at earlier post. I will try to show ”Alice in Wonderland” scenary inside the crack. To do that, I will create a path around the area of the crack. This can be done by creating several lines and making them into a simple path or just draw a path with many connecting nodes.

Make sure that you have put your stroke color white when you draw the line on the crack region. So above you can see the output path generated. Now I will add a wonderland picture to the project and clip it using the path.

And you have the output like this. The final output of the code is

MainPage.xaml (modified)

Now, add a suitable image behind your broken effect as shown in the top picture of this blog post. I took that picture from deviantart gallery for demonstration purpose. Then apply the output created so far. Next entry will deal more about creating seperate independent effects library.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: clip silverlight, image clipping silverlight

76. Working with PhotoShop brush effects in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sun, 18 Jul 2010 09:37:27 +0000

In this entry, I will try to explain and show you, how to use Photoshop to your advantage in Silverlight. So starting from today’s entry, next couple of article will be devoted to this subject before I shift my focus to working with Microsoft lab tools in Silverlight. There are lots of free psd available on the internet. So I am going to import one that would be a good example in this scenario. I have taken the mirror picture from deviantart gallery for demonstration purpose.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

There are lots of free psd available on the internet. For this scenario, i am going to use some sample brush effects. The one I am going to use is broken glass available here.

Ok, for now lets download the psd file and open it in Expression Blend 4. First start by creating a simple silverlight project. On the File menu, you will see that there are two options, since the download file is a psd file, I will choose the first choice. Once the file loaded, you will see on your user control section that some files are generated.

These files depend on the number of layers available on Photoshop file. For this case, the total markup generated here is very small.

MainPage.xaml

0L500,0 500,500 0,500z” HorizontalAlignment=”Left” Height=”500″ UseLayoutRounding=”False” VerticalAlignment=”Top” Width=”500″>

So by seeing the markup, you might wonder that the generated output is an image instead of full xaml markup of the design. So lets check the generated output actually works or not. One simple test case would be to change the background color of the main grid or add an image for the background of the grid.

So now modify the generated code to make it more flexible. For example, the background should stretch no matter what type of resolution the computer has.

MainPage.xaml.cs (modified)

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
x:Class=”BrokenGlass.MainPage”
>

        http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” IsTabStop=”False” Foreground=”White” HorizontalAlignment=”Center”/>

So far, I have finished adding the effects in blend and applying it in front of an image. In the next entry, I will continue more with this sample and show how to create controls and other amazing stuffs.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: photoshop silverlight, silverlight import photoshop, silverlight photoshop effects

75. Visual Zooming Datalist using ListBox in Silverlight

Sharker Khaleed Mahmud | shamrat231 — Sat, 10 Jul 2010 10:14:07 +0000

In this entry, I am going to view a collection of data to represent like datalist using ListBox. Afterwards, add some simple interactive behaviours. In this case for the interactive zooming part, I will use Nikhilk’s Silverlight FX behaviours. You can just add your own sets of collection to this sample. This kind of representation seems to be very popular. Populated with images i found on search engine.

If you want to add scrollviewer you have to add it like this.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

MainPage.xaml

                                    BorderBrush=”White” BorderThickness=”4″ CornerRadius=”0.5″
            Cursor=”Hand”
            RenderTransformOrigin=”0.5,0.5″>






                                fxui:HoverEffect>
                            fxui:Interaction.Behaviors>








                                    UseAnimatedLayout=”True” />




        http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” Foreground=”White” VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False”/>

MainPage.xaml.cs

    //System.Windows.Control.Toolkit from Silverlight Toolkit
    //Silverlight FX from Tips.Web\SilverlightFXDLL
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.LogoHost.ItemsSource = CompanyInfo.GetLogoSet();
        }
    }

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Filed under: Silverlight Tagged: silverlight blogs, silverlight datalist, wrap panel, zooming collection, zooming data