• ux musings

    Enforce Design Guidelines With Styles And Behaviors


    Often times, the design for an interface calls for guidelines that cannot be sufficiently controlled with styles in a Silverlight resource dictionary alone. Take for instance, the Windows Phone interface shown below, and imagine that the design guidelines specify that the application/page name (the red arrow is pointing to this element) is supposed to be in all caps. How do you enforce this in the interface in a painless manner?

    One way, is to define a style for the inteface element and attach a behavior that forces the string to be in all caps. Attaching behaviors in styles is something that I just discovered was possible, and it's pretty amazing!

    I've created a sample project that contains two very simple TextBlock styles and associated behaviors that either force TextBlock text to be upper case or lower case as appropriate. What's great about this is that people consuming the styles no longer have to worry about the case of the text. The style alone controls the text case. This is particularly interesting in situations where TextBlocks are bound to data as the form of the bound data may not be known (e.g. it may not be all upper case, mixed case, etc...). The image below is a screen shot of the sample application

  • ux musings

    Transitions, Animations, and Effects with Blend - Part One


    Recently, I was invited to speak at a Portland Silverlight user group meeting about designing great application experiences using Silverlight and Blend, and in doing so I demonstrated a lot of the cool new capabilities that Blend provides for easily creating transitions, animations, and effects. The meeting was a lot of fun, and I covered a lot, so I thought I would review some of what was discussed at the meeting on my blog. I'm breaking the post into two parts; the first part will address application themes, simple page transitions, Blend shapes, and master-details transitions, and the second part will address path ListBox, built in Blend pixel shaders for use in state changes, and fluid layout.

    Before diving into the details, I want to briefly discuss the application I was building for the demo. The application was a blog for me, and it had to have bright and vibrant colors, fun animations and transitions, and an atypical feel. I didn't build out the entire experience during the demo, but I did build some of the 'friends' section and the 'flickering' section, and the general feel for the application is shown below


     Before moving further, please…


    Application Themes

    Towards the beginning of my demo, I showed how use of the Silverlight Navigation Application template can speed application development efforts. It provides building blocks for common application types, a navigation framework with a couple of pages, and it can leverage themes available on the Expression Gallery. The subsequent images show how I started building my application by using the template and how I applied a custom theme to speed initial application building steps


    Create Silverlight Navigation Application Template Based Project Create a new Silverlight project and choose the Silverlight Navigation Application template. After creating the application, the UI should appear as follows when opening MainPage.xaml in the Visual Studio design surface


    Apply New Project Styles and Update References Replace the default Styles.xaml file with my Styles.xaml, and then update project references by adding the following as shown below (my Styles.xaml file requires several additional references before the project will build correctly)


    Build Project Once the Styles.xaml file is updated appropriately and the project is built, it should look as follows in the browser



    Page Transitions

    Compelling page transitions are used in many applications these days, and Blend makes it easy to create these types of transitions. In my application, I used one of the page transitions that Blend enables 'out of the box' (so to speak). The transition is a Ripple effect and details for creating this transition are found below


    Add Visual State and Transition Effect to Page Open the xaml page, open the 'States' panel, add a VisualStateGroup, add a state, and name the state ('LoadPage' is what I named my state). Next, add a transition effect by clicking the 'fx' glyph, choose a transition effect (I chose Ripple), click the graph glyph and choose an easing function (I chose circle out), and then choose the time for the transition to take place (I chose 1 second)


    Add GoToStateAction to Page Open the 'Assets' panel, select the 'Behaviors' item from the tree, and then drag and drop 'GoToStateAction' onto your 'Page' in the 'Objects and Timeline' panel


    Specify GoToStateAction Properties Open the 'Properties' panel, select 'Loaded' for the EventName, and then choose your newly created state in the StateName combobox




    Blend provides several shapes that you can leverage in your applications. The arrow shape was used in my application to highlight the currently selected item in the ListBox, and details for producing this same effect are found below


    Edit the ListBox ItemContainerStyle Right click the ListBox, select 'Edit Additional Templates', and then select the appropriate template as shown below


    Choose a Shape Open the 'Assets' panel, select 'Shapes' from the tree, and then choose an appropriate arrow shape


    Add the Arrow to the UI Double click the arrow to add it to the UI and then set the opacity of the arrow to 0


    Set Arrow Opacity in Selected State Open the 'States' panel, choose the 'Selected' state, and then set the arrow opacity to 100%



    Master - Details Transitions

    Transitions can make the navigation experience for master-details scenarios engaging and fun, and Blend makes it easy to create these experiences. In my application, as items in the ListBox are selected, the details slide in from the right, and this is very easy to create as you will see below


    Create Details User Control and Add Slide In Visual States Create a user control for details (mine is called CT_OneControl.xaml), add a visual state group, add two states, name the states (mine are named 'Slide1' and 'Slide2'), add a transition effect for the visual state group (mine is slide in from the right), add an easing function (mine is circle out), and a time for the transition to take place (mine is .75 seconds)


    Add the User Control to the Page with the Master Control Add the newly created details user control to the page with the master control as shown below


    Add a Bit of Code to the Trigger the Details State Transition Add an eventhandler to the master control to trigger the details state transition (my master control is a ListBox, my event is SelectionChanged, and my event handler is LB_One_SelectionChanged). Now add a bit of code to the event handler that checks for the current state of the details user control, and, then, sets the state to one of the two states that is not the current state (in my case it sets the state to 'Slide1' or 'Slide2' accordingly)


    The End! Until part two ;)


  • ux musings

    Windows System Color Theme for Silverlight - Part Three


    The Windows system color theme for Silverlight now includes styles for all toolkit controls except charts and graphs (these will be themed shortly). When theming the remaining controls, we decided to make a few changes to all controls...

    • All button controls are now slightly rounded to add a bit of visual interest to the set
    • The "Animated" property for text hinting is now used to soften the appearance of fonts (we're not sure it works well when the interface is in high contrast modes, but it looks great when in standard mode)
    • All controls use the font Segoe UI and fallback to Lucida Sans Unicode and then Verdana 

    The project also contains a Styles.xaml file that you can use to theme your Silverlight Navigation Application projects by simply swapping Styles.xaml files. This new theme is a high contrast derivation of one of the three new themes that we plan to make available to the community this month. More details can be found below and the updated project is available for download here.


    Screen Shots

    What follows are screen shots of the controls in standard and high contrast modes... 

    High Contrast Theme Image


    Text Hinting

    As mentioned previously, the theme now uses texthinting set to "Animated", and the controls look great in standard mode, but they are a bit muddied in high contrast modes with dark background colors, as you can see below (the first image shows texthinting set to "Animated" and the second image shows texthinting set to "Fixed"). If your scenarios require crisp text, we recommend you do a search and replace on "Animated" and replace it with "Fixed"... 


    Let me know what you think of the theme, and feel free to ping me with questions!


  • ux musings

    Silverlight 4 Notification Window Class


    Tim Heuer has a great blog post on the new NotificationWindow class for Silverlight 4 Out-Of-Browser applications. This class allows you to create notifications or 'Toast' for your Out-Of-Browser applications when you need to provided helpful information to the user as they are interacting with the application.

    Tim provides great visuals for the notification window in his sample application, and I decided to leverage his sample to explore things myself and created a style that maps nicely with the default Silverlight control styles. My sample project can be found here and the visuals can be seen below...

  • ux musings

    Windows System Color Theme for Silverlight - Part Two


    The SDK controls are now themed in the Windows system color theme style, and the Toolkit controls will be themed very soon! The updated project is available for download here.

    For those of you who desire a bit more contrast in the theme, particularly for high contrast color modes, there are a few approaches you can take...

    • One quick and simple approach is to open SysColors.cs and replace the appropriate gradient brushes with solid color brushes by changing LinearGradientBrush properties to Brush properties, and, in most cases, I would recommend using ControlColor for the replacement. This will eliminate the gradients used on buttons and increase contrast a bit
    • You could take it even further and replace the use of ControlDarkDarkBrush for fonts with ControlTextBrush or WindowTextBrush, depending on where the font sits (e.g. if it sits on a background filled with ControlBrush it should use ControlTextBrush and if it sits on a background filled with WindowBrush it should use WindowTextBrush). You may also consider changing control borders from ControlDarkBrush to ControlDarkDarkBrush. These changes will increase the contrast even more
    • Another approach is to create a second rescouce dictionary for use only when in high contrast color modes that has the desired contrast level. I have created a second project that shows how this can be done. This project shows mockup Ux for an LOB demo that was used at PDC 09', and it isn't fully functional, so please focus on the theme swapping functionality which can be found in MainPage.xaml.cs and LoadResource.cs. Creating a second theme is a lot more work, but it may be the best approach for many projects


    Screen Shots

    What follows are screen shots of the PDC Ux in default and high contrast white modes and the newly themed SDK controls in various Windows default and high contrast modes...


Page 1 of 4 (20 items) 1234