TwitterMimic extension

IndexedPath.cs

using System.Threading;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace Gist.Controls
{
    public class IndexedPath:Path
    {
        public static readonly DependencyProperty SelectedColorBrushProperty = DependencyProperty.Register(
            "SelectedColorBrush", typeof (Brush), typeof (IndexedPath), new PropertyMetadata(default(Brush)));

        public static readonly DependencyProperty UnselectedColorBrushProperty = DependencyProperty.Register(
            "UnselectedColorBrush", typeof (Brush), typeof (IndexedPath), new PropertyMetadata(default(Brush)));

        public static readonly DependencyProperty SelectedIndexBindingProperty =
            DependencyProperty.Register("SelectedIndex", typeof(int), typeof(IndexedPath), new PropertyMetadata(0, OnSelectedIndexChanged));

        public Brush UnselectedColorBrush
        {
            get { return (Brush) GetValue(UnselectedColorBrushProperty); }
            set { SetValue(UnselectedColorBrushProperty, value); }
        }

        public Brush SelectedColorBrush
        {
            get { return (Brush)GetValue(SelectedColorBrushProperty); }
            set { SetValue(SelectedColorBrushProperty, value); }
        }

        public int SelectedIndex
        {
            get { return (int)GetValue(SelectedIndexBindingProperty); }
            set { SetValue(SelectedIndexBindingProperty, value); }
        }

        private static void OnSelectedIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var path = d as IndexedPath;
            if(path == null)
                return;
            path.Fill = ((int)e.NewValue == path.Index) ? path.SelectedColorBrush : path.UnselectedColorBrush;
        }

        private int _index;
        public int Index
        {
            get { return _index; }
            set
            {
                _index = value;
                Fill = (value == SelectedIndex) ? SelectedColorBrush : UnselectedColorBrush;
            }
        }
    }
}

MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="Gist.View.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:Gist.Controls"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    shell:SystemTray.ForegroundColor="White"
    shell:SystemTray.Opacity="0">

    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
        </Style>
        <Style x:Key="IndexedPathStyle" TargetType="controls:IndexedPath">
            <Setter Property="Stretch" Value="Uniform"/>
            <Setter Property="Width" Value="65"/>
            <Setter Property="Height" Value="65"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="SelectedColorBrush" Value="Yellow"/>
            <Setter Property="UnselectedColorBrush" Value="White"/>
        </Style>
        <Style x:Key="PathStyle" TargetType="Path">
            <Setter Property="Width" Value="40"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="Margin" Value="0,0,20,0"/>
            <Setter Property="Stretch" Value="Uniform"/>
            <Setter Property="Fill" Value="LightGray"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Margin="0,35,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="15"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="Black" Margin="0,-35,0,65" RenderTransformOrigin="0.5,-1.2"/>
        <Rectangle Grid.Row="1" Fill="Black" Margin="0,-15,0,0"/>
        <ListBox x:Name="ImageBar"
                     Grid.Row="0"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled"
                     ItemContainerStyle="{StaticResource ListBoxItemStyle}"                     
                     SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}"
                     Background="Black">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <controls:SplitPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>
                <controls:IndexedPath Index="0" SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}" Style="{StaticResource IndexedPathStyle}" Data="M2.925457,45.511272C10.741428,45.502132,18.48247,50.500496,21.411001,52.619106L20.564001,62.264 0,53.770779 2.1689987,45.528053C2.4211235,45.517071,2.6733284,45.511566,2.925457,45.511272z M43.952001,43.591896C55.724,52.525307,62.183001,53.360489,62.789,53.421089L64,61.205421 44.424,54.828056 44.396,54.156773z M40.450001,43.115406L40.919001,54.26947 40.950001,54.990753 24.056,62.232002 24.903,52.581406z M32.606,36.478134L32.606,43.690895 25.280001,48.306694 26.096001,39.011951z M59.924001,35.005447L62.139,49.239574C59.452001,49.095078 54.612,46.333439 50.368,43.548397 53.144,35.378548 59.758,35.013317 59.924001,35.005447z M16.933001,22.882633L23.807001,25.352081 23.771,25.766691 23.009001,34.433929C13.212002,29.659979,16.569,23.494579,16.933001,22.882633z M8.8899994,19.993994L13.364,21.601459C9.25,30.491262,18.677,36.603863,22.634001,38.703369L21.754,48.719387C6.2389984,39.027451,3.1920013,41.771053,3.1920013,41.771053L2.8279991,43.028809z M39.475,19.857397L40.272,38.861565 36.321,41.351074 36.242001,33.327076C35.919001,31.54977,33.817,31.872763,33.817,31.872763L26.479,34.649315 27.239,25.997887 27.308001,25.195833z M42.948,19.718L46.328,20.843176 48.265,28.147562 49.341001,32.198376 51.812,28.815638 55.427,23.871042 58.343,24.841661 59.338,31.237457C50.179,32.483341,47.031,41.246284,47.031,41.246284L47.372,41.519039C45.925,40.510029,44.669,39.595921,43.755,38.916862z M53.679668,4.3845386C51.646579,4.4165239 49.847217,5.8707604 49.457722,7.9460926 49.009715,10.31923 50.56956,12.603175 52.941967,13.049685 55.314495,13.496293 57.60103,11.937162 58.046438,9.5640144 58.494245,7.1922369 56.93172,4.9063015 54.561872,4.4602423 54.26532,4.4044247 53.970109,4.3799686 53.679668,4.3845386z M53.876964,0.00037478212C54.370403,0.0050314565 54.870273,0.05313564 55.372135,0.14771746 59.963256,1.0122223 62.984005,5.4340973 62.119318,10.023382 61.814724,11.634684 61.072536,13.050685 60.038754,14.176887L55.179538,20.820293 50.197683,27.634001 48.033721,19.474491 45.924445,11.519484C45.372331,10.095582 45.19521,8.50704 45.497207,6.8932085 46.267306,2.8053779 49.85896,-0.037543376 53.876964,0.00037478212z"/>
            </ListBoxItem>
            <ListBoxItem>
                <controls:IndexedPath Index="1" SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}" Style="{StaticResource IndexedPathStyle}" Data="M1540.22,2082.07L1546.95,2102.78 1568.73,2102.78 1551.11,2115.58 1557.84,2136.29 1540.22,2123.49 1522.6,2136.29 1529.33,2115.58 1511.71,2102.78 1533.49,2102.78 1540.22,2082.07z"/>
            </ListBoxItem>
            <ListBoxItem>
                <controls:IndexedPath Index="2" SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}" Style="{StaticResource IndexedPathStyle}" Data="F1M874.094,289.369L854.3,254.63C854.028,254.151 853.515,253.856 852.958,253.856 852.403,253.856 851.89,254.151 851.617,254.63L831.824,289.369C831.555,289.84 831.559,290.416 831.835,290.883 832.111,291.348 832.618,291.634 833.165,291.634L872.752,291.634C873.299,291.634 873.805,291.348 874.081,290.883 874.357,290.416 874.361,289.84 874.094,289.369 M855.653,287.189L850.264,287.189 850.264,282.745 855.653,282.745 855.653,287.189z M855.653,279.41L850.264,279.41 850.264,266.077 855.653,266.077 855.653,279.41z"/>
            </ListBoxItem>
        </ListBox>

        <!--Pivot Control-->
        <phone:Pivot x:Name="ContentPivot" Grid.Row="2" Background="White">
            <!--Pivot item one-->
            <phone:PivotItem Margin="0,0,0,0">
                <Grid>                    
                </Grid>
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem Margin="0,0,0,0">
                <Grid>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item three-->
            <phone:PivotItem Margin="10,-10,10,0">
                <Grid>                    
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

SplitPanel.cs

using System;
using Windows.Foundation;
using Windows.UI.Xaml.Controls;

namespace Gist.Controls
{
    public class SplitPanel : Panel
    {
        protected override Size MeasureOverride(Size availableSize)
        {
            // the final measure size is the available size for the width, and the maximum
            // desired size of our children for the height
            var finalSize = new Size {Width = availableSize.Width};

            if (Children.Count != 0)
                availableSize.Width /= (double)Children.Count;

            foreach (var current in Children)
            {
                current.Measure(availableSize);

                var desiredSize = current.DesiredSize;
                finalSize.Height = Math.Max(finalSize.Height, desiredSize.Height);
            }

            // make sure it will works in design time mode
            if (double.IsPositiveInfinity(finalSize.Height) || double.IsPositiveInfinity(finalSize.Width))
                return Size.Empty;

            return finalSize;
        }

        protected override Size ArrangeOverride(Size arrangeSize)
        {
            var finalRect = new Rect(new Point(), arrangeSize);
            var width = arrangeSize.Width/Children.Count;

            foreach (var child in Children)
            {
                finalRect.Height = Math.Max(arrangeSize.Height, child.DesiredSize.Height);
                finalRect.Width = width;

                child.Arrange(finalRect);

                // move each child by the width increment 
                finalRect.X += width;
            }

            return arrangeSize;
        }
    }
}