locked
Best Practices for Styles and Themes

    Question

  • I'm working on my first Windows Store app, and I'm trying to re-style controls, such as Buttons, ListViews, etc.  I know there are several ways to do this, but I'm a bit confused by all the options.

    I want to re-use my styles throughout an application, so putting them in Page.Resources is not an option.  Likewise, I'd like to reuse them across applications, so I don't want to put them in App.xaml, either.  So I guess the best way would be to create a ResourceDictionary and put my styles there.

    The next question I have is how to quickly create my styles.  I was thinking of just making a copy of Generic.xaml and changing it to suit my needs, is this acceptable or is there a better way?

    Sunday, January 20, 2013 6:31 PM

Answers

  • Hi K.A. Hollister,

    For the first question, I agree that a new ResourceDictionary is the way to go.

    For the second question, it sounds good. If you have any style missing, try right click the controls in the xaml designer view and choose Edit Template -> Edit a Copy to get the default template.

    Best regards,


    Min Zhu
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Monday, January 21, 2013 6:22 AM
    Moderator
  • Here are some topics to discuss:
    1. Page Level Scope
    2. Application Level Scope
    3. Spanning Multiple Locations
    4. Beyond Styles - Control Templates
    5. Quickly Creating Styles

    1. Page Level Scope
      • At the most simple level, styles are a way for you to share the formatting of controls in a consistent way throughout your entire application. This allows you to give your application a consistent look and feel while minimizing repetitive styling markup.
      • Styles are used with specific properties of a control such as FontStyle.
      • There are different places you can store the styles, depending on the scope that you want. In other words, if the style is used on just one page, you can create a section at the top of your XAML file called <page.resources>. The styles defined here will be visible only in this XAML file.</page.resources>
    2. Application level scope
      • You could increase scope of styles to the application level.
      • This is done by defining your styles in App.xaml, including a section called <app.resources>. It is here that you will define your resource dictionary.
      • This allows you to name your styles and access them by name across your entire application.
      • The control that you wish to style usually pulls in the desired style by accessing the name that you have provided your style.
      • But you also have styles applied universally to all controls of a certain type.
      • This frees you from going to need to and individual control and styling them individually.
    3. Spanning multiple applications
      • You can take all the styles that you wish to share among all your applications and put them in a single XAML file. This single XAML file can then be added to the resource dictionary. This, in effect, allows you to share a set of styles among multiple applications.
    4. Beyond Styles – Control Templates
      • Styles can be very useful and changing the appearance of your controls. But they do have limitations.
      • If you want to change the visual structure and visual behavior dramatically of a given control, you can use control templates.
      • The beauty of control templates is that you are changing the visual appearance and behavior, not the underlying functionality.
      • This means that if you apply a control template to a button control, you can dramatically change the way the control locks, but at the end of the day it’s still a button control, with all the methods, events, and properties that you would expect a button control to have.
      • In summary, a control template is a tree of primitives that are used for displaying the control.
    5. Example
      • For example, you may wish to have a button contain rounded corners with a specific border color. You may also wish to have a specific animation style associated with it.
      • Control templates give you that capability. You can modify a control template to rearrange, add, or delete the elements (or parts) in the control.
      • For example, you can add a background image or design to a control such as a button. A control template is a property that can be shared among controls and it specifies how the control should visually be rendered.
    6. Quickly creating styles
      • What I’ve done in the past is take a look at StandardStyles.xaml.
      • It is given to you for free any time you create a Windows 8 project.
      • There are dozens of styles there that are predefined and that you can see using your application.
      • The fact that is the guidance for your application development many styles of them defined for you and you should just reuse them in your application.
      • You should minimize the creation of your own styles unless absolutely necessary.

    Monday, January 21, 2013 6:02 PM
  • So if you just want to change the accent color of the controls such as it being blue, or red, or any color you can override the default colors. I used the project HAMMER https://github.com/Code52/HAMMER 

    It is command line and you give it a base color and it spits out Light/Dark/High Contrast for you.

    From there you could override default controls to completely customize them in the StandardStyles.xaml, this is loaded up at start of your app and can be used on any page.


    http://www.refractored.com

    Thursday, January 24, 2013 5:53 AM

All replies

  • Hi K.A. Hollister,

    For the first question, I agree that a new ResourceDictionary is the way to go.

    For the second question, it sounds good. If you have any style missing, try right click the controls in the xaml designer view and choose Edit Template -> Edit a Copy to get the default template.

    Best regards,


    Min Zhu
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Monday, January 21, 2013 6:22 AM
    Moderator
  • Here are some topics to discuss:
    1. Page Level Scope
    2. Application Level Scope
    3. Spanning Multiple Locations
    4. Beyond Styles - Control Templates
    5. Quickly Creating Styles

    1. Page Level Scope
      • At the most simple level, styles are a way for you to share the formatting of controls in a consistent way throughout your entire application. This allows you to give your application a consistent look and feel while minimizing repetitive styling markup.
      • Styles are used with specific properties of a control such as FontStyle.
      • There are different places you can store the styles, depending on the scope that you want. In other words, if the style is used on just one page, you can create a section at the top of your XAML file called <page.resources>. The styles defined here will be visible only in this XAML file.</page.resources>
    2. Application level scope
      • You could increase scope of styles to the application level.
      • This is done by defining your styles in App.xaml, including a section called <app.resources>. It is here that you will define your resource dictionary.
      • This allows you to name your styles and access them by name across your entire application.
      • The control that you wish to style usually pulls in the desired style by accessing the name that you have provided your style.
      • But you also have styles applied universally to all controls of a certain type.
      • This frees you from going to need to and individual control and styling them individually.
    3. Spanning multiple applications
      • You can take all the styles that you wish to share among all your applications and put them in a single XAML file. This single XAML file can then be added to the resource dictionary. This, in effect, allows you to share a set of styles among multiple applications.
    4. Beyond Styles – Control Templates
      • Styles can be very useful and changing the appearance of your controls. But they do have limitations.
      • If you want to change the visual structure and visual behavior dramatically of a given control, you can use control templates.
      • The beauty of control templates is that you are changing the visual appearance and behavior, not the underlying functionality.
      • This means that if you apply a control template to a button control, you can dramatically change the way the control locks, but at the end of the day it’s still a button control, with all the methods, events, and properties that you would expect a button control to have.
      • In summary, a control template is a tree of primitives that are used for displaying the control.
    5. Example
      • For example, you may wish to have a button contain rounded corners with a specific border color. You may also wish to have a specific animation style associated with it.
      • Control templates give you that capability. You can modify a control template to rearrange, add, or delete the elements (or parts) in the control.
      • For example, you can add a background image or design to a control such as a button. A control template is a property that can be shared among controls and it specifies how the control should visually be rendered.
    6. Quickly creating styles
      • What I’ve done in the past is take a look at StandardStyles.xaml.
      • It is given to you for free any time you create a Windows 8 project.
      • There are dozens of styles there that are predefined and that you can see using your application.
      • The fact that is the guidance for your application development many styles of them defined for you and you should just reuse them in your application.
      • You should minimize the creation of your own styles unless absolutely necessary.

    Monday, January 21, 2013 6:02 PM
  • So if you just want to change the accent color of the controls such as it being blue, or red, or any color you can override the default colors. I used the project HAMMER https://github.com/Code52/HAMMER 

    It is command line and you give it a base color and it spits out Light/Dark/High Contrast for you.

    From there you could override default controls to completely customize them in the StandardStyles.xaml, this is loaded up at start of your app and can be used on any page.


    http://www.refractored.com

    Thursday, January 24, 2013 5:53 AM