It has been an awesome learning experience working on V1 mobile service targeted for consumers and I hope that it is received well. The team has worked really hard to make this release possible in a very short span of time. Kudos! I hope some of them go out for a beer tonight and take a day off or something.

So what is My Phone?

Microsoft My Phone synchronizes data on your phone, specifically Contacts, Calendar, Tasks, Pictures, Videos, Music, Documents, SMS (WOW!) and even stuff on your Storage Card, to the cloud.

You can get the latest My Phone news from the My Phone blog.

How do I get set up with My Phone?

If you have a Windows Mobile 6.0 or 6.1 Phone you can try out Microsoft My Phone today with a promotional code. Currently it is an invite-only beta. Please sign up and add yourself to the wait list. You will need a Windows Live ID (formerly Passport) to sign into the service.

What does My Phone do for me?

Keeps your data safe

If you ever lose your phone or decide you want a new one, My Phone will save you a lot of time by keeping the data intact and allowing you to easily migrate it to a new device.

Do more with your data online

You can also manage the data from the My Phone website - add new contacts, download pictures and videos you took using your phone to your home PC, push your favorite picture to your phone so that you have it with you on the go, and lots more.

How can I share my My Phone experience?

If you have tried it out and have bugs to report or any new ideas around improving our service you can do so on our My Phone forum.

See you there!

One of the most frequently asked questions on the Toolkit forums and at MIX after Shawn's demo was how to get UpdatePanels to work right with ModalPopups. The trick is to understand that the ModalPopup extender attaches itself to more than just the TargetControl and PopupControl. If you include the OK and Cancel buttons inside the ModalPopup Panel in an UpdatePanel, make sure you include the extender declaration in it as well. If you do not, once a postback occurs the extender will not reinitialize the handlers and you will get null references. Also, if buttons inside the ModalPopup Panel are set to be OK and Cancel buttons on the ModalPopup Extender, then their sole purpose is to close the Popup Panel and run their respective scripts if any have been set. They will not perform postbacks or execute any other client side handlers since the ModalPopup prevents the event from propagating up.

I have attached a sample page that demonstrates three simple scenarios with ModalPopups and UpdatePanels.

1. ModalPopup with an UpdatePanel inside its Popup Panel: Make sure that the OK and Cancel buttons are not inside the UpdatePanel otherwise the handlers will be rendered useless on postback.
2. UpdatePanel that contains a ModalPopup Extender and its Popup Panel: Clicking OK or Cancel still does not cause the postback since those buttons are tied to client side handlers. Clicking on any other control will cause the server side handlers to kick in. Since the extender declaration is inside the UpdatePanel, the asynchronous postback causes the ModalPopupBehavior to be reinitialized correctly and any client side handlers are setup again when the request is completed. So if you would like to postback every time the user clicks OK or Cancel, just don't set those properties on the extender. The Modal Popup Panel closes on postback as desired since the entire popup is inside an UpdatePanel.
3. What if that Popup Panel in # (2) contains an UpdatePanel: Specify the triggers that will cause the outer panel to update and allow the UpdatePanel inside the ModalPopup to operate on its own terms. This time the ModalPopup Panel does not close on postback triggered from within it because the trigger for the outer panel is specifically set to be a separate button.

It is a good idea to design the page without UpdatePanels in mind. When writing the page place UpdatePanels when the rest is done. Once you have the page setup, determine locations in your page that need to be asynchronously updated and the controls that should act as triggers to perform that operation and then appropriately place UpdatePanels with the correct triggers and UpdateMode property set. With extenders it is important that you take into consideration not just the controls targetted by the extender but any others which it hooks into to provide additional functionality.

This post should evolve as I get more feedback and I will update the sample accordingly as well. I hope this helps.

A more organized attempt at spinning...

One of the biggest issues I ran into, as with designing any generic control, was trying to keep the API simple while adding both basic Numeric Up Down functionality and ability to navigate through custom items. To workaround that in a clean fashion I decided to split the two into two completely different controls and leverage the support of two very distinct features in Silverlight, RangeBase and ItemsControl. My team-mate, David, suggested that I could use ListBox instead to use its selection functionality and I would like to try that next.

So here is what I have.

NumericUpDown

The common features of a Numeric Up Down control...

1. Support for keeping value within a range
2. Interval to increment and decrement values and
3. An initial starting value.

Since RangeBase does this by its very design and enforces the range via coercion, I decided to outsource all that responsibility to it and pretty much just added the buttons and the event handlers to do the right thing when the user clicks on the respective controls. Since RangeBase has two options for intervals, large change and small change, I have allowed for the user to update the value using either of those change intervals.

The anatomy of the NumericUpDown is pretty similar to that of the Slider control except that this is missing the track and the thumb and has a TextBox in the template instead. The Text property of the TextBox and the RangeBase Value are maintained in sync.

Usage

With that usage, here is how the NumericUpDown control looks like with its default template.

Note:

I am only using the LargeIncrease buttons in the default template to keep things simple and focused. You could easily add the small increase buttons and convert this into a paging control or a seek control on the MediaElement to change tracks in the MediaElement. Just set the LargeChange to be the Maximum amount and the RangeBase coercion will take care of the rest. Use SmallChange to perform the regular up/down. You can change the layout to add or remove any of these buttons to meet your requirements. It is pretty flexible!

General Rotator/Spinner

This control was born out of the need to browse through items in a collection, one at a time. It is very much the like the ListBox example I used in my previous blog post where I make the viewing area just big enough to accommodate the selected item only.

To summarize the features...

1. View an object in an collection.
2. Bind to the collection of objects:
   • specified via a DataSource
   • specified inline in XAML
3. Navigate through the items in the collection
4. Provide a DataTemplate that displays the object in a desired way.

Several scenarios come to mind: Slide Shows, Paging Controls, input choices on a form like months in a year or days of the week, numeric up/down and many more.

To achieve the inline declaration of objects I decided to leverage the built-in feature in ItemsControl that has the Items property as Content.

What does a Spinner control give you?

1. Current item displayed using a DataTemplate and backed by a ContentPresenter in the control template.
2. Navigation support for previous and next items using Buttons.
3. Navigation hooks to get to the first and last elements in the collection using Buttons.

TODO: Need to expose the object being currently displayed and I am toying with the idea of basing the third flavor on a ListBox control to use the selection goodness as I mention above.

Usage:

Spinning through the days of the week

This sample shows how to bind a Spinner to the days of the week and display the day in the format you choose. I chose to start with Thursday as the week to start from by setting the CurrentItemIndex property to be 3. You can hit the last or first buttons to go to Sunday or Monday respectively or use the previous and next buttons to navigate in smaller steps.

        <spin:Spinner x:Name="MySpinner" CurrentItemIndex="3">

            <spin:Spinner.CurrentItemTemplate>

                <DataTemplate>

                    <Border Height="27" BorderThickness="2" BorderBrush="Black" CornerRadius="2">

                        <TextBlock Text="{Binding Text}" HorizontalAlignment="Center"/>

                    </Border>

                </DataTemplate>

            </spin:Spinner.CurrentItemTemplate>

            <TextBlock Text="Monday" />

            <TextBlock Text="Tuesday" />

            <TextBlock Text="Wednesday" />

            <TextBlock Text="Thursday" />

            <TextBlock Text="Friday" />

            <TextBlock Text="Saturday" />

            <TextBlock Text="Sunday" />

        </spin:Spinner>

Spinning through Images: Slide Show!

In this example, I wanted to display the true power of the CurrentItemTemplate property. I pass the URL paths to the images in my application and bind the Image's Source property in the DataTemplate to that path. All that I need to do then is hit run in Visual Studio. Yes, yes, it does not have the standard SlideShow goodness like auto-play, round-robin etc. but it is a decent start and those hooks could be added externally since the CurrentItemIndex property is exposed for manipulation. In a real world scenario you would set the ItemsSource property to the collection of business objects and let the DataTemplate work the magic.

        <spin:Spinner x:Name="MyPagingSlideShow" >

            <spin:Spinner.CurrentItemTemplate>

                <DataTemplate>

                    <Image Source="{Binding Text}" />

                </DataTemplate>

            </spin:Spinner.CurrentItemTemplate>

            <TextBlock Text="/Images/Creek.jpg" />

            <TextBlock Text="/Images/Dock.jpg" />

            <TextBlock Text="/Images/Forest.jpg" />

            <TextBlock Text="/Images/Garden.jpg" />

            <TextBlock Text="/Images/Tree.jpg" />

            <TextBlock Text="/Images/Waterfall.jpg" />

        </spin:Spinner>

Caveat!

David brought this point up and I agree with him. The paradigm of specifying the items inline does not scale too well if you specify a large number of UIElements inline since ItemsControl does not support virtualization. ItemsControl will try to load all those elements when a request for that page is made. So sticking to specifying lightweight business objects like strings and URIs would be the way to go here and let the DataTemplate take care of the presentation.

Wrapping up...

That's all I have for now. I do hope these controls serve you well and I would love to hear feedback and feature suggestions on the design, implementation and more so do let me know what you think!

Thanks!

Kirti

Spinners.zip

Well...I was wondering what control to explore this week. Currently I have my Sherlock hat on and trying to filter down the list of necessary controls using the Silverlight framework to meet the most common Rich Internet Application requirements. We have not received too many requests for Spinner/NumericUpDown but I thought I would try out how hard it is to come up with something using existing functionality in Silverlight. So here are some observations/findings.

Overview

A spinner or a numeric up/down control allows the user to choose values (from a collection that are in a predetermined order) by hitting two buttons that enumerate over the collection in either directions. The values can be dynamically generated (just plain integers, items pulled using a web service etc.) or from a static list (days of the week, months in a year etc.).

So where could a spinner be used?

These are some easy examples that come to my mind. I am sure a Spinner control could be re-purposed to do a lot more hence this attempt to find common ground.

Shopping carts: You can use a Spinner control to specify the quantity for an item being purchased. A user needs to hit up/down to increase or decrease the value or can also type in the exact value desired.

Paging controls: A lot of websites use paging controls when users need to sift through data. The user can specify the page number or hit next/previous to navigate through.

Picture SlideShow: Navigate through pictures using previous/next buttons.

Do other frameworks have a Spinner?

Here are some existing implementations that support

Windows Forms: This one provides purely numeric functionality i.e. the content that can be spun can only be numbers. It does allow some interesting formatting options.

WPF NumericUpDown: Simple numeric up/down functionality. Not part of the official offering (in the SDK).

AJAX Control Toolkit: Allows for non-numeric as well as numeric data. Data can be pulled from a web-service or can be statically bound as well.

My attempts at Spinning...

Big Disclaimer: Do not expect anything pretty :(.Excuse my poor designer skills. I did create better-looking arrows using Expression design but was limited by time constraints and the inability to resize the paths in my designs because of the lack of ViewBox in Silverlight. Note to self: need to have ViewBox.

All of these trials use two RepeatButtons but you could choose to use a regular Button as well if you do not want to RepeatButton style clicking. None of these are controls or user controls, just my attempts to see how I can get spinning functionality in place. I will write another blog post that talks about a packaged Spinner control that can be configured to have this functionality.

Note: All the controls I use below are part of the Silverlight 2 Beta 1 runtime or its SDK. Both can be downloaded from here. Documentation for the same is available here.

With a TextBox

I started with the idea that I should be able to simply update the number in a TextBox by parsing the existing contents. 

Pluses:

1. This one was pretty straightforward just snap in a TextBox and two RepeatButtons.
2. Having a RepeatButton instead of a regular Button allows me to quickly increment/decrement without having to mouse down and up multiple times. Although, just swapping in a Button instead will still just work.
3. I placed the RepeatButtons on either side of the TextBox to demonstrate that you could have a simple paging control with little effort. I update the number in the click handlers of the two buttons.

Limitations:

1. You are pretty much tied to numeric values and cannot exploit other data-types.
2. I do not perform any formatting/masking on the numbers.

With a ListBox

My main motivation here was to bind to a set of values and navigate through them showing only one of them at a time. My team mate, David, does a SlideShow using the same principle and I used that as an inspiration. I hide the scroll bars and configure it such that only one item can be seen at a time.

Pluses:

1. Databinding is taken care of and works easily for both static and dynamic data.
2. Buttons can be disabled/enabled based on items left to spin to in either direction.

Limitations:

1. ListBox introduces too much size and functionality overhead in terms of its template and scrolling. The latter is disabled in this case.
2. Need a little bit of manual tweaking to get just one item to display. It is too hard-coded to the item size and may not be very flexible if the data-types change.

With a ContentControl

The idea here was to navigate across and choose any kind of content. In the picture below I use a TextBox in the DataTemplate whose Text property is bound to the Content property of the ContentControl.

Pluses:

Usage scenarios that come to my mind are slide shows, menus, just plain numeric up/down, combo-box style TextBoxes etc. all that will light up with data templating.

Limitations:

I had to manage the data binding tasks manually since I did not have the built-in support of an ItemsControl but it could still be managed. I will give it a shot in my next blog post.

To wrap up...

I have attached the solution based on the Silverlight 2 Beta 1 bits that includes the source code for all the three samples. Again, it is not in a super-reusable form and purely includes some simple event handling behind the scenes to achieve this scenario with existing Silverlight components. I will attempt to release a more reusable version very soon.

Let me know what are your most important requirements from a Spinner. Those should help me a great deal!

Spinner.zip

1. Patches: Patches are mostly for small bug fixes or feature additions which allow the member to invest limited time and still add value to the Toolkit by solving very targeted problems reported by users. We have been checking in a lot of patches on behalf of our users and the trend keeps going up. We hope to see more of those coming. 
2. New Controls: We also have some members who are taking the Toolkit platform and building great controls on top of it and sharing their code on CodePlex following the Toolkit model.  Some of these solutions cater to control requests made by various users using the Toolkit Issue Tracker. Please try out these controls and provide their authors with feedback using their projects' Issue trackers.

Would you like to see your Toolkit control listed here? Shoot us an email and we will take it from there!

Anatomy of the Slider

The Silverlight Slider owes most of its design to the WPF Slider and we have tried to ensure that it is a subset of the WPF Slider both in terms of the API's and behavior. It consumes/builds on top of the following classes, all of which map back to WPF.

• RangeBase: The Silverlight RangeBase class mimics the behavior and API's of the WPF RangeBase class. Although, Silverlight does not support built-in value coercion, the RangeBase class fulfils all the WPF RangeBase coercion rules.
• RepeatButton: The RepeatButton class as in WPF fires click events at specified intervals until the mouse is released.
• Thumb: Thumb supports drag and drop events and enables the user to increase and decrease the value of the Slider by SmallChange.

Slider Template

Slider is made of 5 core visual elements:

1. The RootElement which serves as a container to all the rest of the elements.
2. The FocusVisualElement whose visibility is toggled when the Slider loses or gains focus.
3. The LargeChangeIncreaseRepeatButtonElement which is overlaid on the Slider's root and when clicked, causes the value of the Slider to be increased by LargeChange.
4. The LargeChangeDecreaseRepeatButtonElement which is overlaid on the Slider's root and when clicked, causes the value of the Slider to be decreased by LargeChange.
5. The Thumb element which can be dragged around and causes the value of the Slider to be increased or decreased depending on the direction in which it is being dragged and the IsDirectionReversed property set on the Slider.

Some Template Tips:

Optional Horizontal and Vertical Template parts: The actual number default template parts of the Slider, however, exceeds 5. This is because the last three are duplicated for both Horizontal and Vertical Orientation of the Slider. If the users of your template would like to use the Orientation property, then you may want to provide both the Horizontal and Vertical parts If you do not specify the vertical template, create a Slider that consumes that template and set the Orientation to be Vertical then the Slider will not show up. The Horizontal usage will continue to work as expected.

Grid layout requirement: We require that the Slider's Vertical and Horizontal template elements be grids with three rows or three columns respectively containing the arrangement RepeatButton - Thumb - RepeatButton. Here is the XAML from the template that defines the Horizontal Template layout. The default template also demonstrates which one should have star-sizing and which ones should be Auto. This restriction has been put into place to respect the IsDirectionReversed property.

<!-- Horizontal Template -->
<Grid x:Name="HorizontalTemplateElement">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

<!-- rest of the template -->

</Grid>

Slider examples

I have put together some examples that demonstrate simple customization of the Slider. You can download the zip to get the source code. I have used the bare minimum parts required to achieve my scenario, so you will see that I do not specify the Vertical template or the FocusVisualElement. Both the examples below do not use the Thumb. That was not a deliberate attempt to undermine the importance of the Thumb. I should have more Thumb examples coming up.

Slider to modify the Opacity of an Element

This Slider changes the opacity of an Image but shows no Thumb. To achieve that, I have changed the Width of the Thumb in the Template to be 0 to meet the layout requirement I mention above.

<Thumb Width="0" x:Name="HorizontalThumbElement" Grid.Column="1"></Thumb>

Slider behaving like a Progress Bar

This is a read-only Slider whose value is changed in response to a timer tick. The read-only feature comes from setting the IsEnabled property on the Slider to be false. That disallows any user input. The Slider value is still changeable programmatically. I have also updated the default disabled state of the Slider to not change the Opacity and hence it still looks like an active Slider. If you click on it or attempt to change its values using the arrow keys it does not respond.

<Slider x:Name="ProgressBar"
        IsEnabled="False"
        Margin="10, 10, 10, 10"
        Minimum="0" Maximum="100"
        Style='{StaticResource ProgressBarSliderStyle}'>
</Slider>

I hope to post more control customization examples in the near future. Please try it out the Silverlight controls and let us know what you like and don't like. What controls you really want to see coming from Microsoft?

We are listening!

SliderNoThumbSamples.zip

Controls I worked on: I was on the team responsible for the following controls which made their way into the Silverlight 2 Beta 1 SDK:

• ContentControl and ContentPresenter
• The Button family which includes
  • Button, HyperlinkButton, RepeatButton
  • The ToggleButton family which includes ToggleButton, CheckBox, RadioButton
• Slider and RangeBase

I hope to blog about some of them individually and share interesting tips and tricks on how to use them and customize them for your specific purposes.

Setting up your Silverlight environment:

You can find instructions on setting up your Silverlight development environment here. I would like to use the Expression Beta 2 suite to make my future samples good looking. You can download the whole suite from here. Controls source code can be downloaded from here. It is so easy!

Asking Silverlight questions:

We have worked very hard on these controls and we do hope that they serve you well. If you would like to discuss controls specific issues feel free to contact me or you can share them on the Silverlight Controls Forum. If you have general Silverlight related queries you can find the right forum on Silverlight.net.

Enjoy!

Please post any issues you run into on our forums.

Mucho thanks to our patch contributors who made this a very successful release! We would love to include your fixes in the next Toolkit release. All you need to do is to find a bug and start patching.

• .NET Framework 3.5 and Visual Studio 2008 (includes ASP.NET AJAX): Toolkit version 3.5.11119.0
• .NET Framework 2.0, Visual Studio 2005 and ASP.NET AJAX 1.0: Toolkit version 1.0.11119.0

Here are the release notes that you will find on the sample website page as well.

Version 3.5.11119.0 for .NET Framework 3.5 and Visual Studio 2008

Toolkit version 3.5.11119.0 is supported on .NET 3.5 Framework and Visual Studio 2008. It has specific fixes that will make your designer experience in Visual Studio 2008 much better when working with extenders.

Note: Toolkit version 3.5.11119.0 is only for users who are building on top of .NET Framework 3.5 using Visual Studio 2008. If you are using .NET Framework 2.0 and Visual Studio 2005 then you should use Toolkit version 1.0.11119.0.

Setting up the environment to use the Toolkit:

· Follow the instructions to download and install Visual Studio 2008 from here.

· Download the AjaxControlToolkit-Framework3.5.zip or AjaxControlToolkit-Framework3.5-NoSource.zip from the Toolkit Releases page.

Features:

· JavaScript IntelliSense support: We have added reference tags to all Toolkit JavaScript files that enables you to take advantage of new features in Visual Studio 2008. With the multi-targeting support in this Visual Studio Beta, IntelliSense will be available for the ASP.NET AJAX 1.0 flavor of the Toolkit as well. This article discusses the reference tag feature in detail.

· Extender designer support: Enhanced designer support for Toolkit controls using the new "Add Extender" user interface.

· Animations and PageMethods in design mode: Design mode workarounds that targeted Visual Studio 2008 Beta 2 issues when using Animations and "Add PageMethod" support in the Toolkit have removed since the release version of Visual Studio 2008 has fixed the same.

Version 1.0.11119.0 for ASP.NET AJAX version 1.0 and .NET Framework 2.0 (No changes from 1.0.10920 except one AutoComplete fix. Please see release page for bug information.)

Setting up the environment to use the Toolkit:

· Download the AjaxControlToolkit.zip or AjaxControlToolkit-NoSource.zip from the Toolkit Releases page.

Please try it out and let us know if you run into issues.

Here are the highlights:

• Live demo: If you would like to see the control in action, then check out this live demo that Kannan has put up.
• Getting the bits
  1. You can download the latest RichTextEditor bits from the Source Code tab of the CodePlex project.
  2. Unzip the files to a local directory and open the solution using Visual Studio.
  3. The RichTextEditor.dll will be located in the bin directory of the RichTextEditor project.
  4. You can also preview the control by opening the Default.aspx page of the SampleWebSite project in a browser.
  5. To add the RichTextEditor to your project simply reference the RichTextEditor binary in your web project and register its assembly and namespace on the page.

• Documentation: Kannan has a nice Power Point presentation that talks about some of the important features. It is in the Docs folder when you unzip the source.
• Features: Here are some really compelling features that I would like to call out.
  • Clipboard support: You can copy and paste content from other programs like Microsoft Word, Internet Explorer, Visual Studio into the RichTextEditor and it will persist the formatting. If you copy code from Visual Studio it will preserve the code coloring scheme.

    

  • Context sensitive Toolbar: The ToolBar buttons will reflect the properties of that content automatically when you select it or navigate through it using the mouse or keyboard .

    

  • Code Block: It allows you to format text as code blocks. Simple select the text and format it by clicking the "Code Block" ToolBar button.
  • Emoticons: You can express yourself better by adding emoticons to your rich text.

    

  • HtmlView: If you would like to have more control over the look and feel of your text then you can edit it in HtmlView as well.

    

  • Text in multiple languages: The control currently supports several languages. This means that I can type a message to my mom in my native language, Marathi, using the RichTextEditor and send it to her.
  • Browser support: The control works well in two of the most widely used browsers Internet Explorer and Firefox.

Toolkit and the RichTextEditor

The RichTextEditor is not a part of the AJAX Control Toolkit and does not use the Toolkit infrastructure either. Currently there are no plans of integrating it into the Toolkit. However, as the new Toolkit contribution model states, we would like to share AJAX controls with the community that provide great solutions for important problems that are commonly faced by a lot of our users. Please try it out and give Kannan your feedback by using the Issue Tracker.

To richer text!