How to make the Pivot Headers as Icons - xaml
I recently saw the new Instagram app for Windows Phone, and was wondering how exactly they template their PivotControl to look like the following
I've done a few modifications before such as in How to Remove the Pivot Header but Keep Functionality and How to Change Pivot Header Template in Windows Phone 8 as practice, but I think the icons are much more a unique feel. A few things I am wondering in particular are; How did they change the margins (height) to be so much smaller than the standard Pivot Headers, how did they get icons to scroll and highlight as opposed to the names, and how did they place the title beside the icons?
EDIT***
In following http://developer.nokia.com/Community/Wiki/Tabbed_interface_with_Pivot_animation_for_Windows_Phone I am confused on how they created the Images and the Paths within MainPage.xaml. Instead I replaced their paths with some standard icons that come with the Windows Phone 8 SDK, but I'm not sure to get the colors to change when selected.
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="PIVOT PATH HEADERS" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<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" />-->
<Image Source="/Assets/feature.camera.png"/>
</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" />-->
<Image Source="/Assets/edit.png"/>
</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" />-->
<Image Source="/Assets/feature.settings.png"/>
</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" />-->
<Image Source="/Assets/favs.png"/>
</ListBoxItem>
</ListBox>
<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>
</Grid>
</Grid>
Here's a guide, how to implement similar tabbed pivot on Nokia Wiki:
Tabbed interface with Pivot animation for Windows Phone
These are not pivot headers. They just seem to be like pivot headers because when you swipe, the icons feedback change. Just like twitter app on Windows Phone.
So, they have basically included a pivot, only with the content in it and no headers. Something like this
<controls:Pivot Name="InstagramPivot" SelectionChanged="Instapivot_selectionchanged">
<controls:PivotItem x:Name="HomePivot" Height="auto" VerticalAlignment="Top" Margin="0,0,0,0">
</controls:PivotItem>
....
</controls:Pivot>
The top header is a separate grid with the heading Instagram aligned to left and your four icon set aligned to right.
Below the heading you have a pivot with 4 items. When you swipe the pivot to left or right, SelectionChanged event gets called which determines which pivot you are currently on. And based on the SelectedItem, they change the feedback colors of the icons on the top.
private void Instapivot_selectionchanged(object sender, SelectionChangedEventArgs e)
{
if (InstagramPivot.SelectedItem == HomePivot)
{
//change feedback colors for the icons on the grid
}
}
One more interesting thing to note is that they have tap enabled on those 4 icons, maybe a list with 4 items as icons, so when you tap on the list they do something like this
private void IconsListTap(object sender, System.Windows.Input.GestureEventArgs e)
{
if (this.Iconlist.SelectedItem == homeIcon)
{
InstagramPivot.SelectedItem = HomePivot; //this then calls the `SelectionChanged` event which does all your work of pivot SelectionChanged
}
}
In pivot header kindly set the image it will work like these instagram beta app
Related
Custom card listbox like google now
I am searching a way to do a custom listbox for windows phone 7.1 like google now cards. The effect is simple: Two columns. Next card will be as top as possible. If column 1 is 100px high and column 2 is 170 px then the next card will be in column 1. I tried WrapPanel but it aligns the top of each row. So the option is to build a custom listbox (or get one already done). Obviusly, I cant make an 'infinite' view and adding views to it, but I guess that will no be very efficient. Thank you!
I will add another answer since the code has changed:
public class ViewModel : INotifyPropertyChanged
{
private Random rnd = new Random(DateTime.Now.Millisecond);
public ViewModel()
{
Items = new List<DataItem>()
{
new DataItem()
{
Title = "Title 1",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Green),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 2",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Blue),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 3",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Purple),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 4",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 5",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Gray),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 6",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Green),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 7",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 8",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Magenta),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 9",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Orange),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 10",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Purple),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 11",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 12",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Red),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
};
}
public List<DataItem> Items
{
set
{
int List1Height = 0;
int List2Height = 1; // set to 1 so first item will end up in List1
Items1 = new List<DataItem>();
Items2 = new List<DataItem>();
foreach (DataItem dataItem in value)
{
if (List1Height < List2Height)
{
Items1.Add(dataItem);
List1Height += dataItem.Height;
}
else
{
Items2.Add(dataItem);
List2Height += dataItem.Height;
}
}
}
}
private List<DataItem> _items1;
public List<DataItem> Items1
{
get { return _items1; }
set
{
_items1 = value;
OnPropertyChanged("Items1");
}
}
private List<DataItem> _items2;
public List<DataItem> Items2
{
get { return _items2; }
set
{
_items2 = value;
OnPropertyChanged("Items2");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
public class DataItem
{
public string Title { get; set; }
public int Height { get; set; }
public SolidColorBrush Color { get; set; }
public string Content { get; set; }
}
The most significant change is adding a property called "Items". When this property is set, the items are added to one of two lists, depending on which one is shorter at the moment the item is added. There is no getter since we are not binding to this property.
I also added some color and random height for testing purposes, cleaned up the XAML a bit to make the contents clearer as well as added INotifyPropertyChanged support so when the Items property is set and it adds the items to the 2 lists, the UI will update automatically.
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="10">
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items1}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding Height}" Margin="5" Background="{Binding Color}" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap" Margin="5"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl >
</StackPanel>
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items2}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding Height}" Margin="5" Background="{Binding Color}" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap" Margin="5"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
Notice items 3-6 and how 4 and 5 are stacked together in the same column.
I realize my answer does not meet your need for a single automatic way of flowing the items into one of 2 columns. it does, however, appear to satisfy the desired result: a 2 column scrolling list where the items flow into the shortest column.
The next step for you, if you really do need it as a control, is to make it into either a UserControl, or a CustomControl. Which one depends on your skill and the amount of work you are willing to put into it.
A good comparison of the 2 can be found here: http://www.geekchamp.com/articles/user-control-vs-custom-control-in-silverlight-for-wp7
Here is an example using data binding to a viewmodel. It uses ItemsPanel to stack the items in the Horizontal StackPanel:
Code Behind:
using System.Collections.Generic;
using Microsoft.Phone.Controls;
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
public ViewModel ViewModel { get; set; }
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
ViewModel = new ViewModel();
DataContext = ViewModel;
}
}
public class ViewModel
{
public ViewModel()
{
Items1 = new List<DataItem>()
{
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
};
Items2 = new List<DataItem>()
{
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
};
}
public List<DataItem> Items1 { get; set; }
public List<DataItem> Items2 { get; set; }
}
public class DataItem
{
public string Title { get; set; }
public string Content { get; set; }
}
}
AND the actual XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="10">
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items1}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="333" Margin="5" Background="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl >
</StackPanel>
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items2}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="200" Margin="5" Background="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
You should use a ScrollViewer with some StackPanels inside: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer Margin="10"> <StackPanel Orientation="Horizontal"> <StackPanel Orientation="Vertical" Width="210"> <Grid Height="200" Margin="5" Background="Blue" /> <Grid Height="200" Margin="5" Background="Blue" /> <Grid Height="200" Margin="5" Background="Blue" /> <Grid Height="200" Margin="5" Background="Blue" /> <Grid Height="200" Margin="5" Background="Blue" /> </StackPanel> <StackPanel Orientation="Vertical" Width="210"> <Grid Height="300" Margin="5" Background="Blue" /> <Grid Height="300" Margin="5" Background="Blue" /> <Grid Height="300" Margin="5" Background="Blue" /> <Grid Height="300" Margin="5" Background="Blue" /> </StackPanel> </StackPanel> </ScrollViewer> </Grid> You would likely put something inside the inner stack panels (instead of the Grids I used as a sample) to allow you to bind data items to a template, but the listed ScrollViewer/StackPanel solution will get you started in the right direction.
How do I get text to surround an image?
I want to place an image in the top left corner of the paragraph, and I want the text to flow beside and underneath it, like you would see in Microsoft Word for example. Is this possible?
The best I could get was this, it does it on the first line only. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <RichTextBox VerticalAlignment="Top" HorizontalAlignment="Left"> <Paragraph> <InlineUIContainer> <Image Source="/Assets/ApplicationIcon.png" Stretch="None" /> </InlineUIContainer> <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in adipiscing est, quis varius turpis. Duis aliquet fringilla orci a porttitor. Sed posuere, risus ut auctor tincidunt, erat leo pellentesque enim, sit amet tempus mi tellus id nunc. Suspendisse at fermentum erat, vitae viverra nisi. Proin vitae volutpat mauris. Nulla et ipsum non felis commodo sollicitudin. Proin et posuere sem, et aliquet purus. Etiam lacus nisi, fringilla non orci sit amet, semper luctus dolor." /> </Paragraph> </RichTextBox> </Grid> Windows Phone is missing Figure type which exactly does that : http://msdn.microsoft.com/en-us/magazine/cc163371.aspx It might be achievable if reverse-engineering Run and/or Figure types ...
How to Convert an Image to a Path
I am at a standstill with a cool feature I would like to test in an app. In referencing http://developer.nokia.com/Community/Wiki/Tabbed_interface_with_Pivot_animation_for_Windows_Phone I would like to know how to use my own images for the ImageBar ListBox below. I placed a few standard icons from the Windows Phone 8 SDK in the ListBox, and it seems in referencing the tutorial they must be paths. In the tutorial I did not see any image files anywhere. Any advice, information, or assistance would be greatly appreciated.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="PIVOT PATH HEADERS" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<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" />-->
<Image Source="/Assets/feature.camera.png"/>
</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" />-->
<Image Source="/Assets/edit.png"/>
</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" />-->
<Image Source="/Assets/feature.settings.png"/>
</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" />-->
<Image Source="/Assets/favs.png"/>
</ListBoxItem>
</ListBox>
<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>
</Grid>
Note, I have referenced http://www.kunal-chowdhury.com/2011/08/how-to-convert-rectangle-to-path.html but the option to Convert to Path in Expression Blend as stated in the article Select the Rectangle and go to the Menu called “Object” –> “Path” –> “Convert to Path”is not available. To note, my image icons are .png format, and in researching further I came across http://social.msdn.microsoft.com/Forums/silverlight/en-US/f6620a73-baf3-4f17-a46f-6669b75efb63/convert-icons-into-paths?forum=silverlightnet that states you cannot convert a .png to a path?
You cannot convert .png (or pixels) image to path. For the xaml conversion have to use a vector image as a source. Here is a solution for the same see the following link. Converting images to paths The easiest way to convert vector graphics to XAML Hope it helps
Kivy ScrollView for paragraphs of text
I am unable to get ScrollView in Kivy to scroll through paragraphs of text. I have attached a code example below. Can anyone state what is wrong? Thank you.
import kivy
import string
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
class longTextLabelApp(App):
def build(self):
scrollViewLayout = ScrollView(do_scroll_x=False)
childLayout = GridLayout(cols = 1, size_hint_x = 1, size_hint_y = None)
childLayout.bind(minimum_height=childLayout.setter('height'))
def longTextLabel():
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
myLabel = Label(text = reallyLongText, text_size = (700,None), line_height=1.5)
return myLabel
childLayout.add_widget(longTextLabel())
scrollViewLayout.add_widget(childLayout)
return scrollViewLayout
if __name__ == '__main__':
longTextLabelApp().run()
The default size of a Label (and Widget) is (100,100). It doesn't matter if you are seeing all the text on the screen. If you print myLabel.size you will realize of this. You need to be sure to set the height of the Label (myLabel.height: 2200) but first set the size_hint_y to None first (myLabel.size_hint_y=None). The following code should work:
import kivy
import string
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
from kivy.graphics import Rectangle, Color
class longTextLabelApp(App):
def build(self):
scrollViewLayout = ScrollView(do_scroll_x=False)
childLayout = GridLayout(cols = 1, size_hint_x = 1, size_hint_y = None)
childLayout.bind(minimum_height=childLayout.setter('height'))
def longTextLabel():
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
myLabel = Label(text = reallyLongText, text_size = (700,None), line_height=1.5)
print "The label size is ", myLabel.size
myLabel.size_hint_y = None
myLabel.height = 2200
return myLabel
childLayout.add_widget(longTextLabel())
scrollViewLayout.add_widget(childLayout)
return scrollViewLayout
if __name__ == '__main__':
longTextLabelApp().run()
EDIT - RST Document
Depending on your objectives it might be better to use a RSTDocument. Label are just that, labels. They don't adjust to content or text. Think of them as stickers. The (RSTDocment)[http://kivy.org/docs/api-kivy.uix.rst.html], still indicated as highly experimental though is more suitable for long texts, specially if they are dynamic. They actually includes the Scroll.
from kivy.app import App
from kivy.uix.rst import RstDocument
class RstDocumentApp(App):
def build(self):
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
return RstDocument(text = reallyLongText)
if __name__ == '__main__':
RstDocumentApp().run()
You can set the Label to be of the size of the texture inside it like this.
FloatLayout:
Label:
# adding a background to see the amount of space the label takes
canvas.before:
Color:
rgba: .5, .5, .5, .5
Rectangle:
size: self.size
pos: self.pos
text: "How can the only thing constant in the universe be `change` when\nchange itself is by it's very nature `not constant`?"
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: None, None
size: self.texture_size
However with this you would only get a label that just expands how much text is in it and would require you to add \n yourself to make it wrap. A better approach would be to let the text inside the label auto wrap at a certain width by setting text_size something like the following::
FloatLayout:
ScrollView:
# take half of parents size
size_hint: .5, .5
pos_hint: {'center_x': .5, 'center_y': .5}
Label:
canvas.before:
Color:
rgba: .5, .5, .5, .5
Rectangle:
size: self.size
pos: self.pos
text: "\n1. Two hunters are out in the woods when one of them collapses. He doesn't seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, `My friend is dead! What can I do?`\n\n The operator says `Calm down. I can help. First, let's make sure he's dead.`\n\n There is a silence, then a gun shot is heard. Back on the phone, the guy says `OK, now what?`\n\n\n2. Sherlock Holmes and Dr Watson were going camping. They pitched their tent under the stars and went to sleep. Sometime in the middle of the night Holmes woke Watson up and said:\n\n `Watson, look up at the sky, and tell me what you see.`\n\n Watson replied: `I see millions and millions of stars.`\n\n Holmes said: `And what do you deduce from that?`\n\n Watson replied: `Well, if there are millions of stars, and if even a few of those have planets, it’s quite likely there are some planets like Earth out there. And if there are a few planets like Earth out there, there might also be life.`\n\n And Holmes said: `Watson, you idiot, it means that somebody stole our tent.`\n\n\n3. Three women talk about their husband is performance as lovers.\n\nThe first woman says, `My husband is a marriage counselor, so he always buys me flowers and candy before we make love.`\n\nThe second woman says, `My husband is a motorcycle mechanic. He likes to play rough and use leather sometimes.`\n\nThe third woman shakes her head and says, `My husband works for an Internet company. He just sits on the edge of the bed and tells me how great it's going to be when I get it.` \n\n\n4. As within, so outside. Fractals equations show the possibility of having infinity within minutia. Each and every cell can be a image of the whole; merging the micro and the macro into one.\n"
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: 1, None
text_size: self.width, None
height: self.texture_size[1]
How to set left margin in PowerPoint textbox using VSTO
I'm taking some user data and adding it to a PowerPoint presentation using VSTO. To get the formatting to look right, though I need to be able to set the left margin of some of the text in the textbox. There will be an initial block of text followed by another, indented block. For example (underlines added to emphasize spacing): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum elementum neque id rhoncus. In fermentum eros nec dolor lobortis sit amet fermentum est consequat. Curabitur eleifend nunc eu odio vehicula ut elementum erat aliquam. Ut adipiscing ipsum sit amet leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla non neque in velit lacinia tempor et a lacus. ___________Cras auctor bibendum urna, a facilisis lacus lacinia non. ___________Nullam at quam a mauris consequat vulputate sed eu sapien. ___________Fusce sed urna nulla, ut sagittis lacus. Pellentesque tortor ___________augue, scelerisque at aliquet a, pretium ac ipsum. I can get this effect by setting Shape.TextFrame.TextRange.IndentLevel = 2 on the lower block of text. However, I cannot figure out how to programmatically set the value of the margin. Does anyone know how to do this?
This is taken care of via Shape.TextFrame.MarginRight and Shape.TextFrame.MarginLeft and the like.