Bunjeeb's Blog

 

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.

 

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 .

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.

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.