none
Migrating Hub 8.1 winJS app to Windows 10 UWP app RRS feed

  • Question

  • I am updating my Windows 8.1 Universal app to be a Windows 10 Universal App.

    I have the app working, but it looks awful. All of the images and fonts are way too big.

    Much of my app's sizing comes from the ui-dark.css and ui-light.css CSS files which were CSS files that came with the WinJS Hub Universal 8.1 template.

    Is there an easy way to update these CSS files so the app is sized correctly? 

    Also, I name my icons/images with the "scale" naming convention: i.e. logo.scale-100.png, logo.scale-140.png, etc. Do I need to rethink the size of these images since these images look way too big compared to what the Windows8 app looked? Is there an updated Windows 10 whitepaper that speaks of the scaling of images?

    Thursday, March 17, 2016 3:02 AM

Answers

  • Hello Jaxim,

    Please see: WinJS.UI.Hub object

    >>Is there an easy way to update these CSS files so the app is sized correctly? 

    You could try mediaqueries. Please see: Using media queries

    They are similar to adaptive triggers for css in which we can set up different css properties for different screen sizes. 

    >> I name my icons/images with the "scale" naming convention: i.e. logo.scale-100.png, logo.scale-140.png, etc. Do I need to rethink the size of these images since these images look way too big compared to what the Windows8 app looked? Is there an updated Windows 10 whitepaper that speaks of the scaling of images?

    Please see: Migrate apps to the Universal Windows Platform (UWP)

    The default asset scale for Universal Windows apps is 200. If your project includes assets not scaled at 200, you will need to add a <UapDefaultAssetScale> element with the value of the scale of your assets to this PropertyGroup. Learn more about assets and scales.


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, March 30, 2016 10:02 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:49 AM
    Friday, March 18, 2016 8:39 AM
  • Hi,

    If you create a new windows 8.1 project you can see that default scale is 100. 

    You should probably use app manifest for additional settings for different scales. If the size is not appropriate it will warn you in the designer. 

    With Regards,

    Krunal Parekh 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, March 30, 2016 10:02 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:49 AM
    Tuesday, March 29, 2016 3:02 AM

All replies

  • Hello Jaxim,

    Please see: WinJS.UI.Hub object

    >>Is there an easy way to update these CSS files so the app is sized correctly? 

    You could try mediaqueries. Please see: Using media queries

    They are similar to adaptive triggers for css in which we can set up different css properties for different screen sizes. 

    >> I name my icons/images with the "scale" naming convention: i.e. logo.scale-100.png, logo.scale-140.png, etc. Do I need to rethink the size of these images since these images look way too big compared to what the Windows8 app looked? Is there an updated Windows 10 whitepaper that speaks of the scaling of images?

    Please see: Migrate apps to the Universal Windows Platform (UWP)

    The default asset scale for Universal Windows apps is 200. If your project includes assets not scaled at 200, you will need to add a <UapDefaultAssetScale> element with the value of the scale of your assets to this PropertyGroup. Learn more about assets and scales.


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, March 30, 2016 10:02 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:49 AM
    Friday, March 18, 2016 8:39 AM
  • What was the default asset scale for Windows 8.1 apps? If it's 200 for Windows 10, then what was it for win8.1?

    What percentage should I multiply the previous 8.1 images to resize them properly for windows 10? logo.scale-100.png, logo.scale-140.png

    Are there additional recommended scalings for Windows 10: 100, 140, etc?

    Monday, March 21, 2016 6:09 PM
  • Hi,

    If you create a new windows 8.1 project you can see that default scale is 100. 

    You should probably use app manifest for additional settings for different scales. If the size is not appropriate it will warn you in the designer. 

    With Regards,

    Krunal Parekh 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, March 30, 2016 10:02 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:49 AM
    Tuesday, March 29, 2016 3:02 AM