locked
Where is the Share symbol?

    Question

  • Windows Phone 8.1 apps (WinRT) have a slew of icon symbols available for use on buttons

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.symbol.aspx

    However, there appears to be no share symbol, what gives? Windows has share on the charms bar, so perhaps it isn't needed there, but Windows Phone doesn't.

    Thursday, August 21, 2014 12:02 PM

Answers

  • Trying again, I realised when specifying a font family in XAML the name of the font must be appended with a hash.

    <FontIcon FontFamily="Modern-UI-Icons---Social.ttf#Modern-UI-Icons---Social" Glyph="&#xe03e;" FontSize="38"/>

    While this works in the designer, it shows as a rectangular block in the emulator and device. I assume its a packaging problem, but don't know enough about the packages at this point.

    I tried using the path data instead for the symbol from modernuiicons.com. Using the data directly the icon is too big and partly outside the icon circle. Scaling the data to exactly 50% appears to give a near perfect result. It looks slightly off at design time but right on the emulator and device.

    <PathIcon Data="M9.5,15.8333501815796L10.7326059341431,16.0822010040283 11.7391624450684,16.7608375549316 12.417799949646,17.7673931121826 12.6666498184204,19 12.3438806533813,20.3944816589355 11.4773998260498,21.4735507965088 12.5435924530029,23.5830497741699 14.164924621582,25.2712364196777 16.2241821289063,26.4213562011719 18.6041507720947,26.9166507720947 18.9603748321533,28.6443309783936 19.9296493530273,30.044900894165 19,30.0833492279053 15.3568725585938,29.470682144165 12.2228689193726,27.7705688476563 9.80480575561523,25.1898326873779 8.30949974060059,21.9353008270264 6.88683748245239,20.7891387939453 6.33335018157959,19 6.582200050354,17.7673931121826 7.26083755493164,16.7608375549316 8.26739406585693,16.0822010040283 9.5,15.8333501815796z M22.5625,7.91664981842041L23.7951068878174,8.16550731658936 24.8016624450684,8.84416198730469 25.4803009033203,9.85073566436768 25.7291507720947,11.0833501815796 25.4803009033203,12.3159561157227 24.8016624450684,13.3225126266479 23.7951068878174,14.0011501312256 22.5625,14.25 21.3320026397705,14.0020399093628 20.3265247344971,13.3256931304932 19.6473712921143,12.3222627639771 19.3958492279053,11.0930500030518 19,11.0833501815796 16.7850570678711,11.3973693847656 14.812331199646,12.2803440093994 13.1704397201538,13.6436462402344 11.9479999542236,15.3986501693726 10.8027877807617,14.844087600708 9.5,14.6458501815796 8.77950000762939,14.7051496505737 10.4377021789551,11.9619245529175 12.7946186065674,9.8153247833252 15.6991004943848,8.41651248931885 19,7.91664981842041 21.33544921875,8.1631498336792 22.5625,7.91664981842041z M22.9583492279053,23.75L24.8265991210938,24.3595504760742 26.3582439422607,21.9262809753418 26.9166507720947,19 26.5216808319092,16.5237808227539 25.4208507537842,14.3680000305176 26.4806880950928,12.9846935272217 26.9139003753662,11.2404499053955 29.2338123321533,14.7369565963745 29.8638172149658,16.7941036224365 30.0833492279053,19 29.8005447387695,21.4986515045166 28.9942054748535,23.7971801757813 27.7274513244629,25.8324699401855 26.0634002685547,27.5414009094238 24.9777317047119,29.3560123443604 24.0503177642822,29.8900337219238 22.9583492279053,30.0833492279053 21.7257347106934,29.8344917297363 20.7191619873047,29.1558380126953 20.0405082702637,28.1492652893066 19.7916507720947,26.9166507720947 20.0405082702637,25.6840438842773 20.7191619873047,24.6774864196777 21.7257347106934,23.9988498687744 22.9583492279053,23.75z"/>

    So if you want a share icon on for WP8.1 WinRT apps, use the PathIcon above.

    • Marked as answer by --Tom-- Sunday, September 28, 2014 12:01 AM
    Sunday, September 28, 2014 12:01 AM

All replies

  • What share symbol do you mean? Can't you use the Add symbol or Mail symbol for example? The other options are to use a glyph: http://msdn.microsoft.com/en-us/library/windows/apps/jj841126.aspx

    ...or a custom Image: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj153346.aspx

    • Marked as answer by Jamles HezModerator Friday, August 29, 2014 11:12 AM
    • Unmarked as answer by --Tom-- Friday, August 29, 2014 12:25 PM
    Thursday, August 21, 2014 12:17 PM
  • What share symbol? Open an image in the Photos app. The first button is share and shows the symbol I'm after.
    Thursday, August 21, 2014 12:29 PM
  • on the phone that would a custom image (the one that looks like the button on the share charm on windows)... I think the default icon that you can use is the "Reshare" enumeration item.

    also the first hit on google :) http://www.rudyhuyn.com/blog/2012/06/30/share-icon-from-windows-8-for-windows-phone/


    Can Bilgin
    Blog Samples CompuSight


    • Edited by Can BilginMVP Thursday, August 21, 2014 5:22 PM
    • Marked as answer by Jamles HezModerator Friday, August 29, 2014 11:12 AM
    • Unmarked as answer by --Tom-- Friday, August 29, 2014 12:25 PM
    Thursday, August 21, 2014 5:21 PM
  • Looking deeper, the Segoe UI font simply doesn't have a share icon defined. The default set of icons doesn't feature a share icon.

    Modern UI (modernuiicons.com) icons has created a font that provides social media glyphs, though plugging this into my project resulted in a square block that indicated to me the glyph character code was wrong...

    Trying the vector path data instead resulted in an icon that was offset and scaled wrong for Windows Phone.

    I don't see a great solution for this at the moment. I don't want to slap any old icon in there because that defeats the purpose.

    • Marked as answer by --Tom-- Friday, August 29, 2014 12:35 PM
    • Unmarked as answer by --Tom-- Sunday, September 28, 2014 12:01 AM
    Friday, August 29, 2014 12:35 PM
  • Trying again, I realised when specifying a font family in XAML the name of the font must be appended with a hash.

    <FontIcon FontFamily="Modern-UI-Icons---Social.ttf#Modern-UI-Icons---Social" Glyph="&#xe03e;" FontSize="38"/>

    While this works in the designer, it shows as a rectangular block in the emulator and device. I assume its a packaging problem, but don't know enough about the packages at this point.

    I tried using the path data instead for the symbol from modernuiicons.com. Using the data directly the icon is too big and partly outside the icon circle. Scaling the data to exactly 50% appears to give a near perfect result. It looks slightly off at design time but right on the emulator and device.

    <PathIcon Data="M9.5,15.8333501815796L10.7326059341431,16.0822010040283 11.7391624450684,16.7608375549316 12.417799949646,17.7673931121826 12.6666498184204,19 12.3438806533813,20.3944816589355 11.4773998260498,21.4735507965088 12.5435924530029,23.5830497741699 14.164924621582,25.2712364196777 16.2241821289063,26.4213562011719 18.6041507720947,26.9166507720947 18.9603748321533,28.6443309783936 19.9296493530273,30.044900894165 19,30.0833492279053 15.3568725585938,29.470682144165 12.2228689193726,27.7705688476563 9.80480575561523,25.1898326873779 8.30949974060059,21.9353008270264 6.88683748245239,20.7891387939453 6.33335018157959,19 6.582200050354,17.7673931121826 7.26083755493164,16.7608375549316 8.26739406585693,16.0822010040283 9.5,15.8333501815796z M22.5625,7.91664981842041L23.7951068878174,8.16550731658936 24.8016624450684,8.84416198730469 25.4803009033203,9.85073566436768 25.7291507720947,11.0833501815796 25.4803009033203,12.3159561157227 24.8016624450684,13.3225126266479 23.7951068878174,14.0011501312256 22.5625,14.25 21.3320026397705,14.0020399093628 20.3265247344971,13.3256931304932 19.6473712921143,12.3222627639771 19.3958492279053,11.0930500030518 19,11.0833501815796 16.7850570678711,11.3973693847656 14.812331199646,12.2803440093994 13.1704397201538,13.6436462402344 11.9479999542236,15.3986501693726 10.8027877807617,14.844087600708 9.5,14.6458501815796 8.77950000762939,14.7051496505737 10.4377021789551,11.9619245529175 12.7946186065674,9.8153247833252 15.6991004943848,8.41651248931885 19,7.91664981842041 21.33544921875,8.1631498336792 22.5625,7.91664981842041z M22.9583492279053,23.75L24.8265991210938,24.3595504760742 26.3582439422607,21.9262809753418 26.9166507720947,19 26.5216808319092,16.5237808227539 25.4208507537842,14.3680000305176 26.4806880950928,12.9846935272217 26.9139003753662,11.2404499053955 29.2338123321533,14.7369565963745 29.8638172149658,16.7941036224365 30.0833492279053,19 29.8005447387695,21.4986515045166 28.9942054748535,23.7971801757813 27.7274513244629,25.8324699401855 26.0634002685547,27.5414009094238 24.9777317047119,29.3560123443604 24.0503177642822,29.8900337219238 22.9583492279053,30.0833492279053 21.7257347106934,29.8344917297363 20.7191619873047,29.1558380126953 20.0405082702637,28.1492652893066 19.7916507720947,26.9166507720947 20.0405082702637,25.6840438842773 20.7191619873047,24.6774864196777 21.7257347106934,23.9988498687744 22.9583492279053,23.75z"/>

    So if you want a share icon on for WP8.1 WinRT apps, use the PathIcon above.

    • Marked as answer by --Tom-- Sunday, September 28, 2014 12:01 AM
    Sunday, September 28, 2014 12:01 AM