如何将图像转换为路径

时间:2013-11-27 02:51:55

标签: xaml windows-phone-7 windows-phone-8

我想要在应用中测试一个很酷的功能,我处于停滞状态。在引用http://developer.nokia.com/Community/Wiki/Tabbed_interface_with_Pivot_animation_for_Windows_Phone时,我想知道如何将自己的图像用于下面的ImageBar ListBox。我在ListBox中放置了一些来自Windows Phone 8 SDK的标准图标,似乎在引用教程时它们必须是路径。在教程中,我没有在任何地方看到任何图像文件。任何建议,信息或帮助将不胜感激。

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

注意,我引用了http://www.kunal-chowdhury.com/2011/08/how-to-convert-rectangle-to-path.html但是文章Select the Rectangle and go to the Menu called “Object” –> “Path” –> “Convert to Path”中所述的转换为Expression Blend中的路径的选项不可用。要注意,我的图片图标为.png格式,在进一步研究时,我发现http://social.msdn.microsoft.com/Forums/silverlight/en-US/f6620a73-baf3-4f17-a46f-6669b75efb63/convert-icons-into-paths?forum=silverlightnet表示您无法将.png转换为path

1 个答案:

答案 0 :(得分:0)

您无法将.png(或像素)图像转换为路径。对于xaml转换,必须使用矢量图像作为源。

以下是相同的解决方案,请参阅以下链接。

希望有所帮助