Eclipsed4utoo's Blog

For the Windows Phone 7 platform, Microsoft decided to roll-out it’s own mobile ad service.  This service is Microsoft Advertising PubCenter.  Along with the service, they also added a custom control that we developers can add to our Windows Phone 7 applications.

First, we will need to download the Advertising SDK.  That can be done from here.  After downloading, install it as you would any other .msi, but you will want to note the install directory.  On Windows 7 64-bit, the install directory will be “C:\Program Files (x86)\Microsoft Advertising SDK for Windows Phone 7“.

So first, you will need to go to the PubCenter, create an account(which is free).  Once your account is created, login, then go to the Setup tab.  From here, you will want to register your mobile application and create an application ad unit.  It may take some time for the Ad Unit or application to be approved, so we are allowed to use some testing values for development purposes.

You will want to note the application ID and the Ad Unit ID.  We will need both of these.

So let’s create a new WP7 project.  I just created a simple project and named it AdControlDemo.

Once the project has been created, open the Toolbox.  We are going to add a new tab for the AdControl.  Right-click somewhere in the Toolbox, then choose Add Tab.

I gave my tab the name Advertising Control.

Now right-click in the new Tab area, and click Choose Items.

When the Choose Items dialog comes up, click the Browse button.

Navigate to the install directory of the Advertising SDK that was installed.  You will want to add the Microsoft.Advertising.Mobile.UI.dll file.

You will now see that the AdControl has been added to our list of items.  Now click OK.

Now the AdControl has been added to our Toolbox.

Now we are going to simply drag the control onto our screen.  Now open the Properties window, and you will see two properties for the AdUnitId and the ApplicationId.  For testing purposes, you can use “test_client” as the ApplicationId and “TextAd” as the AdUnitId.

So let’s run our application in the emulator by hitting F5, and you will see test ads showing up.

Now, once you setup your own application and ad unit and replaced the test values with your values, you will need to add this code to one of the initialization methods in the App.cs.  I put it at the bottom of the constructor.

Microsoft.Advertising.Mobile.UI.AdControl.TestMode = false;

Without this code, the control will not show on the screen.

You now have advertising in your WP7 application.

In this tutorial, I will show how you can use Silverlight 4 to get access to the client clipboard. Silverlight 3 had limited clipboard access, but Microsoft implemented more complete access to the clipboard.

For security purposes, access to the clipboard is only allowed through a user-initialed event. For example, you couldn’t have a timer running in the background to constantly get text from the clipboard.

For first, let’s create a Silverlight 4 application and name it SL4ClipboardAccess. Then Click OK on the next popup.

I added some controls to the page..

<Grid x:Name="LayoutRoot" Background="White">

    <TextBox
        Name="CopyTextTextBox"
        Height="23"
        HorizontalAlignment="Left"
        Margin="132,36,0,0"
        VerticalAlignment="Top"
        Width="174" />

    <TextBlock
        Name="textBlock1"
        Text="Text To Copy:"
        Height="23"
        HorizontalAlignment="Left"
        Margin="47,40,0,0"
        VerticalAlignment="Top" />

    <Button
        Name="CopyToClipboardButton"
        Content="Copy To Clipboard"
        Click="CopyToClipboardButton_Click"
        Height="39"
        HorizontalAlignment="Left"
        Margin="144,81,0,0"
        VerticalAlignment="Top"
        Width="145"  />

    <Button
        Click="PasteToTextBoxButton_Click"
        Name="PasteToTextBoxButton"
        Content="Paste To Textbox"
        Height="39"
        HorizontalAlignment="Left"
        Margin="144,147,0,0"
        VerticalAlignment="Top"
        Width="145"  />

    <TextBox
        Name="PasteTextTextBox"
        Height="23"
        HorizontalAlignment="Left"
        Margin="132,209,0,0"
        VerticalAlignment="Top"
        Width="174" />

    <TextBlock
        Name="textBlock2"
        Text="Text From Clipboard:"
        Height="23"
        HorizontalAlignment="Left"
        Margin="8,209,0,0"
        VerticalAlignment="Top" />

</Grid>

Which look like this…

Now, the Click Event for the CopyToClipboard Button would look like this…

private void CopyToClipboardButton_Click(object sender, RoutedEventArgs e)
{
    string textToCopy = CopyTextTextBox.Text;

    try
    {
         Clipboard.SetText(textToCopy);
    }
    catch (SecurityException se)
    {
        MessageBox.Show(se.Message);
    }
}

and the Click Event for the PasteToTextBox Button would be this..

private void PasteToTextBoxButton_Click(object sender, RoutedEventArgs e)
{
    string textFromClipboard = string.Empty;

    try
    {
         textFromClipboard = Clipboard.GetText();
    }
    catch (SecurityException se)
    {
         MessageBox.Show(se.Message);
    }

    PasteTextTextBox.Text = textFromClipboard;
}

Now run the application and type into the Text To Copy textbox. When you click the Copy To Clipboard button, you will be prompted for permission for access to the clipboard.

After allowing access, click the Paste To TextBox button, and the text will now be in the other textbox.

Very simple tutorial for a very powerful feature.

In a previous tutorial, I showed how to do a custom Item Template for a ListBox. However, one of the painstaking parts of that was having to create the class and the code to populate the ListBox with actual data. Also, even though I was populating the ListBox, I still simply saw blank controls during design-time.

This is where Sample Data comes in. Not only can you quickly create sample data for a control, you can drag and drop it onto the control, and the ItemTemplate will be created for you(which you can still edit). And the biggest plus to using Sample Data?….the data can be view at DESIGN-TIME.

So first, let’s create a Silverlight project in Blend. I named mine SampleDataProject.

Next, we will put a ListBox on our page, and give it a Height of 200 and a Width of 250.

<ListBox
	Margin="178,128,212,152"
	Width="250"
	Height="200"/>

Now that we have the ListBox on the page, we can create our Sample Data. Click on the Data window, then on the “Create sample data” button, then choose “New Sample Data…”…

We are going to name it PersonDataSource.

A couple of things to note on this screen. You will see two radio buttons: Project, and This document. If you choose Project, it will make the sample data available to any control in the project. If you choose This document, then the sample data will only be available to this page.

You will also see a checkbox on this screen saying “Enable sample data when application is running”. This allows you to use the sample data in design time, but use another data source during runtime. Uncheck this box if you want to use a different data source at runtime. Since we want our sample data for design time and runtime, we will leave it checked.

After creating the sample data, the Data window will now show our data in a treeview type layout. By default, it will add two properties for us.

Let’s change the first property by double clicking it and giving it the name FullName.

Let’s change the second property to Age. By default, this property is set to a boolean type. Since our age is not a boolean value, we need to change that to a numeric format. Click on the “Change property type” button on the far right of the property line. You will see a dropdown with different types. Choose “Number”. We will leave it’s length at 2.

Now that we have the properties setup, we need to add some actual data. Click on the “Edit sample values” button…

You will now see a window with a number of rows and data. At the bottom, you can determine how many rows you want to show. We are going to change this to 3. We are going to add some data to those rows, then click OK.

Now that we have our sample data setup, let’s simply drag and drop the “Collection” from the Data window onto the ListBox. The ListBox will create it’s own ItemTemplate to display the data.

That’s all you have to do. As you can see, we now have data in our ListBox while designing it…

You can look at my other tutorial on how to edit the created ItemTemplate to show the data different ways.

To me, this is one of the best features of Blend. Being able to see how a collection control will look at design time will speed up the development process. No longer will you have to continuously run the application to see if you have the layout correct.