This project is read-only.

how to make an application widget

Topics: New Widget
Dec 7, 2011 at 6:37 AM
Edited Dec 7, 2011 at 6:51 AM

In this tutorial you will be shown how to make a widget that launches an application,

What you will need:
*Visual Studio 2010
that is pretty much it, lets begin

1. Download this template i have edited off the original one
Download HERE, Then copy the .zip file into My Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\
Dont Extract The Archive (.zip)
Image HERE 

2. Launch Visual Studio 2010
Press Shift + Ctrl + N
On The Left Select Visual C# if it is not there expand Other Languages and select Visual C#
Scroll down in the middle until you can see ApplicationStart, click on that now in name Type the name of your widget without Spaces
and change the location to My Documents\Mosaic
this makes it easier to locate the widget
Image HERE
Then click OK,

3.Now you have to add Mosaic.Base.dll reference. Right-click on the References folder in the Solution Explorer and choose Add reference. Go to the Browse tab and specify Mosaic.Base.dll from Mosaic folder.

Image HERE

Note: (You will have to add Mosaic.Base.dll every time you reopen Visual Studio 2010 but after you browse for Mosaic.Base.dll instead of clicking on the Browse tab click on the Recent Tab and then double click on Mosaic.Base.dll)


4. Now its time to get your image into the widget, go into the internet and get a image make sure its a PNG and is 256x256, the easiest way to get an image is in google go into Images and type, Application followed by 256x256, eg. Google Chrome 256x256, then save the image to your desktop and rename it to "Image" Drag and drop the file into the resources folder in the solution explorer
Image HERE

5. Double Click WidgetControl.xaml and a widget with your image should show something similar to THIS with the exception of a different image :) now its time to change the background colour go HERE and click on the colour you want your widget to be, then scroll down a bit and you will find the colour you clicked on and some letters and numbers like #FE2E2E copy the whole lot including the # and go back to visual studio replace THIS with your copied one and it will change the background colour.

6. To change the text click on "Widget Name" just below your image file and on the right change "Widget Name" to what ever you want
Image HERE then press CTRL + S to save this

7. You are more then 1/2 way through to test if everything is going to work correctly so far press F6 it should build the widget, it no errors come up everything is working 100% so far. if an error had appeared press F6 again if the error accrued again please close Visual Studio 2010 and start again, if no errors appeared which they shouldn't because i am doing this as well then proceed to step 8

8. Now its time to tell the widget what to open when i click on it, this is a simple process that can be stuffed up very easily, all the steps are shown in this image HERE then press CTRL + S to save this once saved press F6 and it will compile and save is no error is shown, :) all done creating the widget

9. I had called my project GoogleChrome so i would Go to My Documents\Mosaic\GoogleChrome\GoogleChrome\bin\debug    rename the folder widget1 to the name of your widget eg. "widget1" -> "GoogleChrome" copy that folder and paste it into your Mosaic\Widgets folder and you are done, go into mosaic and add your widget.

Credits To Stealth for Mosaic and the Template for Visual Studio 2010
F34R_0793 for the tutorial

If you have any problems please comment below and be patient for a reply, you can also request a widget to be made and I or someone else will be happy to make it for you

Dec 7, 2011 at 6:02 PM

Its a fantastic tutorial! Never saw such a good explanation for a long time, grats!
But i have the problem with the error. I know that it's something with .dll and i have to make it up as StartUp Project, but this doesn't solve the problem, any ideas? 

Dec 8, 2011 at 3:48 AM
Edited Dec 8, 2011 at 4:03 AM

Single LEFT Click on              "Solution 'Widgetname'  (1 Project)"             then press Alt+Enter a window should appear, now on the left click on Startup Project, then in the middle click on the circle beside single startup project then in the drop down menu select you 'Widgetname' then click Apply then OK if it happens again please compress your project and send it to me my email is "F34R_0793@LIVE.COM.AU" and thanks for the compliment on the tutorial i didn't want to over do it and make it seem complicated :) and this is my first tutorial i have ever written.

Dec 8, 2011 at 7:47 AM

So gratulation to your first tutorial! :)
To my problem: I was already selected "Singe Startup Project". I have also no errors in the script. I think i have to start a "normal" program maybe, debug this and then it will works, maybe... 

Dec 8, 2011 at 8:38 AM

try placing the mosaic folder (the one will mosaic.base.dll) in a more permanent place like C:\Program Files\Mosaic then add mosaic.base.dll as a reference, because i compiled it with my mosaic.base.dll and it run 100% if you want i can remake the widget and send it to you to test in ur visual studio

Dec 8, 2011 at 8:51 AM

hmpf, i dont know why it doesn't work. I placed it in  C:\Program Files\, same error. I'm so sorry about. Maybe my mosaic.base.dll is wrong or something like that? I use the Mosaic 301 Beta Refresh.

Dec 8, 2011 at 8:57 AM

what size is ur mosiac.base.dl in bytes?

Dec 8, 2011 at 9:02 AM

its 76 KB

Dec 8, 2011 at 1:05 PM

same as mine.............. try re-make one again and if u run into the same problem tell me, and because u are making a widget for google chrome you dont need to type in the full path like "C:\users.......... ect" just type "chrome.exe" it will work the same,  if its an installed application most of the time you can just type the .exe file name and it will work

Dec 8, 2011 at 5:30 PM

Ah thats a good advice with the path... :)
I remake a lot of ones, but always got same error. 

Dec 10, 2011 at 9:02 AM
Edited Dec 10, 2011 at 9:41 AM

Okey i have the solution for the problem! :D
1. Right click on the project (not solution) and click on Properties.

2. Click on the Debug tab.

3. Chose Start external program and search your Mosaic.exe.

4. Debug your Program and continue with step 9.

Do you have also done this F34R0793?

Edit: The Chrome-App is working fine. Now I did one with Skype. The problem is that i got always an error. Is that because my Skype was already open? So i think it would be nice if we can program there an "if program is open, then just show/open it, if program is not open, start it."

Dec 11, 2011 at 10:17 AM

no i have not needed to do that.. i can add it into tutorial if you would like,

and the

and the if program is open, show, and if not then open program, that may be possible, let me look :)