×
Namespaces

Variants
Actions

Tabbed interface with Pivot animation for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
22 Sep
2013

This article explains how to create a tabbed interface with a pivot-style animation. This sort of UI has been used in the official Twitter app and 6tag Instagram client on Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 820
Compatibility
Platform(s):
Windows Phone 8
Article
Created: Depechie (16 Sep 2013)
Last edited: influencer (24 Sep 2013)

Contents

Introduction

The official Twitter app on Windows Phone uses an uncommon interface for Windows Phone - effectively a "tabbed" control but with pivot-like animation for displaying the selected content.

The behaviour of the Twitter app suggests this is a normal pivot control, but 2 things are different from the standard implementation. Firstly, all the icons stay in view, even while switching through each pivot content (normally the headers will flow outside the boundary of the normal page). Secondly, the use of such icons as headers is also not common.

This article explains how to create this sort of user interface using path controls for its headers. These path controls contain XAML data to represent the "tab icon" images. The screenshots below show how this looks (there is also a video below).

Implementation

Create a new windows phone app and in the MainPage.xaml add a ListBox called ImageBar. This ImageBar will host our 4 icons which will act as our pivot headers. Each icon is actually a custom PathControl (more on this below) that contains XAML data representing the image.

We are using a ListBox for this because it has all the necessary event handling and actions to select an item and automatically deselecting all other items. This will also help in setting a selected colour.

Note.pngNote: To get nice looking icons, just download Metro Studio from Syncfusion! Open the program, search for a nice icon and copy paste the generated XAML data into your windows phone project.

<ListBox x:Name="ImageBar"
Grid.Row="0"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<customcontrols:SplitPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<customcontrols:PathControl Content="M37.786324,45.467003C39.394405,45.467003 40.702843,46.774002 40.702843,48.383999 40.702843,49.994999 39.394405,51.299996 37.786324,51.299996 36.178245,51.299996 34.869808,49.994999 34.869808,48.383999 34.869808,46.774002 36.178245,45.467003 37.786324,45.467003z M26.671389,45.467003C28.282196,45.467003 29.582848,46.774002 29.582848,48.383999 29.582848,49.994999 28.282196,51.299996 26.671389,51.299996 25.060581,51.299996 23.749926,49.994999 23.749926,48.383999 23.749926,46.774002 25.060581,45.467003 26.671389,45.467003z M42.511345,36.764008C44.122189,36.764008 45.432873,38.069786 45.432873,39.680516 45.432873,41.291245 44.122189,42.597023 42.511345,42.597023 40.900505,42.597023 39.599827,41.291245 39.599827,39.680516 39.599827,38.069786 40.900505,36.764008 42.511345,36.764008z M31.961349,36.764008C33.572155,36.764008 34.872807,38.069786 34.872807,39.680516 34.872807,41.291245 33.572155,42.597023 31.961349,42.597023 30.350542,42.597023 29.039886,41.291245 29.039886,39.680516 29.039886,38.069786 30.350542,36.764008 31.961349,36.764008z M20.771337,36.764008C22.382177,36.764008 23.692862,38.069786 23.692862,39.680516 23.692862,41.291245 22.382177,42.597023 20.771337,42.597023 19.160496,42.597023 17.859817,41.291245 17.859817,39.680516 17.859817,38.069786 19.160496,36.764008 20.771337,36.764008z M26.491566,0C32.521801,8.3675695E-07 37.622181,4.5700085 39.312214,10.863009 40.262218,10.601992 41.252262,10.450991 42.272339,10.450991 48.382656,10.450991 53.333004,15.399997 53.333004,21.506993 53.333004,25.436009 51.282841,28.877995 48.192707,30.84 46.952648,31.847996 45.372604,32.457005 43.66243,32.468998 43.202442,32.524998 42.752346,32.563999 42.272339,32.563999 41.812351,32.563999 41.362377,32.528019 40.922287,32.472019L12.440745,32.472019C11.990769,32.528019 11.530662,32.563999 11.060665,32.563999 4.9503445,32.563999 0,27.804997 0,21.933995 0,16.063998 4.9503445,11.302004 11.060665,11.302004 11.900677,11.302004 12.72079,11.40201 13.510751,11.575014 15.000823,4.9209912 20.241222,8.3675695E-07 26.491566,0z" />
</ListBoxItem>
<ListBoxItem>
<customcontrols:PathControl Content="M44.032538,19.436991L46.035559,20.664995C46.766642,21.111948 46.996969,22.06896 46.546339,22.798928 46.188246,23.393661 45.486426,23.65635 44.843695,23.49366L44.820734,23.486614 44.760626,23.369398C44.336168,22.588939,43.820093,21.865227,43.226896,21.212781L43.137881,21.119438 43.321413,20.826843C43.589335,20.38273,43.827212,19.918489,44.032538,19.436991z M44.82997,13.720987L47.239088,13.785997C48.088778,13.810999 48.76853,14.523084 48.748537,15.381185 48.71855,16.238285 48.008806,16.914367 47.149122,16.890363L44.779986,16.825356C44.849962,16.3543 44.899943,15.875243 44.909941,15.387185 44.929934,14.822118 44.899943,14.267052 44.82997,13.720987z M21.977497,10.773006C26.976931,10.773006 31.206434,14.566032 32.616308,19.785997 33.39625,19.569017 34.216105,19.44298 35.065985,19.44298 40.135477,19.44298 44.245001,23.551007 44.245001,28.616981 44.245001,31.877963 42.535231,34.731965 39.975462,36.358001 38.945551,37.194974 37.645769,37.699002 36.215876,37.710965 35.835917,37.756986 35.455954,37.790006 35.065985,37.790006 34.686022,37.790006 34.316069,37.756986 33.936106,37.712003L10.328789,37.712003C9.948827,37.756986 9.568865,37.790006 9.1788942,37.790006 4.1095211,37.790006 1.9717481E-07,33.840974 0,28.970008 1.9717481E-07,24.098981 4.1095211,20.150987 9.1788942,20.150987 9.8788883,20.150987 10.558744,20.233018 11.208695,20.376023 12.448545,14.856986 16.788141,10.773006 21.977497,10.773006z M45.670187,7.1741316C46.22111,7.1813989 46.750784,7.4820194 47.025496,8.0038509 47.425074,8.7628791 47.135378,9.701914 46.376181,10.099929L44.228449,11.232971C43.858839,10.249934,43.369356,9.3319013,42.75001,8.4998705L44.92771,7.3528278C45.164961,7.2281356,45.419771,7.1708283,45.670187,7.1741316z M22.364184,6.4086061C22.625342,6.4160089,22.888245,6.4901156,23.127493,6.6371107L25.234978,7.9250669C24.984028,8.220556,24.749932,8.5298274,24.53269,8.851454L24.328104,9.1663187 23.911865,9.0885335C23.280842,8.9838928 22.635969,8.9300027 21.980942,8.9300021 21.811247,8.9300027 21.642187,8.933701 21.473829,8.9410375L21.137139,8.9630404 21.059021,8.8642364C20.707878,8.3721137 20.662932,7.6973248 21.000031,7.1490924 21.280943,6.6922345 21.756939,6.4314623 22.25244,6.4095001 22.289602,6.4078531 22.326876,6.4075489 22.364184,6.4086061z M33.789492,5.6309772C33.870619,5.6311283 33.951971,5.6323071 34.033533,5.6345253 39.253584,5.7765265 43.363627,10.121519 43.223623,15.341507 43.179873,16.972441 42.724985,18.495466 41.960894,19.814482L41.873621,19.957062 41.662577,19.791178C39.823569,18.415445 37.541613,17.599988 35.071509,17.599989 34.671488,17.599988 34.271471,17.623987 33.861456,17.668986 32.387953,13.866806 29.602228,11.015687 26.206078,9.7126912L26.036064,9.6513226 26.297627,9.2972018C28.035303,7.0573542,30.754883,5.6253028,33.789492,5.6309772z M40.950159,2.103569C41.247969,2.095583 41.552279,2.1736679 41.825686,2.3465204 42.54479,2.8074622 42.764517,3.7673416 42.295103,4.4892492L40.966757,6.5819864C40.177744,5.9140697,39.298838,5.3531408,38.340037,4.9201951L39.688353,2.8204608C39.975496,2.3692675,40.453802,2.1168785,40.950159,2.103569z M27.495932,1.5621281C28.047716,1.5674677,28.578221,1.8664742,28.853361,2.3876524L30.02396,4.5908751C29.033455,4.9449115,28.112984,5.4329605,27.272556,6.0350218L26.111962,3.8427997C25.711758,3.0837221 25.9919,2.1446285 26.752289,1.7435865 26.98991,1.6179495 27.245119,1.559701 27.495932,1.5621281z M34.100096,0.00037002563C34.126665,-0.00020599365 34.153399,-0.00011253357 34.180281,0.00066947937 35.040442,0.022665024 35.71057,0.73755455 35.690565,1.5934191L35.62055,4.0930305C35.120459,4.0080423 34.600359,3.953052 34.070257,3.940053 33.550162,3.9270558 33.030062,3.9520516 32.519968,4.0090423L32.589979,1.5114326C32.609358,0.68037415,33.276407,0.018217087,34.100096,0.00037002563z" />
</ListBoxItem>
<ListBoxItem>
<customcontrols:PathControl Content="M19.589941,21.452004L29.499502,21.452004 37.799032,35.562995 29.729471,35.562995 37.109123,49.672003 17.060033,29.747993 24.549665,29.747993z M26.491512,0C32.521856,0 37.622147,4.5720005 39.312244,10.865 40.262299,10.603 41.252354,10.451 42.272413,10.451 48.382761,10.451 53.333042,15.401 53.333042,21.507999 53.333042,25.437999 51.282928,28.878998 48.192751,30.840999 46.952681,31.848998 45.372589,32.455998 43.652491,32.468998 43.202465,32.525998 42.742439,32.564999 42.272413,32.564999 41.812386,32.564999 41.36236,32.528998 40.922335,32.472999L38.562201,32.472999 30.771756,19.228999 15.680895,19.228999 20.631178,27.525999 11.670666,27.525999 16.64095,32.472999 12.44071,32.472999C11.990685,32.528998 11.530658,32.564999 11.060631,32.564999 4.9502821,32.564999 0,27.805998 0,21.934999 0,16.062999 4.9502821,11.304 11.060631,11.304 11.900679,11.304 12.720726,11.403 13.510771,11.576 15.000856,4.9220009 20.241155,0 26.491512,0z" />
</ListBoxItem>
<ListBoxItem>
<customcontrols:PathControl Content="M31.348,48.494C32.685356,48.494 33.770001,49.577489 33.770001,50.913598 33.770001,52.249612 32.685356,53.333001 31.348,53.333001 30.013346,53.333001 28.930001,52.249612 28.930001,50.913598 28.930001,49.577489 30.013346,48.494 31.348,48.494z M22.1227,48.494C23.457356,48.494 24.542,49.577489 24.542,50.913598 24.542,52.249612 23.457356,53.333001 22.1227,53.333001 20.785345,53.333001 19.702,52.249612 19.702,50.913598 19.702,49.577489 20.785345,48.494 22.1227,48.494z M35.26405,41.272998C36.60138,41.272998 37.686001,42.357621 37.686001,43.69365 37.686001,45.029576 36.60138,46.113 35.26405,46.113 33.929424,46.113 32.846001,45.029576 32.846001,43.69365 32.846001,42.357621 33.929424,41.272998 35.26405,41.272998z M26.508051,41.272998C27.845278,41.272998 28.930001,42.357621 28.930001,43.69365 28.930001,45.029576 27.845278,46.113 26.508051,46.113 25.173323,46.113 24.09,45.029576 24.09,43.69365 24.09,42.357621 25.173323,41.272998 26.508051,41.272998z M17.2318,41.272998C18.567579,41.272998 19.652001,42.357621 19.652001,43.69365 19.652001,45.029576 18.567579,46.113 17.2318,46.113 15.896121,46.113 14.813,45.029576 14.813,43.69365 14.813,42.357621 15.896121,41.272998 17.2318,41.272998z M44.021054,19.436998L46.029053,20.664867C46.758328,21.111492 46.98745,22.068645 46.540806,22.799085 46.17791,23.393704 45.478031,23.656512 44.837174,23.493527L44.815964,23.486991 44.755482,23.36905C44.331001,22.588596,43.814919,21.86488,43.221752,21.212421L43.130867,21.117109 43.312847,20.826513C43.580288,20.382326,43.817284,19.918125,44.021054,19.436998z M44.828007,13.720999L47.233292,13.786101C48.090233,13.810902 48.76614,14.523125 48.741337,15.381254 48.719235,16.238081 48.005619,16.913905 47.148682,16.890402L44.771996,16.825301C44.846211,16.353886 44.893116,15.874769 44.908718,15.386453 44.92432,14.821335 44.895718,14.266617 44.828007,13.720999z M21.976753,10.773001C26.979286,10.773001 31.208513,14.566015 32.614826,19.786035 33.396027,19.568634 34.218937,19.442332 35.069241,19.442332 40.136975,19.442332 44.245003,23.550448 44.245003,28.616866 44.245003,31.877278 42.539391,34.731389 39.976872,36.357696 38.948166,37.194999 37.640854,37.698899 36.213749,37.710603 35.840042,37.756803 35.459843,37.790002 35.069241,37.790002 34.687737,37.790002 34.312737,37.756803 33.940331,37.7119L10.320378,37.7119C9.942775,37.756803 9.5625736,37.790002 9.1705706,37.790002 4.1054971,37.790002 2.7073101E-07,33.840787 0,28.969668 2.7073101E-07,24.09855 4.1054971,20.150635 9.1705706,20.150635 9.871175,20.150635 10.552179,20.232635 11.208384,20.375936 12.447993,14.856316 16.789219,10.773001 21.976753,10.773001z M45.672386,7.174134C46.223133,7.1814017 46.751801,7.4817498 47.025681,8.0036976 47.424053,8.762845 47.132473,9.7023534 46.374729,10.100129L44.221188,11.232998C43.857914,10.249938,43.361851,9.3319101,42.749996,8.4998286L44.929535,7.352598C45.167145,7.2280803,45.422043,7.1708302,45.672386,7.174134z M22.363896,6.4076095C22.626137,6.4149718,22.889933,6.4890428,23.129202,6.6360126L25.232002,7.9243071C24.983002,8.2199299,24.749006,8.5292008,24.531187,8.8507769L24.325581,9.1660111 23.90588,9.0875378C23.275191,8.9828922 22.630835,8.9289981 21.976551,8.9289984 21.806952,8.9289981 21.637982,8.9326974 21.469708,8.9400355L21.134642,8.961946 21.056421,8.86325C20.704596,8.3712656 20.660401,7.6966183 20.996401,7.148304 21.275526,6.6914134 21.754027,6.4305587 22.251677,6.4085212 22.289,6.4068675 22.326431,6.4065576 22.363896,6.4076095z M33.776642,5.6300144C33.857746,5.6301656 33.939079,5.6313434 34.020622,5.6335616 39.242119,5.7754722 43.354096,10.120625 43.213494,15.340688 43.169556,16.971583 42.715012,18.494635 41.951519,19.813686L41.865544,19.954264 41.657589,19.790779C39.818852,18.414998 37.537552,17.599476 35.068867,17.599476 34.66787,17.599476 34.261574,17.622975 33.857876,17.668475 32.385815,13.866086 29.595959,11.014804 26.199589,9.711732L26.027451,9.6495949 26.288347,9.2962282C28.025217,7.0564322,30.74283,5.6243949,33.776642,5.6300144z M40.950501,2.1025438C41.249367,2.0946379 41.553959,2.1728296 41.825966,2.345706 42.547425,2.8067083 42.760941,3.7664986 42.298603,4.4892459L40.963902,6.5819988C40.17614,5.913939,39.294472,5.3526425,38.339997,4.9202757L39.681301,2.8197699C39.9702,2.3680468,40.452393,2.1157179,40.950501,2.1025438z M27.487883,1.5610685C28.038714,1.5662165,28.569157,1.8650618,28.844816,2.3860846L30.014,4.5899091C29.027098,4.9434433,28.105391,5.4317431,27.266875,6.033999L26.101694,3.8418369C25.700634,3.0827036 25.989704,2.1438856 26.746128,1.7428083 26.982916,1.6170683 27.237505,1.5587282 27.487883,1.5610685z M34.094422,0.00037670135C34.120896,-0.00020503998 34.147526,-0.00011539459 34.174298,0.00065898895 35.032345,0.022751808 35.706803,0.73763561 35.683403,1.593688L35.615608,4.0929995C35.11044,4.0083418 34.593571,3.9536633 34.066303,3.9406538 33.541535,3.9269848 33.023365,3.952373 32.512997,4.0096216L32.580693,1.5110502C32.603359,0.67979717,33.273724,0.018374443,34.094422,0.00037670135z" />
</ListBoxItem>
</ListBox>

After that, also add a Pivotl control to the page, but don't add a HeaderTemplate! We don't need one, because our ImageBar list box will act as one. We need as many PivotItems as ImageBar images, because each image represents one PivotItem.

<controls:Pivot x:Name="ContentPivot"
Grid.Row="1"
Margin="0,-12,0,0">
<controls:PivotItem>
<StackPanel>
<TextBlock Text="RAIN" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
<RichTextBox Margin="0,12,0,0">
<Paragraph>
<Run>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet interdum dolor. In ornare vulputate nulla, eu scelerisque quam luctus eget. Aenean pharetra quam id risus suscipit, et mattis massa tincidunt. Nunc euismod convallis sem sit amet tristique. Nam tempus venenatis dolor. Nam urna diam, rhoncus at imperdiet non, ultrices eget libero. Cras volutpat metus in purus fringilla, nec porttitor est volutpat. Vestibulum sollicitudin lorem nulla, at tempor elit pellentesque eu. Donec porta, eros eu hendrerit porttitor, ipsum nunc sodales lacus, et cursus diam arcu vel enim. Sed rutrum urna erat, a elementum arcu hendrerit vitae. Morbi ante turpis, vulputate sit amet nisi vel, pharetra pellentesque lorem. Morbi scelerisque luctus eleifend. Sed varius vel odio id tristique. Cras a sem nec magna placerat elementum sollicitudin eget mi.
</Run>
</Paragraph>
</RichTextBox>
</StackPanel>
</controls:PivotItem>
<controls:PivotItem>
<StackPanel>
<TextBlock Text="CLOUDY" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
<RichTextBox Margin="0,12,0,0">
<Paragraph>
<Run>
Sed bibendum vehicula quam. Mauris id massa non erat vehicula feugiat id eget nibh. Donec quis neque in lorem pellentesque feugiat at ac tortor. Suspendisse pulvinar justo et fermentum hendrerit. Morbi sed dolor at mauris tempus blandit eget non neque. Maecenas lobortis varius diam, ut pharetra mi vestibulum eu. Vivamus ornare ut est nec dapibus. Duis ultrices in dui sit amet luctus. Pellentesque pretium, mauris vel porta vehicula, ipsum felis ullamcorper nibh, sed fermentum nibh libero a erat. In volutpat lorem cursus risus hendrerit, et imperdiet lorem consectetur. Mauris eu urna in leo tempus convallis et cursus neque. Donec at lacinia eros, ac gravida magna. Praesent enim mauris, tempor nec pharetra at, lobortis sed nulla.
</Run>
</Paragraph>
</RichTextBox>
</StackPanel>
</controls:PivotItem>
<controls:PivotItem>
<StackPanel>
<TextBlock Text="STORM" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
<RichTextBox Margin="0,12,0,0">
<Paragraph>
<Run>
Integer eget molestie lacus. Nam facilisis purus sed vehicula rutrum. Integer auctor imperdiet lectus a ultricies. Vivamus erat magna, feugiat et cursus nec, feugiat id enim. Aliquam tempus, turpis sed gravida pretium, sapien arcu commodo massa, ut congue tellus urna eu magna. Sed ligula tellus, consectetur et ornare id, porttitor congue libero. Morbi justo neque, varius ac commodo a, fermentum a arcu. Integer lectus mi, ultrices nec dui cursus, molestie dictum quam. Pellentesque mollis, eros at blandit vulputate, arcu massa tincidunt risus, at tempor urna metus at nulla. Morbi ultricies sem metus, at aliquet purus faucibus sed.
</Run>
</Paragraph>
</RichTextBox>
</StackPanel>
</controls:PivotItem>
<controls:PivotItem>
<StackPanel>
<TextBlock Text="DRIZZLE" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold"/>
<RichTextBox Margin="0,12,0,0">
<Paragraph>
<Run>
Phasellus molestie volutpat ante pulvinar convallis. Suspendisse tincidunt ante quis arcu dignissim, nec condimentum nisi ultrices. Nulla ac arcu ultrices ipsum euismod pretium. Cras euismod tristique leo volutpat consequat. Maecenas porta aliquet sodales. Nulla lacinia sed lectus id interdum. Quisque mauris sem, commodo eu ultricies eget, mollis id velit. Donec non leo in justo ultrices congue. Etiam mattis, justo sit amet feugiat eleifend, turpis libero tempus risus, sit amet pellentesque nisl diam sit amet elit. Nulla sit amet nunc eu turpis vehicula fermentum.
</Run>
</Paragraph>
</RichTextBox>
</StackPanel>
</controls:PivotItem>
</controls:Pivot>

Note.pngNote: Important thing to note is the SelectedIndex property on the ImageBar control! It's bound to the SelectedIndex of the Pivot control in 2 way mode. By doing this, these 2 controls their SelectedIndex will stay in sync!

What we now need to do, is making the icons change colour when you select one from the ImageBar. This is done by giving the ListBox an ItemContainerStyle in which we are going to use the visual states of the ListBox to set the colour when an item is selected. In our example we use the PhoneAccentColor for the selected state and PhoneInactiveColor for the unselected state.

<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"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource PhoneInactiveColor}" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="{StaticResource PhoneInactiveColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource PhoneAccentColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource PhoneAccentColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

When you try this in your own application, you will notice that a specific element is missing in the XAML mentioned above. This is the custom control called PathControl. It's actually a ContentTemplate wrapper around a Path control, but this needed to allow the use of the Foreground property defined in the ListBoxItemStyle. Because by default the Path control doesn't have a Foreground property, but uses the Fill property to set it's colour. With this custom PathControl we transfer the value of the Foreground property to the Fill property so that all styling is working. We do a similar transfer for the Content property, this needs to be moved to the Data property of the actual Path control.

public class PathControl : ContentControl
{
public PathControl()
{
DefaultStyleKey = typeof(PathControl);
}
}
<Style TargetType="controls:PathControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:PathControl">
<Grid>
<Path Data="{TemplateBinding Content}"
Fill="{TemplateBinding Foreground}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

But still, when you would run this, each icon will stick to the next, we need to divide them evenly! You could calculate this and add margins… But in our example we again use a special user control. This one is derived from Panel, called SplitPanel and we use this as ItemsPanelTemplate on the ListBox. It will do the width calculation and add the needed space so that each listbox item takes up equally space along the page.

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
Size finalSize = new Size { Width = availableSize.Width };
 
if (this.Children.Count != 0)
availableSize.Width /= (double)this.Children.Count;
 
foreach (var current in this.Children)
{
current.Measure(availableSize);
 
Size 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)
{
Rect finalRect = new Rect(new Point(), arrangeSize);
double width = arrangeSize.Width / this.Children.Count;
 
foreach (var child in this.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;
}
}

With all this in place you should have a nice looking twitter mimicking app!

Video demo

<mediaplayer width='300' height='500'>http://www.youtube.com/watch?v=XrtPMQjgu2I</mediaplayer>

Downloads

A complete working solution can be downloaded here: File:PivotWithPathControl.zip

This page was last modified on 24 September 2013, at 23:58.
493 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×