Silverlight Pivot View Control – Part 1


 

Download Sample

 

Just before one month from now, I worked with a new company; I really loved my new Job. New experience taken from Michael Ruddick; He is a Chief architect in T-Force.

I will not forget to talk about Tareq Amin “The Vise president in T-Force”. He is a big fan of the new Metro Apps style; Yeah Metro is amazing.

Tareq is listening to me a lot, sharing Ideas, respecting people.
Also he is studying to make Google’s 80/20 Innovation Model part of our work; or maybe to do like Innvoation Center in Amman Office; That’s really coool!

Ok, Lets talk about some geeky stuff here. Watch the video to see the output; And If you like it; Continue reading and download the sample from link below. Smile

 

Download Sample

 

 

I’ve just created a simple control, I called it Pivot View Control.

Simply this control contains

PivotViewControl:
this control divided into three parts:
Title: Just a title for the Pivot Control (you can expose this property as a Dependency Property).
Header: Contains Items Control for Tabs (or Pivot Headers).
Content: Each header related with a UIElement which loaded in the Content Presenter.

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" MinHeight="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock TextWrapping="Wrap"
Text="Title, select one of items below"
VerticalAlignment="Center"
FontFamily="Segoe UI Semibold"
FontSize="21.333" Margin="7,0,0,0"/>
        <ListBox x:Name="PivotItemsHeaderList"
SelectedItem="{Binding SelectedItem, ElementName=PivotViewCtrl, 
Mode=TwoWay}"
                 Margin="0" Grid.Row="1"
Background="#00000000" BorderBrush="{x:Null}"
                 ItemsSource="{Binding Items, ElementName=PivotViewCtrl}"
                 ItemsPanel="{StaticResource ItemsPanelTemplate}"
                 ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}"
                 FontFamily="Segoe WP SemiLight" FontSize="24"
                 ItemTemplate="{StaticResource DataTemplateListItem}"/>
      <ContentPresenter x:Name="ContentPresenter" Margin="0" Grid.Row="2">
          <ContentPresenter.Projection>
              <PlaneProjection CenterOfRotationX="0"/>
          </ContentPresenter.Projection>
      </ContentPresenter>
    </Grid>

The animation createed using Visual State Manager, In the next version I’m going to add many animation options. For now this animation is good Smile.

Simply you can change the animation using Expression Blend, Go to states tab in blend and change the animation.

I have two states in my control;

GoAway: will hide current displayed content. And this animation completed I will change the content of it.

ComeIn: When GoAway animation completed and content changed.  Start the animation to bring the new content.

Anim

This is the animation completed Event:

void StoryBoardGoAway_Completed(object sender, EventArgs e)
{
   string headerValue = this.PivotItemsHeaderList.SelectedItem.ToString();
   var pivotItem = this.ItemsSource
        .SingleOrDefault(p => p.Header == headerValue);
   this.ContentPresenter.Content = (UIElement)pivotItem.Content;
   VisualStateManager.GoToState(this, "ComeIn", true);
}

PivotItemControl.cs

This control is a dependency control; Its something like Tab Item.

public class PivotItemControl : DependencyObject
    {
        public DependencyProperty HeaderProperty =
            DependencyProperty.Register("Header", typeof(String),
            typeof(PivotItemControl), null);
         public String Header
        {
            get
            {
                return (String)GetValue(HeaderProperty);
            }
            set
            {
                SetValue(HeaderProperty, value);
            }
        }
        public DependencyProperty ContentProperty =
            DependencyProperty.Register("Content", typeof(UIElement),
            typeof(PivotItemControl), null);
         public UIElement Content
        {
            get
            {
                return (UIElement)GetValue(ContentProperty);
            }
            set
            {
                SetValue(ContentProperty, value);
            }
        }
    }

How to use it?

public MainPage()
        {
            InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }
         void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            BindPivotItems();
            this.Loaded -= MainPage_Loaded;
        }
       private void BindPivotItems()
        {
          List<PivotItemControl> list = new List<PivotItemControl>();
          String[] headers = new string[] {"details","documents","notes"};
             foreach (string item in headers)
            {
                 list.Add(new PivotItemControl()
                        {
                            Header=item,
                            Content=new DummyContentControl() { Tag=item }
                        });
            }
           this.PivotViewControl.ItemsSource = list;
        }

Some enhancements could occurred; like using one Usercontrol as a Content; And Change the DataContent when GoAway Animation Completed. But I think you need to Expose an Event, Yeah that gonna be great.