Question

我最近看到了适用于Windows Phone的新Instagram应用程序，并想知道他们如何将他们的PivotControl模板化为如下所示

enter image description here

我之前做了一些修改，例如How to Remove the Pivot Header but Keep Functionality和How to Change Pivot Header Template in Windows Phone 8作为练习，但我认为这些图标更具独特感。我特别想知道的一些事情是;他们是如何将边距（高度）更改为比标准的Pivot Headers小得多，他们是如何获得图标来滚动和突出显示而不是名称，他们是如何将标题放在图标旁边的？

EDIT ***

在以下http://developer.nokia.com/Community/Wiki/Tabbed_interface_with_Pivot_animation_for_Windows_Phone中，我对他们如何在MainPage.xaml中创建图像和路径感到困惑。相反，我用Windows Phone 8 SDK附带的一些标准图标替换了它们的路径，但我不确定在选择时会改变颜色。

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

Answer 1

这是一个指南，如何在诺基亚Wiki上实现类似的标签式数据透视图：
Tabbed interface with Pivot animation for Windows Phone

Answer 2

这些不是pivot headers。它们似乎就像pivot headers，因为当您滑动时，图标反馈会发生变化。就像twitter上的Windows Phone应用一样。因此，它们基本上包含pivot，仅包含其中的内容且没有标题。像这样的东西

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

顶部标题是单独的grid，标题Instagram左对齐，四个图标集右对齐。

标题下方有pivot个items。当您向左或向右滑动枢轴时，会调用SelectionChanged事件来确定您当前所在的枢轴。并且基于SelectedItem，它们会更改顶部图标的反馈颜色。

    private void Instapivot_selectionchanged(object sender, SelectionChangedEventArgs e)
    {
        if (InstagramPivot.SelectedItem == HomePivot)
        {
           //change feedback colors for the icons on the grid
        }
    }

另一个有趣的事情是，他们在这4个图标上启用了点按，可能是包含4个项目图标的列表，因此当您点击列表时他们会执行此类操作

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

Answer 3

在pivot标题中，请设置图像，它将像这些Instagram beta应用程序一样工作

如何将Pivot标题作为图标

3 个答案: