Create a new widget from scratch
To build a new widget from scratch you need to do the following steps:1. Create a new Windows Phone Application in Visual Studio
Image may be NSFW.
Clik here to view.
2. Add WidgetLibrary project or dll as reference and modify the default MainPage.xaml to add a Web Browser Control with the following configuration
Image may be NSFW.
Clik here to view.
<Gridx:Name="LayoutRoot"Background="Transparent"><!--ContentPanel - place additional content here--><Gridx:Name="ContentPanel"Grid.Row="1"><!--Widget container--><phone:WebBrowserx:Name="widget"IsScriptEnabled="True"ScriptNotify="webBrowser_ScriptNotify"/></Grid></Grid>
3. Edit the code-behind of MainPage.xaml
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using WidgetLibrary; namespace Widget_Library_Example { publicpartialclass MainPage : PhoneApplicationPage { // A control to know if the execution of the command is OK// 0 = No Manage// 1 = Manage OK// 2 = Manage OK & HistoryBackEnd = trueint manageWidget = 0; // Constructorpublic MainPage() { InitializeComponent(); //We need to prepare the Widget when the app loadsthis.Loaded += new RoutedEventHandler(MainPage_Loaded); } ///<summary>/// Handles the Loaded event of the MainPage control.///</summary>///<param name="sender">The source of the event.</param>///<param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>void MainPage_Loaded(object sender, RoutedEventArgs e) { //Set the start folder of the widget and navigate to the start page widget.Base = "Widget"; widget.Navigate(new Uri("index.html", UriKind.Relative)); } ///<summary>/// Handles the ScriptNotify event of the webBrowser control.///</summary>///<param name="sender">The source of the event.</param>///<param name="e">The <see cref="Microsoft.Phone.Controls.NotifyEventArgs"/> instance containing the event data.</param>void webBrowser_ScriptNotify(object sender, NotifyEventArgs e) { manageWidget = ManageWidget.Manage(e.Value, widget); } ///<summary>/// Called when a page becomes the active page in a frame.///</summary>///<param name="e">An object that contains the event data.</param>protectedoverridevoid OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { //Copy the data to IsolatedStorage Loader.LoadResources(); base.OnNavigatedTo(e); } ///<summary>/// This method is called when the hardware back key is pressed.///</summary>///<param name="e">Set e.Cancel to true to indicate that the request was handled by the application.</param>protectedoverridevoid OnBackKeyPress(System.ComponentModel.CancelEventArgs e) { base.OnBackKeyPress(e); } } }
4. We need to create a new folder called Widget, inside the folder we can put all stuff related with our widget. In the basic example we are going to use some HTML and CSS. For the CSS file we are going to create a directory called Css inside the Widget folder.
Widget/index.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="viewport"content="width=480, user-scalable=no, initial-scale=2.0, minimum-scale=1.0, maximum-scale=1.0"/><linkrel="stylesheet"type="text/css"href="Css/style.css"/><title>My first Widget</title></head><body><h1> My first Widget!</h1></body></html>
Widget/Css/style.css
body { background-color: Black; color:White; }
5. We need to create a xml file with the information about the files that take part of our Widget. You can use the XMLWriter.exe application available. You need to copy the app inside your Widget folder and execute it. After that, a Widget.xml file appears with the info.
<?xmlversion="1.0"encoding="utf-8"?><Widget><File>index.html</File><Css><File>style.css</File></Css></Widget>
6. Run your project in the emulator and you have to see the html file rendered in the screen :)