Search

Håvard Siegel Haukeberg

Paste life: Ctrl+C -> Ctrl+V

Tag

wp7

Coding Without Code for Windows Phone 7 – HubTiles (Live Tiles)

Example of an app made with LiveTiles

Want to make fancy LiveTiles aka HubTiles?

Its really easy, and best of all. No code needed!

First:
You will need the Windows Phone Toolkit. Its here:
http://silverlight.codeplex.com/ and select one of the Download options:

  • Silverlight for Windows Phone Toolkit – Aug 2011.msi

Second:
Install the package

Third:
Connect Expression Blend to the Toolkit!
This is how you do it:

Add a reference to your project by right clicking on references.
then browse here to find the reference you need to add.

path of the windows phone toolkit

Forth:
Add a reference in the MainPage.xaml
Select “code view” – dont be afraid, we are just going to copy paste.
Add this line of code to the start:
xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

The reference you need to add in MainPage.xaml

Fifth:
Now just start adding HubTiles.
You find the HubTiles here

this is where you find the HubTile control
Just double click on a HubTile to add it to a list on e.g. a panoramic app

Sixth and finally:
Now, to add content to the HubTile you have to use the “code view” dont be afraid, its just to add text! look at my sample below. You find the code in the MainPage.xaml

A screen snip of all the code in one set of LiveTiles with and without content.

Want to read more about this cool feature?
http://www.windowsphonegeek.com/articles/Windows-Phone-HubTile-in-depth-Part1-key-concepts-and-API

Coding Without Code for Windows Phone 7 – Using Phone Browser (WebBrowserTask)

The art of making a  Windows Phone App with little or no coding at all.

Index:
Code sample
Step 1 – Find the object you want to click on. You find this object in the “Objects and Timeline”
Step 2 – Select the Item and click the “Event button”
Step 3 – Create touch tap event
Step 4 – Copy/Pasta code

How to navigate from your app into a website using your phone browser.
Here is a picture of what happens in my app:

Step 1 inside the app

uri navigation
Step 2 in the click goes to a website

Mainpage.xaml og mainpage.cs you find here in Expression blend

So, what is going on.

First, for all pro coders here is the what I did:
-dont panic, its just copy pasta, I promise that it is easy

In the mainpage.XAML file:
StackPanel x:Name=”mms” MouseLeftButtonUp=”mms_click”
The StackPanel contains 4 elements, a picture and three text boxes, so when i click on it with it starts an event which i called “mms_click” you can call it anything (e.g. awsomeclickbuttonlol), but remember it for the next step

in the mainpage.xaml.cs file:
private void mms_click(object sender, System.Windows.Input.MouseButtonEventArgs e)
{

WebBrowserTask wb = new WebBrowserTask();
wb.Uri = new Uri(http://www.commaxx.no/aktiviteter/microsoft-management-summit-2012-article1115-114.html”, UriKind.Absolute);
wb.Show();

}

Ok, breathe…
this is how you do it,
Step 1 – Find the object you want to click on. You find this object in the “Objects and Timeline”

This is a list over all forms, figures, textblocks and pictures which you may can click on

Step 2 – Select the Item and click the “Event button”
Now, there are some options where you have to think logically for a moment.
1. Do I want to launch the browser as soon as I tap the box or do I want it to launch?
2. If you choose MouseLeftButtonDown it will start as soon as you put your finger on it, so if you scroll or just rest your finger accidentally it will launch
3. if you choose MouseLeftButtonUp you may rest your finger on the object and even scroll. it will only launch if you tap the object. this is my reccomended option

you find the event button here

you only use MouseLeftButtonDown or MouseLeftButtonDown – so easy!!!

Step 3 – Create touch tap event
Use your prefered name for the event, but remember you can only use this name once. This name will then execute only one designated action.

You may choose between two different types of Clicks, I reccomend MouseLeftButtonUp

Now, dont panic because this will happen automatically after you enter a name.
the file mainpage.cs.xaml will open and display…. CODE…
DO NOT PANIC – its only copy/paste from this aricle that is needed.

Step 4 – Copy/Pasta code
Now you see the green line, replace this line with the code supplied above and just change the url to what you want the target to be.

This code window will open automatically once you entered a name for the event
Relax and just copy pasta these three lines over the green one, no code needed

Then:
1. Save the Project
2. Click Project – Build
3. Click Project – Run

The emulator will open and once its open your app starts loading. Once loaded try clicking on the Object you just created a click event on.

I made this entire object clickable

For more code help, use interwebs and copy pasta.
I used this guy for reference, but did not understand anything untill the two code examples in the end. I did some modification on the code to make it easier in my example.
http://chriskoenig.net/2010/05/16/wp7-part-3-navigation/

Coding Without Code for Windows Phone 7

Learn to Love Blend
i ❤ Blend

Windows Phone 7
Create something!

The art of making a  Windows Phone App with little or no coding at all.

Welcome to this tutorial for those of you that just want to create something fast and easy.
If you have used PowerPoint or shapes/figures in Word, then you are set for this tutorial

Step 1 – Get the tools and Register

Windows Phone SDK, Expression Blend og Visual Studio.
www.create.msdn.com

You have to create an account for Marketplace in order to release your app. The price in Norway is 819NOK.
This process takes some time and require a credit card. Once completed the account validation takes some time aswell.
Start this before you code so there is no snag when you want to release your app

Please note. You must have Expression Blend, without Blend it will be very hard to code without code.
Read more about Expression Blend here:
http://www.microsoft.com/expression/products/blend_overview.aspx

Blog at WordPress.com.

Up ↑

%d bloggers like this: