Category Archives: Silverlight

Welcome 2013 :-)

This is the perfect time to take a look at what happened in the last few months as well as what’s on the roadmap for next year. So let’s start by taking a look at 2012…

Events

techdays12

  • In November, I gave a presentation about Windows Phone 8 at SFEIR Plays

sfeir plays

Blog posts

The last year I blogged mostly about Windows Phone stuff. This is not a surprise as I’m busy (on my personal time…) working for my 2Day todo-list application. I’m finalizing a major release that should be submitted to the marketplace soon with a ton of new features and improvement (several blog posts should highlight some topics from a developer point of view).

Here is the full list of article (oldest first):

Next year

2013 should very busy too :-)

  • In mid-February, I will speak again during the TechDays in Paris. The topic is the same as last year: performance optimization for Windows Phone applications. However, with Windows Phone 8 we’ve plenty of new topics to cover !
  • In late-February I will fly to Redmond for the MVP Summit 2013. It will be my sedond time there. As aways, all the content will be under NDA… I will share a room with my friend Jose Fajardo I met at //BUILD/ 2011 !
  • In March, I should setup an event with my company and Microsoft in Grenoble talking about Windows 8 and Windows Phone 8

I’m still deeply invested with 2Day so hopefully you should see more tips and tricks about Windows Phone. As a Windows 8 version is also on its way, that should give me many reasons to write new blog posts.

Happy new year dear readers !

 

 

 

MVVM framework explorer updated !

After several requests, I finally took the time to update my MVVM Explorer Silverlight App !

Here is the changelog:

  • update all download stats (based ONLY on CodePlex stats)
  • refresh popularities
  • remove StructuredMVVM (not available on CodePlex)
  • add WinRT support (however, no toolkit seems to support if official yet)
Top 5 (most downloaded & supporting WPF, Silverlight and Windows Phone):
  1. MVVM Light (95k downloads)
  2. Caliburn Micro (27k downloads)
  3. nRoute (22k downloads)
  4. Simple MVVM toolkit (10k downloads)
  5. Catel (8k downloads)

As always, feedbacks are welcome !

Introducing the PivotIndicator control for Windows Phone

Update: source code is now available on GitHub.

Today I would like to share a nice control which is part of my mysterious Windows Phone 7 app which will be released later this month. I call this control the PivotIndicator control. It can be used in order to show the user all the items in a PivotControl on a single screen, as shortcuts. A small rectangle (which use the phone’s accent color as background) is animated when the current pivot item changes. The user can press any item to immediately go to the associated pivot item.

You can grab the source code here.

Here is a short video showing the control in action:

Play Video

Now let’s see the details…

  • How to use it?
  1. Adjust the layout of your page to be able to display the PivotIndicator. Typically this involves adding a row with a ‘*’ height.
  2. Use a binding with an ElementName in order to set the Pivot property of the PivotIndicator control
  3. Define the HeaderTemplate property of the PivotIndicator with a DataTemplate which will be used to render each item in the PivotIndicator
  4. You’re done :-)
Here is what is looks like in the demo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="PIVOT INDICATOR" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
 
    <!-- here is the PivotIndicator control -->
    <control:PivotIndicator
        Grid.Row="1"
        Pivot="{Binding ElementName=pivot}">
        <control:PivotIndicator.HeaderTemplate>
            <DataTemplate>
                <!-- this the datatemplate used for each item in the PivotIndicator
                        the DataContext is a PivotItemViewModel in our case -->
                <TextBlock 
                    Text="{Binding Title}"
                    HorizontalAlignment="Center"/>
            </DataTemplate>
        </control:PivotIndicator.HeaderTemplate>
    </control:PivotIndicator>
 
    <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0">
        <controls:Pivot x:Name="pivot" ItemsSource="{Binding PivotItems}">
            <controls:Pivot.HeaderTemplate>
                <DataTemplate>
                    <!-- this is the datatemplate used for the header of the pivot item -->
                    <TextBlock Text="{Binding Title}"/>
                </DataTemplate>
            </controls:Pivot.HeaderTemplate>
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <!-- this is the datatemplate of the content of the pivot item -->
                    <TextBlock
                        Text="{Binding Content}"
                        FontSize="40"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"/>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
        </controls:Pivot>
    </Grid>
</Grid>
  • How it works?
Behind the scene, the PivotIndicator control is actually made of 3 parts:
  • SplitPanel: this is a panel (it derives from Panel) which arrange its children on a single line, and where each item has the same width. The width is computed as the total available width divided by the number of items
  • PivotRectange: this is a small control which contains a rectangle. The rectangle uses the phone’s accent color. Its position is animated based on the currently selected index.
  • PivotIndicator: is the control you will use. It is made of an ItemsControl with a SplitPanel as ItemsPanelTemplate and the PivotRectangle
Source code is documented so you might want to dig in it for more details :-)
Note that I didn’t try but I think the PivotIndicator control should works just fine with a Panorama (and few code adjustments…)