MoAds - Custom Win Phone 7 Ad Control with AdMob support

Update: Codeplex is Garbage, I've been waiting 3 hours for the source control server to let me upload. In the meantime, download the source or the Binaries from my dropbox account or you can download the source from the project page at BitBucket.

Update 2: Microsoft has released a much better ad serving solution than AdMob, this was just a stop gap in case nothing official was released.  This control is old and busted, check out the Microsoft Ad SDK for the new hotness.


After seeing a project on CodePlex that allowed you to display AdMob ads in a Win Phone 7 application, I decided it would be a good project for another custom control.

Custom Styling, Animation and Templates

The main problem I saw with the existing control was that it didn't take advantage of the styling and "Blendability" of the Win Phone 7 platform. Basically, the control used a web browser control to display an HTML template that was updated with ad information.

Here is an example of three different styles for the same template, the top is the default template, the middle is a text only style, and the bottom shows a fading animation when the ads are refreshing. The animations are helped by utilizing the three states for the AdDisplay control; Loading, Normal and Error.

Custom Ad Providers

Another issue I saw was that it relied solely on AdMob, with very little flexibility for hooking up another Ad service (like a rumored Bing Mobile Ad Service), so I added an adapter pattern to the control.


Here is an example of using the provided AdMob Adapter with the control (notice this can all be done in XAML, no code behind).

<!-- Default template example -->
<moad:AdDisplay
    Height="70"
    VerticalAlignment="Top"
    Foreground="White"
    RefreshSeconds="30">
    <moad:AdDisplay.AdAdapter>
        <moad:AdMobAdapter
            PublisherId="YourPublisherID"
            CookieString="YourCookieString"
            AdKeywords="Boston"
            UseTestMode="True"/>
    </moad:AdDisplay.AdAdapter>
</moad:AdDisplay>

I'm hoping to put up another post to talk about creating a custom "In-House" ad provider.


You can download the source from my DropBox account, or at the created project on Codeplex called MoAds.


Now Playing - Goodie Mob - Get Rich to This

Clearable TextBox Custom Control

After some comments from Laurent Bugnion, of Galasoft and MVVM Light fame, I decided to try my hand at turning this simple little Clearable TextBox into a custom control for better "Skinability".

It looks like I've got most of the functionality replicated, including adding two states to help with animations.  The states are "Normal" and "Cleared".  By default, the Cleared state will cause the clear button text to flash red briefly.  You can also now set the ClearButtonTemplate and the ClearButtonContent if you want.  In the picture you can see I've set the ClearButtonContent to Clear and used the default template.

<clr:ClearableTextBox  
    Text="{Binding SomeText, Mode=TwoWay}"
    ClearButtonContent="Clear"
    VerticalAlignment="Top"/>

I haven't tested any custom state animations, only the default ones that are included.  Feel free to let me know if you find any problems. The source and binaries are available below.



Clearable TextBox Custom Control Source



Now Playing: The Roots - Don't Say Nuthin

A Clearable TextBox for Win Phone 7

Update: I've updated this UserControl to a Custom Control for better templating and posted it for download. Check it out in the Clearable TextBox Custom Control post.



After seeing a tweet about the lack of a clearable text box similar to the IPhone by Eric Malamisura, I was inspired to whip together a simple control that fills this need.

Here is some code for the control, in case you don't want to download the full example. Just create a new UserControl called ClearableEditBox and paste these parts in the relevant places.

<!-- Put inside your new UserControl -->
<Grid x:Name="LayoutRoot">
    <TextBox
        MinWidth="50"
        Text="{Binding ElementName=uiThis, Path=Text, Mode=TwoWay}"
        x:Name="editBox"/>
        
    <Button
        MinWidth="30"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Click="clrBtn_Click"
        x:Name="clrBtn">
        <Button.Template>
            <ControlTemplate>
                <TextBlock                                
                    FontSize="25"            
                    Margin="0 0 20 0"
                    Foreground="Gray"            
                    FontWeight="Bold"
                    Text="X"/>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

// Put inside your code behind for your new UserControl.
public partial class ClearableTextBox : UserControl, INotifyPropertyChanged
{
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    // Using a DependencyProperty as the backing store for EditText.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ClearableTextBox), new PropertyMetadata(string.Empty, HandleTextChanged));        

    public ClearableTextBox()
    {
        InitializeComponent();
    }

    private static void HandleTextChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        var box = obj as ClearableTextBox;
        if (null != box)
            box.OnPropertyChanged("Text");
    }

    private void clrBtn_Click(object sender, RoutedEventArgs e)
    {
        Text = string.Empty;
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string name)
    {
        if (null != PropertyChanged)
            PropertyChanged(null, new PropertyChangedEventArgs(name));
    }

    #endregion
}

You can also download a sample project containing the control here.




Clearable TextBox UserControl



Now Playing: Eminem - Airplanes