Profile Picture Control

Table of Contents

 

In this document:


Overview

The ProfilePicture control displays the profile picture of a Facebook object such as a user, place or event.

Not Logged In    Logged In   
image image

Using the ProfilePicture Control

In this tutorial, you will add a ProfilePicture control to an application to display the picture of the logged in user. This tutorial builds on top of the LoginButton control tutorial, which you need to complete before proceeding; in particular, you should have already added the Facebook.Client NuGet to your project as well as inserted and configured a LoginButton in your page.

  1. Open the MainPage.xaml page of the application that you created for the LoginButton control tutorial.

  2. In the user information area in the bottom row, locate the StackPanel element and insert a ProfilePicture control as its first child element, as shown below.

    image

  3. If you switch to Design view, you will notice that the control displays a silhouette image, indicating that no picture is currently available.

    image

    Access to profile pictures can be rate limited to prevent abuse. To avoid running into any restrictions, the ProfilePicture control includes an AccessToken property. If this property is initialized with a valid token, this token is passed along with the request, thus avoiding rate limits. However, for this tutorial, this additional measure will not be necessary.

  4. Run the application and log in. Notice how your profile image is displayed in the lower left corner of the page.

    image

  5. You can customize the profile picture by changing its display size. To change the size, set the value of the control's Width and Height properties to 60. The control ensures that the image it retrieves is large enough to preserve its quality.

    image

    image

  6. By default, the ProfilePicture control displays a cropped square version of the image. To display a scaled version of the original image, set the CropMode property to Original.

    image

    image

    Note that there is an additional Fill CropMode setting that will resize the image to fill the control area while preserving its original aspect ratio.

  7. The complete XAML for the page is shown below. Compare it with your work to verify that you have followed the steps of the tutorial correctly.

    <phone:PhoneApplicationPage
        x:Class="FacebookControls_WP8.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:facebookControls="clr-namespace:Facebook.Client.Controls;assembly=Facebook.Client"
        mc:Ignorable="d"
        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="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel Grid.Row="0" Margin="2">
                <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Visibility="Collapsed">
                <TextBlock FontSize="48" 
                            HorizontalAlignment="Left" 
                            VerticalAlignment="Center" 
                            Text="welcome"/>
            </Grid>
    
            <!--user information-->
            <StackPanel 
                Grid.Row="2" 
                Orientation="Horizontal" 
                HorizontalAlignment="Left" 
                Margin="5">
                <facebookControls:ProfilePicture 
                    x:Name="profilePicture"
                    Width="60"
                    Height="60" 
                    CropMode="Original" 
                    ProfileId="{Binding CurrentSession.FacebookId, ElementName=loginButton}" />
                <TextBlock 
                    Margin="10,0,0,0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" 
                    Text="{Binding CurrentUser.Name, ElementName=loginButton}" />
            </StackPanel>
    
            <!-- login control -->
            <facebookControls:LoginButton 
                x:Name="loginButton" 
                Grid.Row="2" 
                Margin="5"
                HorizontalAlignment="Right" 
                ApplicationId="427365490674294" 
                SessionStateChanged="OnSessionStateChanged" />
        </Grid>
    
    </phone:PhoneApplicationPage>
    
  8. Run the application again to see the result of your latest changes.

    image


See Also