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