JAPF

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
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?

• 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

This blog post is part of my BUILD series.

I’m having a very busy week here in Anaheim ! I’m meeting many new people and had the chance to enjoy the conference from the inside. I’m also playing with this new Windows 8 slate Microsoft gave us ! I’m not going to do a blog post trying to summarize everything because there is just so much to say.I’m going to try to share my point of view on what I’ve seen here.

Our new platform

The original picture shown during the keynote to introduce the new platform was this one:

There has been a lot of confusion about that because of having XAML with C# in the Metro Style Apps without any reference to the CLR… Doug Steven did a pretty great job (blog post is here) by discussing with key people from the engineering team of Microsoft and creates this new more accurate picture:

Here is a quick summary:

• there is only one CLR
• .Net framework 4.5 is used in both Metro apps and Classic apps
• it’s the same MSIL for Metro apps and Classic apps
• in the Metro platform, we have a subset of the .Net framework (for example no OpenFileDialog…)

New opportunities

Before //BUILD we had already many choices to choose our development environment. we now have even more:

• WPF and managed code for classic desktop apps
• Silverlight in a web environment
• Silverlight out of browser
• WinRT + XAML for Metro apps
• WinRT + HTML for Metro apps

I personally think that Silverlight in a web browser has not a great future. Microsoft just announced for example that the immersive version of IE will not run any plugins (so no Silverlight in the Metro UI) and we ‘ll know Microsoft is pushing HTML5 very strongly.

For classic desktop apps we have 2 options: WPF and Silverlight. Each of them has advantages and the choice we’ll have to do will depend on our constraints (deployment, business needs, connectivity…). I think there is room for the 2 platforms there.

For the Metro UI, you can choose between XAML and HTML. Microsoft told us they will keep a good feature parity between the 2 options. If you choose XAML and managed code you’ll be able to leverage a subset of the .Net framework.

I think another important aspect is that Metro will be available on Windows 8 only. Even though this new version of the OS might have a fast deployment rate (thanks to the slates), in many companies I don’t think it will be that fast.This, plus the fact that some LOB apps will not benefit the Metro UI leaves a lot of work to do in the desktop applications world (where we have both WPF and SL)… For WPF, we now have a new version coming in .Net 4.5. You can check out the new stuff here in the documentation.

In my next blog post I’m going to try to go deeper in the new WinRT/XAML world and see how it looks like for us, WPF and Silverlight developers.