Getting Started With AdControl in Windows Phone 7

In this article we are going to explore how to start with an AdControl in Windows Phone 7 and also learn how to implement that type of control in Windows Phone 7.


Introduction

In this article we are going to explore how to start with an AdControl in Windows Phone 7 and also learn how to implement that type of control in Windows Phone 7. In further details we have to integrate the AdControl in Windows Phone 7 that how it is possible Now that we have understood how to use the Visual designer to integrate the ads, let's focus on Integrating the AdControl into an Application Programmatically (C#). Further it is used for that how to advertise through the using AdControl in Windows Phone 7. Here in this article we are going to discuss about all that, Now to accomplish or implement such type of functionality following steps are a guide for using the Microsoft Advertising SDK for Windows Phone 7 to integrate advertising into Windows Phone 7 applications programmatically.

Step 1 : In this step first of all we have to open a Windows Phone application; let us see how you will open it.

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named Silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   

Step_1fig.jpg

Step_1_2fig.jpg

Step 2 : Further in this step you have to add another page inside your Windows Phone application.

  • Go to Solution Explorer.
  • Right-click on the project name
  • Select add New item
  • Select New page and click OK.

Step_2_1fig.jpg

Step_2_2fig.jpg

Step_2_3fig.jpg

Step 3 : In this step you have to add some references to the reference folder; let us see how you will do that which is shown in the figure below. Go to Solution Explorer and you have to right-click on the References folder; let's see the figure given below.

Step_3_1fig.jpg

Further you just click ob the Add Reference dialog box, click the Browse tab. Navigate to the location where you installed the Microsoft.Advertising.Mobile.UI.dll previously. Click the Microsoft.Advertising.Mobile.UI.dll to select it, and click OK.

Step_3_2fig.jpg

After click on the Microsoft.Advertising.Mobile.UI.dll then you just see that it has been added to the references folder.

Step_3_3fig.jpg

Step 4 : Now in this step let's start programming with the AdControl of Windows Phone 7. First of all we will see the MainPage.Xaml file code which is given below.

Code:

<phone:PhoneApplicationPage

    x:Class="MyAdControl.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight
="696"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->

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

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My Ad Control" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="64">

                  <TextBlock.Foreground>

                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFB0CB6C" Offset="1" />

                     </LinearGradientBrush>

                  </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>
        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Margin="0" Name="stackPanel1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
                <CheckBox Content="show the application bar" Name="AppBar" VerticalAlignment="Stretch" HorizontalAlignment="Center"

                       Checked="AppBar_Checked" Unchecked="AppBar_Unchecked" FontFamily="Comic Sans MS">

                    <CheckBox.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFFFACFF" Offset="1" />

                        </LinearGradientBrush>

                    </CheckBox.Background>

                </CheckBox>

                <HyperlinkButton Content="Click to see the add " NavigateUri="/ad_code.xaml" Margin="0,20" FontFamily="Comic Sans MS" FontSize="40" Height="76" Width="429">

                    <HyperlinkButton.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FF8AFDA5" Offset="1" />

                        </LinearGradientBrush>

                    </HyperlinkButton.Background>

                </HyperlinkButton>

                <TextBlock TextWrapping="Wrap" Text="It's all about the ad control in windows phone let see how it works ." FontFamily="Comic Sans MS" FontSize="28">

                     <TextBlock.Foreground>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="0" />

                           <GradientStop Color="#FF38FFB3" Offset="1" />

                        </LinearGradientBrush>

                     </TextBlock.Foreground>

                </TextBlock>

            </StackPanel>
            <StackPanel Grid.Row="1" VerticalAlignment="Bottom" >
                <my:AdControl AdUnitId="Image480_80" Name="adControl1" ApplicationId="My_advertisement" HorizontalAlignment="Center" Width="480" Height="80" />

            </StackPanel>

        </Grid>

    </Grid>
</
phone:PhoneApplicationPage>

 

Step 5 : In this step we are going to see the MainPage.xaml.cs file which is given below.


Code:

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 Microsoft.Phone.Tasks;

using System.Text;
namespace MyAdControl

{
    public partial class MainPage :
PhoneApplicationPage

    {

        // Constructor
        public MainPage()

        {

            InitializeComponent();
            AppBar.IsChecked = true;

        }
        private void AppBar_Checked(object sender, RoutedEventArgs e)

        {

            ApplicationBar.IsVisible = true;

        }
        private void AppBar_Unchecked(object sender, RoutedEventArgs e)

        {

            ApplicationBar.IsVisible = false;

        }

    }

}

 

Step 6 : In this step let us see the XAML code for the ad_code.xaml file which is given below.

Code:

<phone:PhoneApplicationPage

    x:Class="MyAdControl.ad_code"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"

    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->

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

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My advertise" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="64" />

        </StackPanel>
        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>

                <TextBlock Margin="0,0,0,20" TextWrapping="Wrap" Text="It's the Emp information which is given below" FontFamily="Comic Sans MS" FontSize="32" />
                <RichTextBox VerticalAlignment="Top" Background="White" FontFamily="Comic Sans MS" FontSize="26">

                    <Paragraph>

                        <Run Foreground="DeepSkyBlue">Emp_Name</Run>

                        <Run Foreground="Black">&#160;:--&#160;</Run>

                        <Run Foreground="DarkRed">Amit</Run>

                    </Paragraph>

                    <Paragraph>

                        <Run Foreground="DeepSkyBlue">Qualification</Run>

                        <Run Foreground="Black">&#160;:--&#160;</Run>

                        <Run Foreground="DarkRed">MCA</Run>

                    </Paragraph>

                    <Paragraph>

                        <Run Foreground="DeepSkyBlue">Emp_Id</Run>

                        <Run Foreground="Black">&#160;:--&#160;</Run>
                        <Run Foreground="DarkRed">100456</Run>
                    </Paragraph>
                    <Paragraph>
                        <Run Foreground="DeepSkyBlue">Emp_Designatiom</Run>
                        <Run Foreground="Black">&#160;:--&#160;</Run>
                        <Run Foreground="DarkRed">Developer</Run>
                    </Paragraph>
                </RichTextBox>
                 <
Image Height="160" Name="image1" Stretch="Fill" Width="242" Source="/MyAdControl;component/Images/pano_light.jpg" />
                <TextBlock Margin="0,20" TextWrapping="Wrap" Text="It's all about the advertisement control in windows phone 7" FontFamily="Comic Sans MS" FontSize="32" />               
           
</StackPanel> 

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

 

Step 7 : In this step we will see the code for the ad_code.xaml.cs file which is given below.

 

Code:

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 Microsoft.Advertising.Mobile.UI;
namespace MyAdControl

{

    public partial class ad_code : PhoneApplicationPage

    {

        public ad_code()

        {

            InitializeComponent();
           
//In this your production apps, set the AppId using your pubcenter account information.

            String AppId = "My_advertisement";
           
//In this your production apps, set the AdUnitId using your pubcenter account information.

            String AdUnitID = "Image480_80";
            AdControl Myad = new AdControl(AppId, AdUnitID, true);
           
//Here we will make the Ad Control large enough to contain the image.

            Myad.Width = 480;

            Myad.Height = 80;
            Myad.VerticalAlignment = VerticalAlignment.Bottom;

            Myad.HorizontalAlignment = HorizontalAlignment.Center;
            //This code puts the ad control on the page, assuming the default portait page template.
            Grid Mygrid = (Grid)this.LayoutRoot.Children[1]; 
//"Content Panel"

            Mygrid.Children.Add(Myad);

        }

    }

}

 

Step 8 : In this step here we see the design of the MainPage.xaml file which is given below.

 

Step_8fig.jpg

 

Step 9 : In this step we will see the Design of the ad_code.xaml file which is given below.

 

Step_9fig.jpg

 

Step 10 : In this step we are going to run the Windows Phone application by pressing F5 and the output regarding it is given below.

 

Output 1 : It's the default output of the Windows Phone application and the figure is given below.


Out1.jpg

 

Output 2 : Whenever we uncheck the CheckBox then the application bar has been disabled. To enable the application bar you have to check the ChekBox.


out2new.jpg


Output 3 : In this output we will see that whenever we click on the hyperlink at then it will display another page with the AdControl as shown in the figure given below.


Out2.jpg

 

Here are some other resources which may help you.

The installed battery may not be properly connected to the computer
Getting URL of current page in Windows Phone dynamically through code
Setting The Start Page in Windows Phone 7 Application
System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone
Pin-To-Start in Windows Phone 7