The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
[UWP]Windows 8.1 app update to Universal App - Want Win8 look and feel RRS feed

  • Question

  • I have an existing Windows 8.1 application for desktop/tablet. I'm in the process of "upgrading" it to Windows 10 Universal App. The look and feel is completely different. Is there a way to get to look and behave like it did as a Windows 8.1 app?

    Examples:

    App Bar buttons looks different

    Buttons look button

    Grids are vertical scrolling instead of horizontal


    Saturday, August 15, 2015 2:34 AM

Answers

  • What type of app are you writing? HTML or Xaml?

    Either way you can style the controls however you'd like them. If you don't want the standard styles you can customize them to look as you prefer. The exact details will be different depending on how you're writing your app.

    Sunday, August 16, 2015 6:04 AM
  • >AppBar Buttons are completely different

    You have to customize the AppBarButton by using Style and Template: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn481531.aspx


    Best Regards,
    Please remember to mark the replies as answers if they help

    Monday, August 17, 2015 12:42 PM
  • There is no holistic "Windows 8 theme" that can be used in a Universal Windows app.

    In many cases you can use the same templates in a Universal Windows app that you used in Windows 8. In the Visual Studio designer go to the control in the Windows 8 project, right click and pick Edit Templates.Edit a copy (<= approximate wording from memory) to create a copy of the template in the local project. Depending on your needs you may also want copies of the ItemsPanelTemplates, etc.

    It will probably be easier and get better results if you massage the results you get to work with the Windows 10 styles rather than trying to give the app a Windows 8 look.

    Wednesday, August 19, 2015 1:20 AM

All replies

  • What type of app are you writing? HTML or Xaml?

    Either way you can style the controls however you'd like them. If you don't want the standard styles you can customize them to look as you prefer. The exact details will be different depending on how you're writing your app.

    Sunday, August 16, 2015 6:04 AM
  • I have 2 screens below. It is the same code in both cases. The first is a Universal App and the second is the Windows 8.1 app I've been deploying. You can see the text is formatted differently, layout is different, grids are up/down instead of left/right, AppBar Buttons are completely different. Not only do I not want to reformat/redesign for Windows 10, I really like the Windows 8.1 version. All I want is to write code for the UAP back button, but I can't do it unless I upgrade!

    Sunday, August 16, 2015 10:02 PM
  • Sorry, I forgot to mention. This is a XAML/C# application.
    Sunday, August 16, 2015 10:04 PM
  • In past Windows upgrades, you could apply a theme to make it look like a different version. Is there a theme I could apply to make it look and feel like Windows 8?
    Sunday, August 16, 2015 10:06 PM
  • >AppBar Buttons are completely different

    You have to customize the AppBarButton by using Style and Template: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn481531.aspx


    Best Regards,
    Please remember to mark the replies as answers if they help

    Monday, August 17, 2015 12:42 PM
  • >AppBar Buttons are completely different

    You have to customize the AppBarButton by using Style and Template: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn481531.aspx


    Best Regards,
    Please remember to mark the replies as answers if they help

    Thanks, that's very helpful. The biggest issue for me is the grid orientation, where in Windows 8.1 it would sort vertically first, then expand horizontally. In Windows 10, I can make it sort vertically with some additional settings, but it will always expand vertically. This means the whole screen would need to be redesigned. If someone has a solution for that, it would be most welcomed.

    In general though, I would love if there was a way to simply turn on Windows 8 styling...

    Monday, August 17, 2015 6:18 PM
  • You need to change the ItemPanel WrapGrid orientation. They changed the default in Windows 10.

    <GridView.ItemsPanel>
     <ItemsPanelTemplate>
     <WrapGrid Orientation="Vertical"></WrapGrid>
     </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    Rob

    • Edited by Robert Durfee Tuesday, August 18, 2015 4:02 AM formatting
    Tuesday, August 18, 2015 3:59 AM
  • You need to change the ItemPanel WrapGrid orientation. They changed the default in Windows 10.

    <GridView.ItemsPanel>
     <ItemsPanelTemplate>
     <WrapGrid Orientation="Vertical"></WrapGrid>
     </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    Rob


    You're right. This worked to get the grids to behave correctly, but the problem with WrapGrid is that it does not dynamically change size based on the items. The VariableSizedWrapGrid does, but it doesn't expand horizontally properly. Is there a way to force a recalculation on WrapGrid?
    • Edited by Xylamic Tuesday, August 18, 2015 4:26 PM
    Tuesday, August 18, 2015 10:19 AM
  • You need to change the ItemPanel WrapGrid orientation. They changed the default in Windows 10.

    <GridView.ItemsPanel>
     <ItemsPanelTemplate>
     <WrapGrid Orientation="Vertical"></WrapGrid>
     </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    Rob


    You're right. This worked to get the grids to behave correctly, but the problem with WrapGrid is that it does not dynamically change size based on the items. The VariableSizedWrapGrid does, but it doesn't expand horizontally properly. Is there a way to force a recalculation on WrapGrid?

    I found that if you replace <WrapGrid with <ItemsWrapGrid that it behaves properly. I appreciate the help in pushing me in the right direction.

    Tuesday, August 18, 2015 4:53 PM
  • There is one main question. Can the Windows 8 theme be used in a Universal app?
    Wednesday, August 19, 2015 12:58 AM
  • There is no holistic "Windows 8 theme" that can be used in a Universal Windows app.

    In many cases you can use the same templates in a Universal Windows app that you used in Windows 8. In the Visual Studio designer go to the control in the Windows 8 project, right click and pick Edit Templates.Edit a copy (<= approximate wording from memory) to create a copy of the template in the local project. Depending on your needs you may also want copies of the ItemsPanelTemplates, etc.

    It will probably be easier and get better results if you massage the results you get to work with the Windows 10 styles rather than trying to give the app a Windows 8 look.

    Wednesday, August 19, 2015 1:20 AM
  • There is no holistic "Windows 8 theme" that can be used in a Universal Windows app.

    In many cases you can use the same templates in a Universal Windows app that you used in Windows 8. In the Visual Studio designer go to the control in the Windows 8 project, right click and pick Edit Templates.Edit a copy (<= approximate wording from memory) to create a copy of the template in the local project. Depending on your needs you may also want copies of the ItemsPanelTemplates, etc.

    It will probably be easier and get better results if you massage the results you get to work with the Windows 10 styles rather than trying to give the app a Windows 8 look.


    Does that mean that you recommend 2 XAML code bases if you want to support Windows 8 and Windows 10 at the same time?
    Wednesday, August 19, 2015 9:48 AM
  • Bumping up for response.
    Friday, August 21, 2015 7:50 PM
  • If you create a style and template for your app, the UI should be the same in Win8 and Win10, because the control used your custom template instead of system defined, for the trend, the WIn10 style UI will be more appropriate

    Best Regards,
    Please remember to mark the replies as answers if they help

    Wednesday, August 26, 2015 9:59 AM