Making the bubbles from the WP7 Message tab

Posted on April 26th, 2011 by alfredo

 

Capture

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

 

Capture2

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.

Capture3

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

Capture4

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.

<phone:PhoneApplicationPage
    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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    x:Class="SendAndReceive.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" 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="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <ControlTemplate x:Key="bubbleBlock" TargetType="TextBox">
                    <Grid>
                    <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>
                    </Grid>
                </ControlTemplate>
            </Grid.Resources>
            <ListBox>
                <ListBoxItem>
                    <TextBox Template="{StaticResource bubbleBlock}" Text="ad" Width="300"></TextBox>                   
                   
                </ListBoxItem>
            </ListBox>
        </Grid>
    </Grid>
   
</phone:PhoneApplicationPage>

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.

Capture5

Categories: Uncategorized

Leave a Reply

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera