WindowsPhoneGeek Tips & Tricks

Implementing Confirm on exit in Windows Phone

2012-05-09T11:33:46.0000000+03:00

In this post I will show how to create a simple function for ask confirm on exit application.

Step 1. You need to create a function for clear navigation history:

private void ClearBackEntries()
{
    while (NavigationService.BackStack != null & NavigationService.BackStack.Count() > 0)
        NavigationService.RemoveBackEntry();
}

NOTE: in Markeplace there are many applications with an annoying problem when you try exit from main page: you have to navigate all visited pages. With this function you can solve the problem.

Step 2. You need to manage the phone BackKeyPress event in your MainPage.xaml

private void PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
{
    // TO DO
}

Step 3. Insert a MessageBox dialog and use stop back event when the user don't want exit the application

if (MessageBox.Show("Are you sure?", "Exit?", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
this.ClearBackEntries();
   else
e.Cancel = true;

Here is the full source code

ConfirmOnExit.zip

The missing [NeutralResourceLanguage] attribute error in Windows Phone marketplace

2012-03-26T22:11:08.0000000+03:00

by Senthil Kumar

When submitting one of my Apps (Number Converter for Windows Phone) to the Windows Phone Marketplace, I got this error when uploading my .XAP file

The [NeutralResourceLanguage] attribute is missing on the entry assembly.

When searched for this error in Google, I found out that the cause of the error is the wrong NeutralResourceLanguage set in the Windows Phone Project.

The NeutralResourceLanguage was set to "None" and this caused the error.

To resolve the error, one needs to set the NeutralResourceLanguage to English.

Windows Phone 7 Text Style Picker Control

2012-03-16T15:59:58.0000000+02:00

by KHK

It looks like the off-the-shelf WP7 SDK, the Silverlight SDK, and even the Coding4Fun suite lack one very basic piece of functionality that you may want to provide your WP7 app users with: selecting the font style (family, bold, italic), color and size.

Since I needed something like that myself, I thought: why won't I just pack it and share with the fellow developers? ;-)

So, here it is: http://wp7textstylepicker.codeplex.com/

Documentation, source code and sample app illustrating the usage of the control are available at the CodePlex page.

Any feedback (feature requests, constructive critics, or unconcealed flattery), as well as rating the control and spreading the word, will be sincerely appreciated! :-)

Windows Phone App Development for Beginners #7 TextBlock control

2012-03-16T13:55:02.0000000+02:00

by WindowsPhoneGeek

This is the 7th post from the "Windows Phone Application Development for Beginners" series of articles in which I use a more informal approach in order to explain everything you need to know in order to get started developing Windows Phone applications in a simple and easy to understand way.

Windows Phone App Development for Beginners #1: Intro
Windows Phone App Development for Beginners #2 Installing the Tools
Windows Phone App Development for Beginners #3 Getting Help
Windows Phone App Development for Beginners #4 First Visual Studio project
Windows Phone App Development for Beginners #5 Basic XAML
Windows Phone App Development for Beginners #6 Layout
Windows Phone App Development for Beginners #7 TextBlock control

NOTE: If you are a professional Windows Phone Developer you should probably stop reading now - this series is for absolute beginners.

In short to create Windows Phone application User Interface in addition to layout panels you use controls as well, such as buttons,checkboxes, shapes, text, and other content presented on the screen. Every Control element is reusable and can be customized by setting different value to its properties (For reference take a look at Windows Phone App Development for Beginners #5 Basic XAML ).

TextBlock Control

TextBlock is a control that usually is used for displaying small amounts of text.

Step1. To start using the TextBlock, go to the Toolbox window and drag a TextBlock element into the design surface.

NOTE: The "Toolbox" tab should be on the right side in your Visual studio project. If for some reason you can not find it, then you can go to the Visual Studio menu and select View->Toolbox as shown below.

Step2. If you want to see the generated XAML code then just go to XAML view as shown below:

Step3. Right click the button element in the design surface and select "Properties" from the context menu. The "Properties" panel will open from where you can change different settings of your button:

Step4. Here is how the TextBlock control looks like on a Emulator or real device:

Step5. Key properties that you may need to use when developing your app:

Text : via this property you set the displayed text
TextWrapping : via this property you set whether or not the text to be wrapped (Wrap or NoWrap). By default the text is not wrapped.
Foreground
Background

NOTE: You can set different properties values either via the visual designer using the properties window, or directly typing into the XAML/C# code.

NOTE: For more information you can also take a look at the official MSDN Documentation: TextBlock

That's it for now.

I hope the post was helpful.

Implement Sharing to Facebook, Twitter in Windows Phone

2012-03-01T10:20:42.0000000+02:00

by Kate Brown

In this quick tip I will demonstrate how easy it is to implement Twitter and Facebook sharing when developing for Windows Phone. In fact many people think that it is hard and time consuming implementation but there is a pretty fast and simple alternative using the new aditional launchers that came with Windows Phone Mango.

So the easiest way to add Twitter and Facebook share buttons is to use the ShareLinkTask class. This class allows your Windows Phone application to launch a dialog that enables the user to share a link on the social networks (of their choice). All you need to do is to use the following code:

ShareLinkTask shareLinkTask = new ShareLinkTask();
shareLinkTask.Title = "Article Title";
shareLinkTask.LinkUri = new Uri("http://www.microsoft.com", UriKind.Absolute);
shareLinkTask.Message = "Some Message to be shared"; 
shareLinkTask.Show();

As it is written in the MSDN documentation:

LinkUri: Gets or sets the link URI that will be displayed in the link sharing dialog.
Message: Gets or sets the message that will accompany the link when it is shared.
Title: Gets or sets the title of the link to be shared.

NOTE: You will also have to include the following namespace using Microsoft.Phone.Tasks;

Example:

Lets create a new Windows Phone application project, create a new Image folder with appbar folder inside and add there two images: one for icon for Facebook, another for Twitter and one more that I will use for sending mail. (If you do not know from where to get metro free icons check the WindowsPhoneGeek`s Dev Gude UX section I fund there some really cool stuff) .

NOTE: The build action of the images have to be set to Content(more about the different Build Actions here):

Next add the following buttons into the application bar:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar/email.png" x:Name="email" Click="email_Click" Text="Send Email"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar/fb.png" x:Name="fb" Click="fb_Click" Text="Facebook"/>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar/twitter.png" x:Name="twitter" Click="twitter_Click" Text="Twitter"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

And finally add the following code inside the ApplicationBar buttons click handlers:

private void email_Click(object sender, EventArgs e)
{        
    EmailComposeTask task = new EmailComposeTask();
    task.Subject = this.PageTitle.Text;
    task.Body = "Sample mail message!";
    task.Show();
}

private void fb_Click(object sender, EventArgs e)
{
    ShareLinkTask shareLinkTask = new ShareLinkTask();
    shareLinkTask.LinkUri = new Uri( "http://www.windowsphonegeek.com", UriKind.Absolute);
    shareLinkTask.Message = "Sample Facebook message!";
    shareLinkTask.Show();
}

private void twitter_Click(object sender, EventArgs e)
{
    ShareLinkTask shareLinkTask = new ShareLinkTask();
    shareLinkTask.LinkUri = new Uri("http://www.windowsphonegeek.com", UriKind.Absolute);
    shareLinkTask.Message = "Sample Twitter message!";
    shareLinkTask.Show();
}

Alternatively you can use a single social network icon, and users will select from the dialog the type of the social network that they want to use.

That's it, build and run. Note that you have to test on a real device! Grab the source form here:

SocialNetworksWP7.zip

Windows Phone Data Binding between Elements using the Designer

2012-02-17T12:01:03.0000000+02:00

by Waleed Arafa Al-Zoghby

In this article I'm going to talk about "Data Binding" between elements. I will use "Slider" & "TextBox" elements to clarify the idea.

Suppose that you have 2 elements a slider and a TextBox; and you want to bind the value of slider to the text property of textbox element so you will have a binding source: "Slider" and Binding target: "TextBox" .... it's easy....! Add an event handler "ValueChanged" of slider element and write one line of code like ' TextBox1.Text = Slider1.Value.ToString(); '... it's a traditional method to bind! But I want to demonstrate a feature supported by Silverlight for Windows Phone without adding an event handler.

We will create a new Windows Phone application and drag & drop a slider and TextBox elements on the current page like on the screenshot below. Next, select the TextBox and then "Apply Data Binding." from the Properties Window:

Next, select "Slider" as a binding source from the popup window:

After that select the property of the binding source(in our case "Value") and the type of the binding:

If you select "one-way" ... when you change the value of the slider, the textbox value will be changed. Otherwise, if you select "two-way" ... when you change the value of any element the other one will be affected as well.

Note: take a look at the binding of the Text property of the textbox element

 <TextBox Height="72" HorizontalAlignment="Left" Margin="146,463,0,0" Name="textBox1" VerticalAlignment="Top" Width="156" TextAlignment="Center" Text="{Binding Path=Value, Mode=TwoWay, ElementName=slider1}" />

Solution attached.

DataBindingTest.rar

Windows Phone App Development for Beginners #6 Layout

2012-02-09T10:53:24.0000000+02:00

by WindowsPhoneGeek

This is the 6th post from the "Windows Phone Application Development for Beginners" series of articles in which I use a more informal approach in order to explain everything you need to know in order to get started developing Windows Phone applications in a simple and easy to understand way.

Windows Phone App Development for Beginners #1: Intro
Windows Phone App Development for Beginners #2 Installing the Tools
Windows Phone App Development for Beginners #3 Getting Help
Windows Phone App Development for Beginners #4 First Visual Studio project
Windows Phone App Development for Beginners #5 Basic XAML
Windows Phone App Development for Beginners #6 Layout

NOTE: If you are a professional Windows Phone Developer you should probably stop reading now - this series is for absolute beginners.

In short you use different Panels to define the layout of your Windows Phone application. The term layout describes the process of sizing and positioning objects in your app. To position UI elements such as buttons,checkboxes, shapes, text, and other content presented on the screen, you must put them in a Panel (or other container object).

NOTE: I will start using the terms "UI element" or "Object" in order to describe elements such as buttons,checkboxes, shapes, text, and other content presented on the screen.

To allow for complex layouts, Silverlight for Windows Phone currently implements panel elements such as Canvas, StackPanel, and Grid discussed below.

Canvas

Canvas defines an area within which you can explicitly position child objects by specifying x and y coordinates in pixels. The x and y coordinates are often specified by using the Canvas.Left and Canvas.Top that determine the position of the child(inside) element like for example:

<Canvas Width="400" Height="400" Background="Green">
    <TextBlock Text="Text" Canvas.Left="100" Canvas.Top="100"/>
</Canvas>

For reference take a look at the MSDN documentation.

StackPanel

StackPanel arranges child elements into a single line that can be oriented either horizontally or vertically. You can change its orientation via its Orientation property. By default if you do not change anything the orientation is set to vertical:

<StackPanel Background="Red">
    <TextBlock Text="Text1"/>
    <TextBlock Text="Text2"/>
    <Button Content="Button1"/>
    <Button Content="Button2"/>
</StackPanel>

NOTE: You can also use <StackPanel Background="Red" Orientation="Vertical"> </StackPanel >

You can set the StackPanel to horizontal orientation using Orientation="Horizontal":

<StackPanel Background="Red" Orientation="Horizontal">
    <TextBlock Text="Text1"/>
    <TextBlock Text="Text2"/>
    <Button Content="Button1"/>
    <Button Content="Button2"/>
</StackPanel>

For reference take a look at the MSDN documentation.

Grid

Grid defines a table layout consisting of columns and rows. By default, a Grid contains one row and one column. To define multiple rows and columns use the ColumnDefinitions and RowDefinitions collections. You can specify the size of the particular rows/columns via RowDefinition and ColumnDefinition objects. You can position objects in specific cells of the Grid by using the Grid.Column and Grid.Row attached properties.

NOTE:

"*" sizing distributes remaining available space proportionally.
"Auto" sizing distributes space evenly based on the size of the content that is within a column or row.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Text1" Grid.Row="0" Grid.Column="0"/>
    <TextBlock Text="Text2" Grid.Row="0" Grid.Column="1"/>
    <Button Content="Button1" Grid.Row="0" Grid.Column="2"/>
    <Button Content="Button2" Grid.Row="1" Grid.Column="0"/>
    <TextBlock Text="Text3" Grid.Row="1" Grid.Column="2"/>
    <Button Content="Button3" Grid.Row="2" Grid.Column="1"/>
</Grid>

You can also use the Visual Studio Toolbox to define your Grid layout as described in the previous post:

For reference take a look at the MSDN documentation.

That's it for now.

I hope the post was helpful.

How to add Tilt Effect to the Windows Phone MultiselectList control

2012-01-27T15:00:14.0000000+02:00

by WindowsPhoneGeek

In this quick tip I am going to talk about how to add TiltEffect to the MultilistSelect control(which is part from the Windows Phone Toolkit).

For more information of how to get started using MultiselectList control take a look at:

I will also use the source code from this previously posted article: How to get the Tapped Item in a MultiselectList control

How to add Tilt Effect to MultiselectList?

Usually, the only thing that you have to do in order to use the TiltEffect is to set toolkit:TiltEffect.IsTiltEnabled="True" like in the snippet bellow:

<toolkit:MultiselectList x:Name="multiselectList" toolkit:TiltEffect.IsTiltEnabled="True">
    <toolkit:MultiselectList.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" />
                <TextBlock Text="{Binding SubTitle}" Style="{StaticResource PhoneTextSmallStyle}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>

Where "toolkit" is the following namespace:

<phone:PhoneApplicationPage 
..
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

However, for the MultiselectList this is not enough, since the MultiselectItem is not in the TiltableItems list by default. This can be fixed quickly as shown in the snippet bellow:

public MainPage()
{
    InitializeComponent();

    // enable tilt effect for multiselect items
    TiltEffect.TiltableItems.Add(typeof(MultiselectItem));

   ///...
}

NOTE: You will also have to include the following namespace:

using Microsoft.Phone.Controls;

Here is the source code:

MultiselectListTiltEffect

Hope the tip was helpful.

PROTECT YOUR Windows Phone APP AGAINST (casual) PIRACY

2012-01-23T13:48:36.0000000+02:00

by Lorenzin David

As you already know, a pirated xap of your app was probably uploaded to p2p networks after 1 day from publication, and is now illegally used by lots of people.

In the meantime MS will introduce the server-side-encryption (hopefully soon), hacking a xap is so simple that it is done by automated web applications.

Anyway, you can now turn piracy to your advantage! With this code, you can detect if your app was hacked using the "automated" method, and if so just open the Marketplace pointing to your "real" app.

Basically, an hacked xap is identical as your original xap, lacking a file called WMAppPRHeader.xml (the DRM file), so the phone considers it as a homebrew one and runs it as "full" on unlocked devices.

Just add this code when your app starts and you will be safe for 99.99% of times (this will not protect against reverse engineering and dedicated app attack, but if this happens your app will be famous !). It is a good idea to obfuscate the code too, but first of all implements this trick!

using System.Xml.Linq;
using Microsoft.Phone.Controls;
using System.Linq;
using System.Collections.Generic;
using Microsoft.Phone.Marketplace;
using Microsoft.Phone.Tasks;
using System.Collections.ObjectModel;
using Coding4Fun.Phone.Controls.Data;
 
public static bool IsHacked()
{
    try
    {
        if (Debugger.IsAttached == true) //then WMAppPRHeader.xml file will be added during AppHub certification only! So this has to be skipped during development.
            return false;

        //scramble WMAppPRHeader.xml file name to make life a little harder in case of reverse engineering
        string fl = "xxx" + "W" + "xxxx" + "M" + "xxxx" + "A" + "xxxx" + "p" + "xxxpxxx" + "PxR" + "xxxxx" + "Hxxxxxxx" + "exxxxxxa" + "xxxx" + "d" + "xxxx" + "xxxxe" + "rxx" + "xxx";
        fl = fl.Replace("x", string.Empty) + "." + "x" + "m" + "l";
        XDocument doc = XDocument.Load(fl); //is hacked, this file is missing or empty!!!
        return false;
    }
    catch (Exception)
    {
        MessageBox.Show("This app was pirated and is not safe to use, please download the original one from Marketplace.");
        MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask();

        //ProcutdID will be changed after APpHub certification, so has to be read from manifest!

        marketplaceDetailTask.ContentIdentifier = PhoneHelper.GetAppAttribute("ProductID").Replace("{", string.Empty).Replace("}", string.Empty).Trim(); //download Coding4Fun toolkit for this helper
        marketplaceDetailTask.ContentType = MarketplaceContentType.Applications;
        marketplaceDetailTask.Show();
 
        return true;
     }
}

Hope it helps.

How to add Panorama to existing WP7 project

2012-01-16T23:43:59.0000000+02:00

by Tianyu Zhang

While developing my latest WP7 app I came across the question how to add a Panorama to my existing WP7 project. I did not want to use the default Visual Studio templates because they generate too much code(for a simple app like mine) with all the data binding and view models.

In short I had a database and wanted to show some data in a Panorama control without using MVVM or any default VisualStudio template. So here is what I did:

Step1. Lets say that we have an existing Windows Phone application project.

Step2. Add a reference to "Microsoft.Phone.Controls" available under the .NET tab in the "Add Reference" window:

Step3. Include the following namespace into your page:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Step4. That's it now you can add Panorama and PanoramaItem via the "control" namespace that you have defined in Step3 :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <controls:Panorama Title="Panorama">
        <controls:PanoramaItem>First Item</controls:PanoramaItem>
        <controls:PanoramaItem>Second Item</controls:PanoramaItem>
    </controls:Panorama>
</Grid>

Grab the source here:

PanoramaSample