LightSwitch Extension : Image Button

Home > C#, LightSwitch, LightSwitch Extension > LightSwitch Extension : Image Button

LightSwitch Extension : Image Button

December 4, 2011 powerbala Leave a comment Go to comments

Introduction

This walkthrough will demonstrate how to create A very simple Button Control extension that consists of two controls; helps users to attach PNG image to their buttons. ImageButton – this control will allow you attach just an image to the button. ExtendedImageButton – will also show “Display Name” text and wraps.

Building the Sample

The prerequisites for this sample are:

Description

Step 1 : Create a new Extension Project. Name it, ImageButtonExtension

Step 2 : Right click on LSPKG project and add a new Control Item. Name it : ImageButton.xaml

Step 3 : Open ImageButton.lsml file from COMMON project and modify it as below.

<!--?xml version="1.0" encoding="utf-8" ?-->

    <!-- This override will show Image property in designer -->

Step 4 : Open ImageButton.xaml file from CLIENT project and edit as below.

Step 5 : Open corresponding CS file of the control and modify the class as below

    public partial class ImageButton : UserControl
    {
        public ImageButton()
        {
            InitializeComponent();
        }

        private void imgImage_Loaded(object sender, RoutedEventArgs e)
        {
            IContentItem contentItem = (IContentItem)DataContext;
            imgImage.Source = Microsoft.LightSwitch.Presentation.Framework.Helpers.ImagePropertyHelper.GetImageSource(contentItem);
        }

        private void btnImageButton_Click(object sender, RoutedEventArgs e)
        {
            IContentItem contentItem = (IContentItem)this.DataContext;
            Microsoft.LightSwitch.IExecutable executable = (Microsoft.LightSwitch.IExecutable)contentItem.Details;
            if (executable != null && executable.CanExecuteAsync)
                executable.ExecuteAsync();
        }

    }

At this point, we have a button control that can take an image and displays. Now to extend this control with more functionalities, such as Image + Text + Text Wrap we follow steps 2-5, by adding another control named “ExtendedImageButton“.

More Information

Following websites and blog posts might help you to understand better than what I tried above.

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/62/How-To-Create-a-LightSwitch-Command-Control-Extension-A-Button.aspx

http://msdn.microsoft.com/en-us/library/ee256689.aspx

Disclaimer

The opinions expressed here are MY OWN and are not necessarily those of my employer, partners, customers, friends, or family. ALL content presented AS-IS, for entertainment/educational purposes only with ABSOLUTELY NO WARRANTY expressed or implied.

Source code

CODE : http://code.msdn.microsoft.com/LightSwitch-Image-Button-f9dda668

CONTROL : http://visualstudiogallery.msdn.microsoft.com/5b064b35-cdf5-46aa-909f-fa43ad98b512