Making the bubbles from the WP7 Message tab



The first step is to open blend and start a new project with the pen tool start drawing the bubble



After you get the bubble completed It will looks like this in my case I want to round it off so I will press alt an using the pen tool click on the squared edges to convert them.


Afterwards I’m going to fill it out with the Color that I want my app to look.


After this step I’m going to close blend an open in visual studio. The code below will create a textbox that uses the bubble has its main template by creating a dedicated control template for it.

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    <!–LayoutRoot is the root grid where all page content is placed–>
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

        <!–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="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <ControlTemplate x:Key="bubbleBlock" TargetType="TextBox">
                    <Path Data="M49,161 C33.633167,169.53714 23.785376,180.49814 22,195 C25.189232,224.86232 30.954609,232.15762 37,237 C138.49593,257.75562 238.74806,261.65536 338,252 L345,263 L360,272 L352,249 L388,249 C410,247.00012 424,244.00014 431,206.00031 C428,182.00041 419.37952,169.61098 394,157 C398.99982,156.00002 165.43312,152.44392 49,161 z" Fill="#FF60E4E1" Height="117.586" Margin="0,0,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" />
                    <ContentPresenter Content="{TemplateBinding Text}"  HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                    <TextBox Template="{StaticResource bubbleBlock}" Text="ad" Width="300"></TextBox>                   

And voila you got a textbox that looks like the one in the windows phone message tab or kind of I made this one a speech bubble because I could.

Cya next time.


Leave a Reply