Shai Raiten's Blog : Development, Windows Phone 7

Windows Phone 7 – Build Puzzle Game

shair — Sun, 19 Feb 2012 20:25:00 GMT

Over my last posts I talked about Windows Phone 7, we saw some real examples for Location Service, Maps, Ads, Accelerometer and more.

Because I saw how many of you download my demo projects I understand the need for more demos around Windows Phone 7.

So Today, we’ll build a Puzzle Game for Windows Phone 7 (Including the Sources )

Download Demo Project

Step 1: The Puzzle Base

There are several ways to build the puzzle layer, In my demo I chose a simple way of a Canvas with 16 children's type of StackPanel.

Basically I have a lower canvas with the Board image, on top of it I put another canvas with 16 Stack Panels, each panel spread to 100X100

Now, when I have the main puzzle structure I added an image of size 95x95 to each Stack Panel. (the reason it’s not 100X100 – is to leave a space between each), for each image I set the Tag property with the value of the image – 1.png Tag = 1

I’ve also add a timer for counting the time took to solve this puzzle and another int property to count the moves the user made.

Step 2: Find

One of the most common things we’ll use in our code, is FIND:

Find Stack Panel by Image Id
Find the Empty Panel
Find the Value by position

Find the parent of image with a specific Tag value

StackPanel FindStackPanelByTagId(int tag)
{
  if (tag == 16)
  {
     return (from stackPanel in ContentPanel.Children.OfType<StackPanel>() 
          where stackPanel.Children.Count == 0 select stackPanel).First();
  }
  else
  {
     return (from stackPanel in ContentPanel.Children.OfType<StackPanel>()
             from img in stackPanel.Children.OfType<Image>()
             where Convert.ToInt32(img.Tag) == tag
             select stackPanel).First();
  }
}

Find the position of StackPanel without children.

int FindEmptyItemPosition()
{
    int index = 15;
    for (int i = 0; i < 15; i++)
    {
        if (((StackPanel)ContentPanel.Children[i]).Children.Count == 0)
            return index;
 
        index--;
    }
    return 0;
}

Get the Tag value by StackPanel position.

int FindItemValueByPosition(int position)
{
  return ((StackPanel)ContentPanel.Children[position]).Children.Count > 0 
          ? Convert.ToInt32(((Image)((StackPanel)ContentPanel.Children
            [position]).Children[0]).Tag) : 16;
}

Step 3: Scrambles

Now we have are puzzle structure and Find method helpers, the first thing is to Scramble or puzzle.

So I wrote a method that runs n times and generate random numbers from 1 to 16, for each number find the current StackPanel that hold him. (FindStackPanelByTagId) .

If First and Second number are smaller then 16 then - swipe the images and tag values.

If One of the values is 16 the swipe - One Stackpanel will be cleared of Items

void Scrambles()
{
    var count = 0;
    while (count < 25)
    {
        var a = _rnd.Next(1, 17);
        var b = _rnd.Next(1, 17);
 
        if (a == b) continue;
 
        var stack1 = FindStackPanelByTagId(a);
        var stack2 = FindStackPanelByTagId(b);
 
        if (a == 16)
        {
            var image2 = stack2.Children[0];
            stack2.Children.Clear();
            stack1.Children.Add(image2);
        }
        else if (b == 16)
        {
            var image1 = stack1.Children[0];
            stack1.Children.Clear();
            stack2.Children.Add(image1);
        }
        else
        {
            var image1 = stack1.Children[0];
            var image2 = stack2.Children[0];
 
            stack1.Children.Clear();
            stack2.Children.Clear();
 
            stack1.Children.Add(image2);
            stack2.Children.Add(image1);
        }
 
        count++;
    }
}

Step 4: Check Board

Each move the user do, perform a loop and checks values from 1 to 16. if the numbers are not in the correct order than nothing happed.

Else You stop the game timer and display a win message.

void CheckBoard()
{
    var index = 1;
    for (var i = 15; i > 0; i--)
    {
        if (FindItemValueByPosition(i) != index) return;
        index++;
    }
 
    _timer.Stop();
    WinGrid.Visibility = System.Windows.Visibility.Visible;
}

Step 5: Move Items

Before we can apply move of items we need to check several things, the first thing is:

Check if the Item Can move, Checking all panels around the specific item with -1 +1 -4 +4, if one of them is empty then he can move.

StackPanel CanMove(UIElement itemToMove)
{
    var count = ContentPanel.Children.Count;
    for (var i = 0; i < count; i++)
    {
        if (!(ContentPanel.Children[i] is StackPanel)) continue;
 
        var stackPanel = (StackPanel)ContentPanel.Children[i];
        if (!stackPanel.Children.Contains(itemToMove)) continue;
 
        if (!IsBorderSwich(i, i + 1) && i + 1 <= 15 && ContentPanel.
            Children[i + 1] != null && 
           ((StackPanel)ContentPanel.Children[i + 1]).Children.Count == 0)
            return ((StackPanel)ContentPanel.Children[i + 1]);
 
        if (!IsBorderSwich(i, i - 1) && i - 1 > -1 && ContentPanel.
            Children[i - 1] != null && 
           ((StackPanel)ContentPanel.Children[i - 1]).Children.Count == 0)
            return ((StackPanel)ContentPanel.Children[i - 1]);
 
        if (i + 4 <= 15 && ContentPanel.Children[i + 4] != null && 
           ((StackPanel)ContentPanel.Children[i + 4]).Children.Count == 0)
            return ((StackPanel)ContentPanel.Children[i + 4]);
 
        if (i - 4 > -1 && ContentPanel.Children[i - 4] != null && 
           ((StackPanel)ContentPanel.Children[i - 4]).Children.Count == 0)
            return ((StackPanel)ContentPanel.Children[i - 4]);
 
    }
    return null;
}

The Second - if both of the items you want to swipe are in the Board borders do nothing.

private readonly int[] _bordersNums = { 0, 4, 8, 12, 3, 7, 11, 15 };






bool IsBorderSwich(int a, int b)
{
    return _bordersNums.Contains(a) && _bordersNums.Contains(b);
}

Now after we have those safety methods we can move the items based on user clicks:

Just register to ItemManipulationStarted on the entire windows, for each event check if the item isn’t image do nothing, if it does, call the CanMove method to verify that this item can move around.

private void ItemManipulationStarted(object sender, 
                                          ManipulationStartedEventArgs e)
{
    var item = (UIElement)e.OriginalSource;
    if (!(item is Image)) return;
 
    var to = CanMove(item);
 
    if (to != null)
    {
        _moves++;
        txtMoves.Text = _moves.ToString();
        MoveItem(item, to);
        CheckBoard();
    }
 
    e.Handled = true;
    e.Complete();
}

MoveItem - Move Item From One StackPanel to Another.

void MoveItem(UIElement item, StackPanel targetPanel)
{
    foreach (var stackPanel in
        ContentPanel.Children.OfType<StackPanel>().Where(stackPanel => 
    stackPanel.Children.Count > 0 && stackPanel.Children.Contains(item)))
    {
        stackPanel.Children.Remove(item);
    }
 
    targetPanel.Children.Add(item);
}

Step 6: Check If Puzzle Solvable

This part of very important, because half of the starting positions for the n-puzzle are impossible to resolve.

Johnson & Story (1879) used a parity argument to show that half of the starting positions for the n-puzzle are impossible to resolve, no matter how many moves are made. This is done by considering a function of the tile configuration that is invariant under any valid move, and then using this to partition the space of all possible labeled states into two equivalence classes of reachable and unreachable states.

The Puzzle 15 (n-puzzle) is a classical problem for modeling algorithms involving heuristics. Commonly used heuristics for this problem include counting the number of misplaced tiles and finding the sum of the Manhattan distances between each block and its position in the goal configuration. Note that both are admissible, i.e., they never overestimate the number of moves left, which ensures optimality for certain search algorithms such as A*.

bool CheckIfSolvable()
{
    var n = 0;
    for (var i = 1; i <= 16; i++)
    {
        if (!(ContentPanel.Children[i] is StackPanel)) continue;
 
        var num1 = FindItemValueByPosition(i);
        var num2 = FindItemValueByPosition(i - 1);
 
        if (num1 > num2)
        {
            n++;
        }
    }
 
    var emptyPos = FindEmptyItemPosition();
    return n % 2 == (emptyPos + emptyPos / 4) % 2 ? true : false;
}

Step 7: Setup a New Game

Now, when we defined everything we need, let’s write the New Game method, reset all timer and moves number back to 0, call the Scrambles method, and while the game is unsolvable continue scramble the game, once it’s solvable start the timer.

public void NewGame()
{
    _moves = 0;
    txtMoves.Text = "0";
    txtTime.Text = Const.DefaultTimeValue;
 
    Scrambles();
    while (!CheckIfSolvable())
    {
        Scrambles();
    }
 
    _startTime = DateTime.Now.AddSeconds(1);
    _timer.Start();
 
    GridScrambling.Visibility = System.Windows.Visibility.Collapsed;
}

Download Demo Project

Enjoy

Windows Phone 7–Raise My Dog–Russian

shair — Wed, 01 Feb 2012 13:22:00 GMT

Windows Phone 7 - Location Service and Bing Maps

shair — Mon, 30 Jan 2012 03:41:00 GMT

Over the last two posts I’ve talked about Microsoft pubCenter ads into your Windows Phone 7 application and Accelerometer Sensor for Windows Phone 7 all as part of a very long series I’m planning to write on Windows Phone 7 in order to help you write cool and useful applications for Windows Phone 7.

In this Post I’ll talked about Location Service and Bing Maps.

Location Service – I’ll show how to receives data from the Microsoft Location Service and displays the geographic coordinates of the device, and then show your position on the Bing Maps.

Bind Maps - demonstrates how to use the basic functionality of the Bing Maps Silverlight Control for Windows Phone and manipulate the Map Coordinate based on Geo Position.

Now before we start you need to create a Bing Maps Account, why? because if you don’t have a key you will see an annoying message on your map – like that:

Download Demo Project

Step 1: Create Bing Maps Account

Enter Bing Maps Site - https://www.bingmapsportal.com, sign in with your Live Id or create new account.

Then enter “Create or view Keys” and create new key for your application, save this key because we’ll use it latter.

Step 2: Setup your Xaml

For our application we need Map object and several textbox and buttons to control the map zoom and mode.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="36" />
        <RowDefinition Height="448*" />
        <RowDefinition Height="123" />
    </Grid.RowDefinitions>
    <my:Map Name="map" Grid.Row="1" CredentialsProvider="Your Key"/>
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="6,6,0,0" 
           Text="Latitude:" VerticalAlignment="Top" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="88,6,0,0" 
           Name="txtLatitude" Text="0.0" VerticalAlignment="Top" />
 
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="206,6,0,0" 
           Text="Longitude:" VerticalAlignment="Top" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="306,6,0,0" 
           Name="txtLongitude" Text="0.0" VerticalAlignment="Top" />
    <TextBlock Grid.Row="2" Height="30" Margin="12,78,6,0" 
           Name="txtStatus" Text="N/A" VerticalAlignment="Top" 
           TextAlignment="Center" />
    <Button Content="High Accuracy" Grid.Row="2" Height="72" 
           HorizontalAlignment="Right" Name="btnAccuracy" 
           VerticalAlignment="Top" Width="221" Click="BtnAccuracyClick" />
    <Button Content="Road Mode" Height="72" HorizontalAlignment="Left" 
           Name="btnMapMode" VerticalAlignment="Top" Width="216" 
           Grid.Row="2" Click="BtnMapModeClick" />
</Grid>

Step 3: Reinitialize the GeoCoordinateWatcher

The GeoCoordinateWatcher Supplies location data that is based on latitude and longitude coordinates.

private GeoCoordinateWatcher _geo;
public GeoPositionAccuracy Accuracy = GeoPositionAccuracy.High;
private string _mode = "Road";
 
private void PhoneApplicationPageLoaded(object sender, RoutedEventArgs e)
{
    LocationInitialize();
}
 
private void LocationInitialize()
{
    // Reinitialize the GeoCoordinateWatcher
    _geo = new GeoCoordinateWatcher(Accuracy) { MovementThreshold = 20 };
 
    // Add event handlers for StatusChanged and PositionChanged events
    _geo.StatusChanged -= GeoStatusChanged;
    _geo.PositionChanged -= GeoPositionChanged;
 
    _geo.StatusChanged += new EventHandler
                  <GeoPositionStatusChangedEventArgs>(GeoStatusChanged);
    _geo.PositionChanged += new EventHandler<GeoPositionChangedEventArgs
                  <GeoCoordinate>>(GeoPositionChanged);
 
    // Start data acquisition
    _geo.Start();
}

Step 4: Define Control Buttons

After we add four, two buttons for accuracy and map mode and two for zoom actions and we need to define the code behind:

The accuracy check what the current accuracy on the GeoCoordinateWatcher, replace it and reinitialize the watcher.

The Map Mode does the same but without reinitialize the watcher because we are changing the Map object.

The Zoom In and Zoom out increase or decrease the zoom on the map.

private void BtnAccuracyClick(object sender, RoutedEventArgs e)
{
    Accuracy = Accuracy == GeoPositionAccuracy.Default ? 
               GeoPositionAccuracy.High : GeoPositionAccuracy.Default;
    btnAccuracy.Content = Accuracy == GeoPositionAccuracy.High ? 
                "Default Accuracy" : "High Accuracy";
    LocationInitialize();
}
 
private void BtnMapModeClick(object sender, RoutedEventArgs e)
{
    if (_mode == "Road")
    {
        map.Mode = new AerialMode();
        _mode = "Aerial";
        btnMapMode.Content = txtStatus.Text = "Aerial Mode";
    }
    else
    {
        map.Mode = new RoadMode();
        _mode = "Road";
        btnMapMode.Content = txtStatus.Text = "Road Mode";
    }
}
 
private void ZoomInClick(object sender, EventArgs e)
{
    var zoom = map.ZoomLevel;
    map.ZoomLevel = ++zoom;
}
 
private void ZoomOutClick(object sender, EventArgs e)
{
    var zoom = map.ZoomLevel;
    map.ZoomLevel = --zoom;
}

Step 5: GeoPositionChanged and GeoStatusChanged

Now to the fun part, the GeoCoordinateWatcher has two events:

GeoStatusChanged - Indicates that the status of the GeoCoordinateWatcher object has changed.

The Status Changed can tell us is the device is not support Location or we change some properties of the GeoCoordinateWatcher.

GeoPositionChanged - Indicates that the latitude or longitude of the location data has changed.

The position changed event will tell us what is the current Latitude and Longitude of the device. using those values we can define GeoCoordinate object and define the Map center to those coordinates, this way the user will see what is his location.

void GeoPositionChanged(object sender, 
                             GeoPositionChangedEventArgs<GeoCoordinate> e)
{
    // Update the TextBlocks to show the current location
    txtLatitude.Text = e.Position.Location.Latitude.ToString("0.000");
    txtLongitude.Text = e.Position.Location.Longitude.ToString("0.000");
 
    var cor = new GeoCoordinate(e.Position.Location.Latitude,
                                e.Position.Location.Longitude);
 
    //Using the current coordinates define the Map center 
    //to those coordinates.
    map.Center = cor;
    map.ZoomLevel = 10;
}
 
void GeoStatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
{
    this.Dispatcher.BeginInvoke(() =>
    {
        switch (e.Status)
        {
            case GeoPositionStatus.Disabled:
                // The location service is disabled or unsupported.
                // Alert the user
                txtStatus.Text = "location is unsupported on this device";
                break;
            case GeoPositionStatus.Initializing:
                // The location service is initializing.
                // Disable the Start Location button
                txtStatus.Text = "initializing location service," 
                                                         + Accuracy;
                break;
            case GeoPositionStatus.NoData:
                // The location service is working, but it cannot get 
                // location data Alert the user and enable the Stop 
                //Location button
                txtStatus.Text = "data unavailable," + Accuracy;
                break;
            case GeoPositionStatus.Ready:
                // The location service is working and is receiving 
                //location data Show the current position and enable the
                // Stop Location button
                txtStatus.Text = "receiving data, " + Accuracy;
                break;
 
        }
    });
}

Download Demo Project

Accelerometer Sensor for Windows Phone 7

shair — Sun, 29 Jan 2012 04:49:00 GMT

In my previous post on Windows Phone 7 I’ve showed how to integrate Microsoft pubCenter ads into your Windows Phone 7 application, the second part is writing an application for Windows Phone 7.

Thinking about a good application isn’t simple but I can help you with some cool features available in Windows Phone 7 that can help your application to be much more cooler!

There are APIs available to obtain raw sensor data from the device’s Compass, Gyroscope, Accelerometer and Motion API, but in this post I’ll talk about Accelerometer Sensor.

Download Demo Project

I’ll talk about everything but in this post I’ll demonstrate how to use Windows Phone 7 Accelerometer Sensor and how to use Windows Phone Emulator Tools to test your app.

Step 1: Create new Windows Phone 7 Application

Add Reference to Sensors and Xna.Framework

Step 2: Define Accelerometer

First thing we want to do is checking if our (or user) device supports Accelerometer, if not you should inform the user that your application might not work for him, if the device does support you should

private Accelerometer _sensor;
 
public MainPage()
{
    InitializeComponent();
    if (!Accelerometer.IsSupported)
    {
        // The device on which the application is running does not support
        // the accelerometer sensor. Alert the user and hide the
        // application bar.
        MessageBox.Show("device does not support compass");
        ApplicationBar.IsVisible = false;
    }
    else
    {
        SetAccelerometer();
    }
}

Create new Accelerometer and define the TimeBetweenUpdates (the default is 20 milliseconds), register to CurrentValueChanged and start the sensor by calling Start.

private void SetAccelerometer()
{
    // Instantiate the accelerometer.
    _sensor = new Accelerometer();
    // Specify the desired time between updates. The sensor accepts
    // intervals in multiples of 20 ms.
    _sensor.TimeBetweenUpdates = TimeSpan.FromMilliseconds(40);
    // The sensor may not support the requested time between updates.
    // The TimeBetweenUpdates property reflects the actual rate.
    _sensor.CurrentValueChanged += new EventHandler<SensorReadingEventArgs
     <AccelerometerReading>>(SensorCurrentValueChanged);
    _sensor.Start();
}

Step 3: Create On / Off Switch

Using ApplicationBar I’ve add a new button to turn the accelerometer on and off.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/ApplicationIcon.png"
                                  Text="On / Off" 
                                  Click="ApplicationBarIconButtonClick"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

When the user click the switch we will stop accelerometer, or if the accelerometer is already in stop state we’ll start him.

private void ApplicationBarIconButtonClick(object sender, EventArgs e)
{
    if (_sensor != null && _sensor.IsDataValid)
    {
        // Stop data acquisition from the accelerometer.
        _sensor.Stop();
    }
    else
    {
        if (_sensor == null)
        {
            SetAccelerometer();
        }
 
        try
        {
            _sensor.Start();
        }
        catch (InvalidOperationException)
        {
            MessageBox.Show("unable to start accelerometer.");
        }
    }
}

Step 4: Using Accelerometer Data

The accelerometer measures the forces applied to the device at a moment in time. These forces can be used to determine in which direction the user is moving the device. The acceleration value is expressed as a 3-dimensional vector representing the acceleration components in the X, Y, and Z axes in gravitational units. The orientation of the acceleration is relative to the device such that -1g is applied in the Z-axis when the device is face up on a level table and -1g is applied to the Y-axis when the device is placed perpendicular to the table top.

The Accelerometer sensor detects the force of gravity along with any forces resulting from the movement of the phone. The combined motion API, accessed using theMotion class, uses multiple device sensors to separate the gravity vector from the device acceleration and allows you to easily determine the current attitude (yaw, pitch, and roll) of the device.

The first thing is to point the finger based on the angle of the phone (the easy part), using MathHelper.ToDegrees on the sensor x value we’ll send the fingerImg angle.

This second part requires some more calculations to place the bubble on the right X and Y coordination (not the same a spirit level – you can turn the axis to do that).

private const double EdgeGlassAngle = 20.0 * Math.PI / 180.0;
private const double UsableLateralAmplitude = 400;
 
void SensorCurrentValueChanged(object sender, SensorReadingEventArgs
<AccelerometerReading> e)
{
    // Note that this event handler is called from a background thread
    this.Dispatcher.BeginInvoke(() =>
        {
            var acc = e.SensorReading.Acceleration;
            //Point if the finger on the phone angle.
            ((RotateTransform)fingerImg.RenderTransform).Angle = 
                                           MathHelper.ToDegrees(acc.X);
 
            //Calculate the postiion of the bubble based on the 
            //Accelerometer X and Y
            var angleFlat = Math.Atan2(acc.Y, acc.X);
            var magnitudeFlat = Math.Sqrt(Math.Pow(acc.X, 2.0) + 
                                               Math.Pow(acc.Y, 2));
            var edgeRadius = Math.Sin(EdgeGlassAngle);
 
            var xAngle = Math.Asin(acc.X) * 180.0 / Math.PI;
            var yAngle = Math.Asin(acc.Y) * 180.0 / Math.PI;
 
            angle.Text = String.Format("{0:0.0}ֲ°  {1:0.0}ֲ°",
                                                      xAngle, -yAngle);
 
            var xPixelLocation = Math.Cos(angleFlat) * (magnitudeFlat / 
                      edgeRadius) * (UsableLateralAmplitude - 250) / 2;
            var yPixelLocation = Math.Sin(angleFlat) * (magnitudeFlat /
                      edgeRadius) * (UsableLateralAmplitude - 250) / 2;
 
            Canvas.SetLeft(bubble, (xPixelLocation + 250) / 2);
            Canvas.SetTop(bubble, (yPixelLocation + 450) / 2);
        });
 
}

In order to test your application without deploying to the device it self you can use the emulator tools:

Download Demo Project

How To Connect Window Phone 7 and Windows 8 app to Microsoft pubCenter

shair — Fri, 27 Jan 2012 19:17:00 GMT

When writing a Windows Phone 7 or Windows 8 application you might want to put some Ads, some applications cost money when others has ads.

Microsoft pucCenter isn’t the only solution for Windows 7 and Windows 8 but it’s something easy and simple to do when working with Visual Studio to developer applications.

Microsoft Advertising pubCenter empowers Web site publishers and Windows Phone 7 application developers to place ads within web pages and Windows Phone 7 apps. When users click on these ads, the publisher earns money from the advertiser, via Microsoft.

Download Demo Project

Step 1: Create pubCenter account and register a new application

Enter https://pubcenter.microsoft.com/Login, register using Live Id or create new account.

Then navigate to “Setup” and choose applications, and click on “Register application”

In the application registration choose what type of application it will be, a Windows Phone 7 or Windows 8? and save your new application.

After the save completes copy and save your application id (we’ll use it later).

Step 2: Create Ad Units

After you registered your application you need to create a ad unit.

An ad unit defines the size and content of ads that appear on your site or in your application.

You can create more than one ad unit in order to show different ads in different pages or the same page in your application.

Choose the size and categories for that ad unit.

Again, copy and save the ad unit id (we’ll use it later).

Step 3: Create Winnows Phone 7 Application With Ads

First download the Microsoft Advertising SDK for Windows Phone or Download Win 8 Ad SDK

In Visual Studio 2010 create new project of type Windows Phone Application.

Add reference to “Microsoft.Advertising.Mobile.UI” located here "C:\Program Files (x86)\Microsoft SDKs\Advertising for Phone\Libraries\Microsoft.Advertising.Mobile.UI.dll"

Step 4: Place Ad Inside Your Page

Open “MainPage.xaml” and add the following instead of the the ContentPanel grid, notice the ApplicationId is the same for all three ads controls but the AdUnitId is different, this what cause the ads to show different ads.

* Leave fixed size : Width="480" Height="80" , this can cause the ad to disappear.

 <Grid x:Name="ContentPanel" Grid.Row="1">
    <StackPanel>
       <my:AdControl Width="480" Height="80" 
        ApplicationId="4619ce4c-5ea4-46b9-8f36-f5ee1f4e1155"
        AdUnitId="10029839"  />
    
       <my:AdControl Width="480" Height="80" 
        ApplicationId="4619ce4c-5ea4-46b9-8f36-f5ee1f4e1155"
        AdUnitId="10020345"  />
    
       <my:AdControl Width="480" Height="80" 
        ApplicationId="4619ce4c-5ea4-46b9-8f36-f5ee1f4e1155"
        AdUnitId="10016624"  />
   </StackPanel>
</Grid>

The Results:

Download Demo Project

I’m a CodeProject MVP 2012

shair — Tue, 10 Jan 2012 14:36:00 GMT

How To: Detect Mobile Device Users In Your Web Site – JavaScript

shair — Fri, 09 Dec 2011 17:05:00 GMT

Today everything is about Mobile Devices, users are using their tablets and phones to view web sites. Some web sites has a mobile application or just what to inform the user about a related mobile application.

So the question is how to inform the user about a mobile application related to a specific site?

You can put some links in your site and maybe the user will click on those links and will be redirect to your mobile application, but I want more – I want my site to detect if the user comes from a mobile device and if so I want to tell him I got some mobile application for him.

In order to do it I’ve wrote some JavaScript code to detect from what device the user is coming from, based on his device I’ll send him a message to inform him I got an mobile application for him and if the user decide to view it he just need to click OK and I’ll redirect him to the application market.

Code Flow:

Download JavaScript Code

The code is very simple, all you need to do I use navigator.userAgent to see from what browser the user is coming from and send a confirmation message, if the user click OK then change window location to your mobile application.

I’ve also set a cookie to check if the user already so this message in the past 30 days, I don’t want to annoy my user each time he enters my site.

<script>
function detectMobileDevice() {
    var message = "This web site has an app for ";
    var learn = "Click OK to learn more";
    var iPadAppId = "";
    var wp7AppId = "c52573e0-08c5-4e33-abfa-992021f0630f";
    var androidAppId = "";
    var iPhoneAppId = "";
    var webOsId = "";
 
    if (document.cookie.indexOf("mobile_app_notification=false") < 0) {
 
    //This is not a mobile browser....
    if (navigator.userAgent.match(/Opera/i) 
            || navigator.userAgent.match(/Dolphin/i)) return;
 
    if ((navigator.userAgent.match(/Windows Phone/i)) 
            || (navigator.userAgent.match(/ZuneWP7/i))) {
       setCookie();
       if (wp7AppId != "" && confirm(message + "Windows Phone! " + learn))
           window.location = "zune://navigate/?phoneAppID=" + wp7AppId;
     } else if (navigator.userAgent.match(/android/i)) {
       setCookie();
       if (androidAppId != "" && confirm(message + "Android phone! " 
                                                            + learn))
           window.location = "market://details?id=" + androidAppId;
     } else if (navigator.userAgent.match(/iPad/i)) {
       setCookie();
       if (iPadAppId != "" && confirm(message + "iPad! " + learn))
            window.location = "http://itunes.apple.com/WebObjects/
                            MZStore.woa/wa/viewSoftware?id=" + iPadAppId;
     } else if ((navigator.userAgent.match(/iPhone/i)) || 
                (navigator.userAgent.match(/iPod/i))) {
       setCookie();
       if (iPhoneAppId != "" && confirm(message + 
                                     "iPhone and iPod Touch!" + learn))
            window.location = "http://itunes.apple.com/WebObjects/
                          MZStore.woa/wa/viewSoftware?id=" + iPhoneAppId;
     } else if (navigator.userAgent.match(/webOS/i)) {
       setCookie();
       if (webOsId != "" && confirm(message + "webOS phone! " + learn))
            window.location = "http://developer.palm.com/appredirect/?
                                          packageid=" + webOsId;
     }
  }
}
 
//Define a cookie so we don't want to annoy the user.
function setCookie() {
    var date = new Date();
    //30 = Number of Days for the cookie to expire.
    date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    document.cookie = "mobile_app_notification=false" + expires;
}
 
detectMobileDevice();



</script>

Enjoy

Create Your Own WP7 Deployment Application

shair — Sat, 23 Jul 2011 18:52:00 GMT

Couple of days ago Microsoft opened AppHub for Israel as well, I’ve started to write more game and applications for WP7 (WP7 Submit Application - The [NeutralResourceLanguage] attribute is missing on the entry assembly).

While working on several applications I noticed that I want to see the application properties before deploying them inside my WP7 device, when working in Visual Studio 2010 It’s easy because you can deploy your project from Visual Studio himself but I’m also working with many XAP file out side of Visual Studio and the default application deployment didn’t give me what I wanted.

Download Demo Project

How To Build Your Own WP7 Deployment Application

Before we get started how to deploy XAP file to WP7 Application?
There is a method called InstallApplication that gets the application guide, the genre of the application, the path for the Application Icon and the Xap file itself.

public RemoteApplication InstallApplication(Guid productId, 
Guid instanceId, string applicationGenre, string iconPath,
 string xapPackage);

First how to get all WP7 devices connect to your machine?

Add “Microsoft.SmartDevice.Connectivity.dll” to your project
(C:\Windows\Microsoft.Net\assembly\GAC_MSIL\Microsoft.SmartDevice.Connectivity\
v4.0_10.0.0.0__b03f5f7f11d50a3a\Microsoft.SmartDevice.Connectivity.dll)

Then I used the DatastoreManager to obtain all Platforms and for each platform get the devices.

static IEnumerable<object> GetDevices()
{
    var manager = new DatastoreManager(CultureInfo.CurrentUICulture.LCID);
    return manager.GetPlatforms().SelectMany(platform => 
      platform.GetDevices()).Cast<object>().ToArray();
}

Each XAP file (basically zip file) contains “WMAppManifest.xml” the with all the application information inside.

<App xmlns="" ProductID="{GUID}" Title="Raise My Dog"
  RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal"
  Author="Shai Raiten" Description="Raise My Dog is an interactive game 
  for WP7 that allows you to raise a dog inside you mobile device."
  Publisher="RaisePets">

Now I’ve enable Drag&Drop on my window to accept XAP files and extract the information I wanted from the “WMAppManifest.xml” file located inside the XAP.

private const string FileFilter = "WMAppManifest.xml";


private XapInfo GetXapInformation(string xapPath)
{
    try
    {
        var fastZip = new FastZip();
        var tempFile = Path.Combine(Path.GetTempPath(), 
          Path.GetRandomFileName());
        fastZip.ExtractZip(xapPath, tempFile, FileFilter);
        var files = Directory.GetFiles(tempFile);
 
        if (files.Length == 0) return null;
 
        using (Stream stream2 = File.OpenRead(files[0]))
        {
            var document = new XPathDocument(stream2);
            var selectSingleNode = document.CreateNavigator()
              .SelectSingleNode("//App");
            if (selectSingleNode != null)
            {
                return new XapInfo(selectSingleNode, files[0], xapPath);
            }
        }
    }
    catch
    {
 
    }
 
    return null;
}

So I’ve create XapInfo class to contain the entire data for the deployment

public XapInfo(XPathNavigator node, string filePath, string xapFile)
{
  this.Guid = new Guid(node.GetAttribute("ProductID", string.Empty));
  this.Title = node.GetAttribute("Title", string.Empty);
  this.Description = node.GetAttribute("Description", string.Empty);
  this.Version = node.GetAttribute("Version", string.Empty);
  this.Author = node.GetAttribute("Author", string.Empty);
  this.Publisher = node.GetAttribute("Publisher", string.Empty);
  this.IconPath = GetXapIcon(xapFile);
  this.XapFilePath = xapFile;
}

Inside the XapInfo class I had another Zip operation to extract the Application Icon.

private const string IconFilter = "ApplicationIcon.png";

private string GetXapIcon(string xapPath)
{
  string iconPath;
  try
  {
    var fastZip = new FastZip();
    var tempFile = Path.Combine(Path.GetTempPath(), 
      Path.GetRandomFileName());
    fastZip.ExtractZip(xapPath, tempFile, IconFilter);
 
    var files = Directory.GetFiles(tempFile);
 
    if (files.Length == 0) return null;
 
    var fileStream = File.OpenRead(files[0]) ??
                        Assembly.GetExecutingAssembly().
                        GetManifestResourceStream(IconFilter);
 
    var tempFileName = Path.GetTempFileName();
    using (var stream3 = new FileStream(tempFileName,
      FileMode.Create))
    {
      fileStream.CopyTo(stream3);
    }
    iconPath = tempFileName;
  }
  catch (Exception)
  {
    iconPath = null;
  }
  return iconPath;
}

Now when you have all the information for the XAP file you can install the application on your device.
The below method will also make sure that if the application is already installed then Uninstall it and then perform the new installation.

var device = (Device) e.Argument;
try
{
    device.Connect();
 
    if (device.IsApplicationInstalled(_xapInfo.Guid.Value))
    {
        device.GetApplication(_xapInfo.Guid.Value).Uninstall();
    }
    device.InstallApplication(_xapInfo.Guid.Value, _xapInfo.Guid.Value,
    "NormalApp", _xapInfo.IconPath, _xapInfo.XapFilePath);
    device.Disconnect();

}
catch (SmartDeviceException ex)
{
    MessageBox.Show(ex.Message, "Deploy Application", MessageBoxButton.OK,
    MessageBoxImage.Information);
}

Download Demo Project

איך מוסיפים מקלדת עיברית מובנת למכשירי WP7

shair — Sat, 23 Jul 2011 15:28:00 GMT

יש לי מכשיר HTC HD 7 כבר חצי שנה, מהרגע שפתחתי אותו לפיתוח התקנתי תוסף למקלדת עיברית מובנת.

ראיתי מספר אנשים עובדים עם תוכנה שהורידו אשר מאפשרת להם לכתוב בעיברית בתוכנה ולהעתיק את הטקסט לאפליקצייה הנחוצה, זה תהליך ממש לא נוח כל פעם לפתוח את התוכנה לכתוב את מה שאתם רוצים ולהעתיק את הטקסט, לסגור את התוכנה לפתוח את האפליקצייה המיועדת ולהדביק את הטקסט.

אתמול קיבלתי הודעה מחבר לעבודה אשר ראה על המכשיר שלי מקלדת עיברית מובנת שמאפשרת לי לכתוב עיברית בכל אפליקציה.

המאמר המקורי הגיע מ – XDADevelopers, אני ממליץ להיכנס ולהתעדכן על גרסאות חדשות.

איך מתקינים מקלדת עיברית מובנת למכשירי WP7

על מנת לבצע פעולה זאת אתה חייב מכשיר פתוח לפיתוח

1. הפעל Application Deployment
(C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XAP Deployment\XapDeploy.exe)

2. לפי סוג המכשיר הורד וטען את החבילה המתאימה

NativeKeyboard-v3.3.zip - עבור מכשירי Samsung בלבד

NativeKeyboard-v2.16.xap

3. המתן עד לסיום ההתקנה

4. הפעל את תוכנת Native Keyboard

5. לאחר הפעלת התוכנה בחר בשפה הרצויה (עיברית)

6. לאחר סיום ההתקנה יופיע מסך עם תוצאות ההתקנה:
לא לפחד מההודעת שגיאה, חשוב לוודא שאכן מופיע שה – Patching …ok

7. לאחר הדלקה מחודשת של המכשיר תראו תוסף עיברית במקלדת

8. עכשיו אתם יכולים לכתוב עיברית בכל מסך בלי העתק הדבק.

תהנו!

WP7 Submit Application - The [NeutralResourceLanguage] attribute is missing on the entry assembly

shair — Fri, 22 Jul 2011 17:42:00 GMT

As you know AppHub is open for Israel (Now It's Official (I think) - Israeli Developers Can Register to Develop WP7 Apps) and several other countries.

So I decide to move my WP7 Games and Applications I wrote and publish using YallaApps to my own AppHub, when I started to upload the first XAP file I got this message:

I’ve used the same XAP as I used in YallaApps so what happened?

Just add the below attribute to your WP7 Application assembly file and you’re Done!

[assembly: NeutralResourcesLanguage("en-US",
UltimateResourceFallbackLocation.Satellite)]

Enjoy

Windows Azure Toolkit for Windows Phone 7/iOS/Android

shair — Tue, 10 May 2011 13:26:14 GMT

S. Somasegar just blog about Bringing Windows Azure to more devices

Windows Azure Toolkit for Windows Phone 7

The Windows Azure Toolkit for Windows Phone 7 is designed to make it easier for you to build mobile applications that leverage cloud services running in Windows Azure. The toolkit includes Visual Studio project templates for Windows Phone 7 and Windows Azure, class libraries optimized for use on the phone, sample applications, and documentation.

Windows Azure Toolkit for iOS

Released today, the Windows Azure Toolkit for iOS is designed to help developers targeting iOS to use Windows Azure services. It includes an open source Objective-C library to interface with Windows Azure services, documentation, and a sample application using the library. You can download the samples and documentation from github, along with the library and its source, or learn more about the details.

Windows Azure Toolkit for Android

Android developers will have their own version of the toolkit available in preview form later this summer.

Full Article

WP7 - Data Between Pages – Part 1

shair — Sun, 01 May 2011 22:32:35 GMT

WP7 - Data Between Pages – Part 1

In my last post about WP7 I talked about The Mask Way– Rating Control and More, but before I’ll jump to more cool stuff let’s start from the basics.

How to transfer data between pages?
How to shared data for the entire WP7 application?
And of course how to retaining data across instances?

Download Demo Project

This is the first post of two about Passing Data Between Pages in WP7.

Query String

Query string is the part of a Uniform Resource Locator (URL) that contains data to be passed to web applications.

Passing Data using WP7 Query String Format it’s that same as HTML Query String.

I’ve created a Const class to obtain my strings:

public class Const
{     
    public static string TextTag = "Text"; 
    public static string BoldTag = "IsBold";
}

Source Page:

Using NavigationService to navigate to Destination Page with our Query String – /Page.Xaml?Param1=Value1&Param2=Value2

private void BtnQueryDemoClick(object sender, RoutedEventArgs e)
{     
          var queryData = string.Format("?Text={0}&IsBold={1}", txtQueryData.Text, chxIsBold.IsChecked);  
    NavigationService.Navigate(new Uri("/QueryData.xaml" + queryData, UriKind.Relative));
}

Destination Page:

In order to receive those parameters you need to override the OnNavigatedTo method and use the NavigationContext to obtain the QueryString.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    var data = this.NavigationContext.QueryString;

    if (data.ContainsKey(Const.TextTag))
        txtMain.Text = data[Const.TextTag];

    if (data.ContainsKey(Const.BoldTag))
        txtMain.FontWeight = Convert.ToBoolean(data[Const.BoldTag]) ? FontWeights.Bold : FontWeights.Normal;

    base.OnNavigatedTo(e);
}

Static Data

Always remember that each and every page in your WP7 application has convenient access to App class that derives from Application and have static property called – Application.Current.

So you can Cast this App class from any page and use it to store and get data.

For Example I’ve created one public property – SharedText (string)

public partial class App : Application
{     
            public string SharedText { get; set; }  
            public App()   
   {         
                     SharedText = "Hello World!!!!";

In my Test Page I’ve override the OnNavigatedTo and cast an App from Application.Current.

Using the App I can get my Static Property and set the value to the TextBox (txtMain)

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{     
            var app = (Application.Current as App);    
            txtMain.Text = app.SharedText;      
            base.OnNavigatedTo(e);
}

Now, when I click the “Set Data & Move”, I’m using the same concept but instead of Get the property I’m setting a new value.

private void BtnMoveClick(object sender, RoutedEventArgs e)
{
      var app = (Application.Current as App);
      app.SharedText = txtMain.Text;

      NavigationService.Navigate(new Uri("/StaticData.xaml", UriKind.Relative));
}

In the Destination Page you will see:

And the Code behind is the same:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{     
          var app = (Application.Current as App);   
   txtMain.Text = app.SharedText;     
    
          base.OnNavigatedTo(e);
}

In the next post I’ll talk about Isolated Storage and Phone States.

Download Demo Project

Enjoy.

WP7 The Mask Way– Rating Control and More

shair — Sat, 30 Apr 2011 20:52:19 GMT

WP7 The Mask Way– Rating Control and More

In the last couple of months since Microsoft has release the WP7 I’ve started to build games and apps in XNA and Silverlight.

Regarding building games, it’s different then building applications, especially in UI… and most of the developers don’t like dealing with UI, but UI doesn’t have to be so scary and I’ll start this post with a nice and simple technic I learned when I worked with Photoshop called “Masking”.

The first example I’ll take from the first game I built called = “Raise My Dog” - Raise My Dog is an interactive game for WP7 that allows you to raise a dog inside you mobile device, something like – Tamagotchi game.

Heart - I need to build Heart Control to show the user his health, but how do I fill the heart without exceeded the borders???

And as I mention in the article title – Using Mask – to help mask out the heart fill without harming the border, This technique will save you a lot of time.
The initial goal is to separate the Heart Border from the Heart Background, In my demo I used Paths and not Images but the concept remain the same.

Step 1: Placing the Heart Fill
(The heart fill need to be above everything)

Step 2: Placing the Mask Between the Fill and Border

And I‘ve added a converter to adjust the Health to the Mask Size,
Example: If the user Health is 50% than I need to change the Mask Height to the center of the Heart Border (half…), but the size have to be relative to the Border Or Heart Fill Size so the Mask size will be 34.126

//The max height of the heart border.
//100 represent the max scale 
private const double Max = 68.253;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{     
    var health = (int)value; 
    return ((((health) * Max) / 100) - Max) * -1;
}

```
Health = 0 then Mask Height= 68.253
```
```
Health = 50 then Mask Height= 34.12
```
```
Health = 90 then Mask Height= 6.8
```

Step 3: Placing the Border

<Path x:Name="border" Canvas.Left="243.55" Canvas.Top="195.863" Stretch="Fill" Data="F1 M 243.553,218.219C 243.888,241.644 266.682,261.781 284.255, 268.184L 284.255,
      268.184C 301.628,262.071 323.779,242.306 323.365,218.88L 323.365,218.88C 323.143,206.466 313.059,196.258 300.868,196.157L 300.868, 196.157C 293.56,196.097 287.157,
      199.683 283.246,205.238L 283.246,205.238C 279.159,199.616 272.639,195.925 265.329,195.864L 265.329,195.864C 261.79, 195.835 258.456,196.66 255.51,198.151L 255.51,
      198.151C 248.309,201.793 243.427,209.41 243.553,218.219 Z M 284.205,265.049C 268.588,259.359 248.32,240.575 248.022, 219.761L 248.022,219.761C 247.868,
      208.729 256.54,199.805 267.373,199.894L 267.373,199.894C 273.871,199.948 279.662,203.228 283.295,208.224L 283.295, 208.224C 286.767,203.286 292.456,
      200.102 298.951,200.154L 298.951,200.154C 309.784,200.245 318.746,209.315 318.942,220.346L 318.942, 220.346C 319.271,238.91 303.666,255.593 289.337,
      262.84L 289.337,262.84C 287.598,263.72 285.875,264.461 284.205,265.049 Z " Margin="12,17,0,0" RenderTransformOrigin="0.5,0.5" Width="70.75"
     Height="68.253" UseLayoutRounding="False" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Path.RenderTransform>
        <CompositeTransform/>
    </Path.RenderTransform>
    <Path.Fill>
        <LinearGradientBrush StartPoint="0.00275276,0.496476" EndPoint="1.0027,0.496476">
            <LinearGradientBrush.RelativeTransform>
                <TransformGroup>
                    <SkewTransform CenterX="0.00275276" CenterY="0.496476" AngleX="1.353" AngleY="0"/>
                    <RotateTransform CenterX="0.00275276" CenterY="0.496476" Angle="0.520549"/>
                </TransformGroup>
            </LinearGradientBrush.RelativeTransform>
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFAF6AF" Offset="0"/>
                <GradientStop Color="#FFF1E091" Offset="0.13058"/>
                <GradientStop Color="#FFE9CA74" Offset="0.159348"/>
                <GradientStop Color="#FF9C6636" Offset="0.510986"/>
                <GradientStop Color="#FFC29855" Offset="0.595192"/>
                <GradientStop Color="#FFE9CA74" Offset="0.75824"/>
                <GradientStop Color="#FFFAF6AF" Offset="0.972534"/>
                <GradientStop Color="#FFFAF6AF" Offset="1"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Path.Fill>
</Path>

And you’re done! – Download The Demo Project For WP7

Rating

Rating Control is more common for application and lots of application use it, The same concept as Heart Masking but here in the Rating Control I used the Same Path for Border and Fill and the difference between them is the Fill property set to “Yellow” in all Stars objects and instead of changing the Height of the Mask I’m changing the Width.

Step 1: Define the Star Path as StaticResource

In the App.Xaml I created a Static Resource called StarPath

<Application.Resources>
    <sys:String x:Key="StarPath">F1 M 0,217.042L 227.5,217.042L 297.875,0L 367.542,217L 595.542,217L 410.208,353.667L 480.708,
        569.667L 297.208,436.667L 116.208,568.167L 185.708,352.667L 0,217.042 Z</sys:String>
</Application.Resources>

Step 2: Create 5 Stars using Path

<Path Name="star" Stretch="Uniform" Data="{StaticResource StarPath}" Fill="Yellow" Width="73" Height="73" HorizontalAlignment="Left" Margin="3,0.667,0,0" 
VerticalAlignment="Top" d:LayoutOverrides="Width, Height" />

Step 3: Placing the Mask Between the Fill and Border

//The max Width of all stars.
//5 represent the max scale
private const double Max = 395;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{     
     var rate = (double)value;  
    return ((((rate) * Max) / 5) - Max) * -1;
}

Step 4: Create 5 Stars using Path but without the Fill Property

<Path Name="border"  Stretch="Uniform" Data="{StaticResource StarPath}" StrokeThickness="2" Stroke="White" Width="75" Height="75" HorizontalAlignment="Left" 
Margin="2,-0.333,0,0"  VerticalAlignment="Top" d:LayoutOverrides="Width, Height"/>
<Path x:Name="border2"  Stretch="Uniform" Data="{StaticResource StarPath}" StrokeThickness="2" Stroke="White" Width="75" Height="75" Margin="81,-0.333,0,0" 
 HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Path x:Name="border3"  Stretch="Uniform" Data="{StaticResource StarPath}" StrokeThickness="2" Stroke="White" Width="75" Height="75" Margin="160.659,-0.334,0,0"
  HorizontalAlignment="Left" VerticalAlignment="Top" />
<Path x:Name="border4"  Stretch="Uniform" Data="{StaticResource StarPath}" StrokeThickness="2" Stroke="White" Width="75" Height="75" Margin="240.318,-0.334,0,0"
 HorizontalAlignment="Left" VerticalAlignment="Top" />
<Path x:Name="border5"  Stretch="Uniform" Data="{StaticResource StarPath}" StrokeThickness="2" Stroke="White" Width="75" Height="75" Margin="319.98,-0.334,0,0"
  HorizontalAlignment="Left" VerticalAlignment="Top" />

And you’re done! – Download The Demo Project For WP7

Planning Sprints For MIX 2011

shair — Sat, 09 Apr 2011 17:16:09 GMT

Planning Sprints For MIX 2011

Today I flying to Las Vegas to attend the MIX 2011 conference, me and 12 other consultants from Sela Group will be there to here about the latest news in Web, Azure and WP7 and of course to have lots of FUN!

I've also attend MIX 2010 and after that experience (losing in Black Jack) I wrote an article Black Jack Using Scrum – Winner Winner Chicken Dinner

This year I’m going to give it a try and see if this methodology will improve my odds – I’ll let you know!

WP7 – How To Extend ListBox When Reaching Last Item

shair — Thu, 07 Apr 2011 01:16:47 GMT

WP7 – How To Extend ListBox When Reaching Last Item

I’m building a WP7 application that contains a ListBox with search results,right now when the user reached the end of the ListBox he need to press the “Next Button” to bring more results from the server, however this is a bad solution and I wanted to extend the list automatically when the user reaches the last item on the list.

There are many way to to implement this, and here is the simplest way how to listen ListBox Vertical Offset Event and update your ListBox automatically when the user reaches the last item on the list.

Download Demo Project

So How?

Step 1: First you need to create a ListBox in your application, than register the Loaded Event of this Listbox.

public MainPage()
{
InitializeComponent();
ListBoxDemo.Loaded += new RoutedEventHandler(ListBoxDemo_Loaded);
}

Step 2: Than create a DependencyProperty called – ListVerticalOffsetProperty, so we can use it later to perform action upon reaching the Last Item in the Listbox.

public readonly DependencyProperty ListVerticalOffsetProperty = DependencyProperty.Register("ListVerticalOffset", 
typeof(double), typeof(MainPage),      new PropertyMetadata(new PropertyChangedCallback(OnListVerticalOffsetChanged)));
 
public double ListVerticalOffset
{     
    get { return (double)this.GetValue(ListVerticalOffsetProperty); } 
    set { this.SetValue(ListVerticalOffsetProperty, value); }
}

Step 3: Use the following method to find the ScrollViewer object

/// <summary>
/// Finding the ScrollViewer
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="root"></param>
/// <returns></returns>
static T FindChildOfType<T>(DependencyObject root) where T : class
{
    var queue = new Queue<DependencyObject>();
    queue.Enqueue(root);
 
    while (queue.Count > 0)
    {
        DependencyObject current = queue.Dequeue();
        for (int i = VisualTreeHelper.GetChildrenCount(current) - 1; 0 <= i; i--)
        {
            var child = VisualTreeHelper.GetChild(current, i);
            var typedChild = child as T;
            if (typedChild != null)
            {
                return typedChild;
            }
            queue.Enqueue(child);
        }
    }
    return null;
}

Step 4: Now we connect all the dots together, getting the FrameworkElement (the ListBox), searching for the ScrollViewer object and register to the VerticalOffset changed event.

void ListBoxDemo_Loaded(object sender, RoutedEventArgs e)
{

   FrameworkElement element = (FrameworkElement)sender; 
    element.Loaded -= ListBoxDemo_Loaded;    
    scrollViewer = FindChildOfType<ScrollViewer>(element); 
    if (scrollViewer == null)  
   {        
      throw new InvalidOperationException("ScrollViewer not found.");  
   }


    Binding binding = new Binding();  
   binding.Source = scrollViewer;   
  binding.Path = new PropertyPath("VerticalOffset");
    binding.Mode = BindingMode.OneWay; 
    this.SetBinding(ListVerticalOffsetProperty, binding);
}

Step 5: Implement the OnListVerticalOffsetChanged to check if the ListBox has reached the last item and if so, create new items.

private static void OnListVerticalOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{

     MainPage page = obj as MainPage;
     ScrollViewer viewer = page.scrollViewer; 
    //Checks if the Scroll has reached the last item based on the ScrollableHeight 
    bool atBottom = viewer.VerticalOffset >= viewer.ScrollableHeight;  
   if (atBottom)     
     {       
  //ViewModel will be better........  
       int Count = page.ListBoxDemo.Items.Count;    
     int end = Count + 10;     
    for (int i = Count; i < end; i++)     
    {                              

   page.ListBoxDemo.Items.Add("Dummy Item " + i);   
      }   
  }
}

Download Demo Project

Shai Raiten's Blog : Development, Windows Phone 7

Windows Phone 7 – Build Puzzle Game

Step 1: The Puzzle Base

Step 2: Find

Step 3: Scrambles

Step 4: Check Board

Step 5: Move Items

Step 6: Check If Puzzle Solvable

Step 7: Setup a New Game

Windows Phone 7–Raise My Dog–Russian

Windows Phone 7 - Location Service and Bing Maps

Step 1: Create Bing Maps Account

Step 2: Setup your Xaml

Step 3: Reinitialize the GeoCoordinateWatcher

Step 4: Define Control Buttons

Step 5: GeoPositionChanged and GeoStatusChanged

Accelerometer Sensor for Windows Phone 7

Step 1: Create new Windows Phone 7 Application

Step 2: Define Accelerometer

Step 3: Create On / Off Switch

Step 4: Using Accelerometer Data

How To Connect Window Phone 7 and Windows 8 app to Microsoft pubCenter

Step 1: Create pubCenter account and register a new application

Step 2: Create Ad Units

Step 3: Create Winnows Phone 7 Application With Ads

Step 4: Place Ad Inside Your Page

The Results:

I’m a CodeProject MVP 2012

How To: Detect Mobile Device Users In Your Web Site – JavaScript

Code Flow:

Create Your Own WP7 Deployment Application

Download Demo Project

איך מוסיפים מקלדת עיברית מובנת למכשירי WP7

WP7 Submit Application - The [NeutralResourceLanguage] attribute is missing on the entry assembly

Windows Azure Toolkit for Windows Phone 7/iOS/Android

WP7 - Data Between Pages – Part 1

WP7 - Data Between Pages – Part 1

In my last post about WP7 I talked about The Mask Way– Rating Control and More, but before I’ll jump to more cool stuff let’s start from the basics.

Query String

Static Data

WP7 The Mask Way– Rating Control and More

WP7 The Mask Way– Rating Control and More

Heart - I need to build Heart Control to show the user his health, but how do I fill the heart without exceeded the borders???

Step 1: Placing the Heart Fill(The heart fill need to be above everything)

Step 2: Placing the Mask Between the Fill and Border

Rating

Step 1: Define the Star Path as StaticResource

Step 2: Create 5 Stars using Path

Step 3: Placing the Mask Between the Fill and Border

Step 4: Create 5 Stars using Path but without the Fill Property

Planning Sprints For MIX 2011

Planning Sprints For MIX 2011

WP7 – How To Extend ListBox When Reaching Last Item

WP7 – How To Extend ListBox When Reaching Last Item

So How?

Step 1: Placing the Heart Fill
(The heart fill need to be above everything)