none
[UWP][Desktop Bridge]unplated taskbar icons in Desktop Bridge apps RRS feed

  • Question

  • Desktop Bridge apps have plated icons. This is probably a bad default, and somehow after trying for many hours I have not found a way to get around that. How do we get unplated taskbar icons in UWP Desktop apps?
    • Edited by Barry Wang Friday, November 25, 2016 3:22 AM title tag
    Thursday, November 17, 2016 4:06 PM

Answers

  • Hi Reinhard,

    In order to create the unplated taskbar icons for the Desktop Converter app, we need to manually build the resources.pri file and include it in the package, for more information, please check the following steps:

    1) Please obtain the correct 44x44 images and copy them into the folder that contains your image, for example Assets folder.

    2) For every 44x44 images, you need to create a copy of the image in the same folder and append: “.targetsize-44_altform-unplated” to the filename and it seems that you have already done it:
    

    3) Please open your AppXManifest, for every icon that you are fixing, you need to set the BackgroundColor to transparent:

     <uap:VisualElements DisplayName="VLCUWPApp" Description="VLCUWPApp" BackgroundColor="transparent"
    Square150x150Logo="Assets\SampleAppx.150x150.png" Square44x44Logo="Assets\Square44x44Logo.png" />

    4)Please open CMD, change directory to the package’s root folder, and create a priconfig.xml file:

    makepri createconfig /cf priconfig.xml /dq en-US

    In order to make it more easy, I have copied the makpri.exe from here(C:\Program Files (x86)\Windows Kits\10\bin\x64) into the PackageFiles folder of the DesktopAppConverter, after execute the above commend, the priconfig.xml will be in the PackageFiles:


    5) Using CMD, staying in the package’s root folder and create the resources.pri file(s):

    makepri new /pr <PHYSICAL_PATH_TO_FOLDER> /cf <PHYSICAL_PATH_TO_FOLDER>\priconfig.xml

    Example:

    makepri new /pr C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles /cf C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles\priconfig.xml

    After that please repack it as appx by using the following command:

    makeappx pack -d "C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles" -p "C:\VLCUWP\VLCUWPApp\VLCUWPApp\VLCUWPApp.appx"

    At last, it works fine:


    Best Regards,
    Amy Peng

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Tuesday, November 29, 2016 5:46 AM
    Owner

All replies

  • e.g. Kodi and Evernote from the Windows Store. The Kodi icon looks pretty ugly when plated, and the evernote guys clearly tried to get resource scaling and unplated apps to work, but it doesn't actually work. There's something different about Desktop Bridge apps cause it works out of the box for normal UWP apps.
    Thursday, November 17, 2016 4:08 PM
  • Hello Reinhard Pointner,

    Can you share us a image to tell us the problem. I've checked the Evernote and it seems to me it looks all right:

    Do you mean it should extend the whole content or do you mean the scaling is not right?

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, November 18, 2016 10:36 AM
  • Hi Berry,

    Sorry for the late reply, I was waiting for the store to publish my app.

    Here's the app: https://www.microsoft.com/en-us/store/p/filebot/9nblggh52t9x

    Here's a promo code: WJGKK-C749J-C9MQD-H74WQ-PDKQZ

    I've tried everything I can think of (see AppxManifest.xml and Assets) to get rid of the accent-color border, but it's always showing the plated icon:

    <no image because my account is not verified>

    (Evernote was a bad example, because the background color of the icon is the same as the accent color, so it's hard to see that it's not using the unplated icon)

    I'd prefer unplated taskbar icons if possible:

    <no image because my account is not verified>

    (like with file explorer or traditional windows applications)

    If I pass in scaled resource those also don't seem to work. For example if I specify Assets/logo.png in the AppxManifest then it should be using logo.scale-100.png as far as I know and not care if Assets/logo.png even exists or not, but in all my tests the icon will just be empty (unless I specifically add Assets/logo.png a well).

    Cheers,

    Reinhard




    Wednesday, November 23, 2016 12:24 PM
  • Hello Reinhard,

    To verify your account please post here.

    This is what I get:

    And actually I recommend you check this thread from Fred:

    https://social.msdn.microsoft.com/Forums/silverlight/en-US/59669cac-579b-45f2-96dc-d3793cd1a2c0/uwp-how-can-we-make-taskbar-tiles-without-background?forum=wpdevelop

    For this taskbar in UWP app, we are using this Square44x44Logo and we can modify to make sure that it looks the same like the default UWP Mail app. Please give it a try. 

    If this is still not what you want please verify your account and I will see if I can see your icons for more details.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, November 25, 2016 3:21 AM
  • Yes,

    I want something like this:

    https://s15.postimg.org/u1bqk50e3/2016_11_23_20_07_55.png

    But I get this:

    https://s15.postimg.org/mwtxb3t4r/2016_11_23_20_07_12.png

    In my AppxManifest VisualElement I have this:

    Square44x44Logo="Assets\Square44x44Logo.png"

    In my Assets folder I already have all the additional files:

    Assets\Square44x44Logo.targetsize-44.png
    Assets\Square44x44Logo.targetsize-44_altform-unplated.png
    Assets\Square44x44Logo.targetsize-48.png
    Assets\Square44x44Logo.targetsize-48_altform-unplated.png

    This is already implemented in the latest published release of FileBot, but as you can see it's not working.

    It seems to work for new UWP .NET applications, but somehow the same AppxManifest & Assets do not work for Desktop applications packaged with the makeappx tool. It's very strange indeed.

    Friday, November 25, 2016 8:20 AM
  • @ Reinhard Pointner,

    Thank you for your feedback with details. Now I know what happens and  it might be a known issue. But I'm not sure about this yet, I will help you confirm this from my internal channel. Please wait for my response.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Sunday, November 27, 2016 4:56 AM
  • Hi Reinhard,

    In order to create the unplated taskbar icons for the Desktop Converter app, we need to manually build the resources.pri file and include it in the package, for more information, please check the following steps:

    1) Please obtain the correct 44x44 images and copy them into the folder that contains your image, for example Assets folder.

    2) For every 44x44 images, you need to create a copy of the image in the same folder and append: “.targetsize-44_altform-unplated” to the filename and it seems that you have already done it:
    

    3) Please open your AppXManifest, for every icon that you are fixing, you need to set the BackgroundColor to transparent:

     <uap:VisualElements DisplayName="VLCUWPApp" Description="VLCUWPApp" BackgroundColor="transparent"
    Square150x150Logo="Assets\SampleAppx.150x150.png" Square44x44Logo="Assets\Square44x44Logo.png" />

    4)Please open CMD, change directory to the package’s root folder, and create a priconfig.xml file:

    makepri createconfig /cf priconfig.xml /dq en-US

    In order to make it more easy, I have copied the makpri.exe from here(C:\Program Files (x86)\Windows Kits\10\bin\x64) into the PackageFiles folder of the DesktopAppConverter, after execute the above commend, the priconfig.xml will be in the PackageFiles:


    5) Using CMD, staying in the package’s root folder and create the resources.pri file(s):

    makepri new /pr <PHYSICAL_PATH_TO_FOLDER> /cf <PHYSICAL_PATH_TO_FOLDER>\priconfig.xml

    Example:

    makepri new /pr C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles /cf C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles\priconfig.xml

    After that please repack it as appx by using the following command:

    makeappx pack -d "C:\VLCUWP\VLCUWPApp\VLCUWPApp\PackageFiles" -p "C:\VLCUWP\VLCUWPApp\VLCUWPApp\VLCUWPApp.appx"

    At last, it works fine:


    Best Regards,
    Amy Peng

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Tuesday, November 29, 2016 5:46 AM
    Owner
  • Thanks! I was completely unaware of the makepri step!

    I won't be able to test this for the next 2 weeks, but once I can I'll try and let you know once I get it working.

    Wednesday, November 30, 2016 11:20 PM
  • Yes, now that I'm doing `makepri` it all works perfectly! Thank you!
    Wednesday, December 14, 2016 6:06 AM
  • This is super confusing and just doesn't work for me.

    I have the following files in my assets folder:

    Square44x44Logo.png

    Square44x44Logo.targetsize-44.png

    Square44x44Logo.targetsize-44_altform-unplated.png

    And the same for 150

    They're all transparent pngs.

    I have this in my appmanifest:

          <uap:VisualElements
           DisplayName="<display name>"
           Square150x150Logo="Assets\Square150x150Logo.png"
           Square44x44Logo="Assets\Square44x44Logo.png"
           Description="<Description>"
            BackgroundColor="transparent"/>

    I've run the make pri to generate the xml file which doesn't say anything at all about the plated version unplated images (and I can't find an example of what it should look like)

    I've run the makepri to create the resources.pri file. I've included both in the StoreMappings.txt file that I use to generate the appx package and I include the Square44x44Logo.png in the appx.

    But the graphic still shows blue through the icon instead of it being transparent and doesn't show up at all on the task bar if you pin the app to it or there are multiple stacked.

    What am I doing wrong?

    Edit: Note that the makepri new command identifies all of the unplated resources and generates the resources.pri but then when I build the appx it still shows a blue background behind the icon on the install prompt screen.


    • Edited by JHancockCAD Thursday, February 9, 2017 8:20 PM More info
    Thursday, February 9, 2017 7:59 PM
  • What am I doing wrong?

    Edit: Note that the makepri new command identifies all of the unplated resources and generates the resources.pri but then when I build the appx it still shows a blue background behind the icon on the install prompt screen.


    Switch back to the default system theme.
    Saturday, February 11, 2017 10:50 PM