Showing posts with label expression-blend. Show all posts
Showing posts with label expression-blend. Show all posts

Thursday, June 2, 2011

Ensure all caps in silverlight as a part of design process

Look at the picture of the silverlight cosmopolitan theme :

Notice how all the labels are ALLCAPS. It is probably done by typing with the CAPS lock on but there is  a blend behavior available that can do it for you on the content presenter.
Check out the sample + code for this behavior here : http://blogs.msdn.com/b/esthetique/archive/2010/08/19/sltv-theme-demo.aspx

Enjoy!

Wednesday, May 18, 2011

Blend Tip : Name your states in UserControls to not conflict with controls

A wierd thing happened. I made a usercontrol with two states "Normal" and "Enabled". However when I would toggle between them with the visual state manager using :
VisualStateManager(this,"Normal",true)  / VisualStateManager(this,"Enabled",true)
It would not go through the transition.

Renaming the states to be "NotEnabled" / "Enabled" fixed it.
So if your state transitions are not playing OR not toggling you need to Name your states to not conflict with common Silverlight control states.

Also it is good to rename your state group to be more relevant to you.

Sunday, May 15, 2011

Expression blend : control styling tip, Using element binding rather than parts

There is a small trick used extensively in the movies scenario in .toolbox :
http://www.microsoft.com/design/toolbox/school/modules.aspx?lid=2&mid=6

When you are styling a control and there are parts defined in the control that are of types that cannot be made to look the way you want there is a way around it :

  • Hide the original parts by using setting the visibility to collapsed
  • Make a usercontrol / customcontrol of the type you want and add it to the template
  • Bind properties of your usercontrol/customcontrol to properties of the original part (which is collapsed but still present) by element binding. Make sure the binding is twoway and the trigger is default.
This means you can make really crazy looking sliders and other stuff :) 

Monday, May 9, 2011

The best tutorial on Expression Blend I have seen to date

Expression blend behaviors are by far the best feature of blend. And that makes this video :
Creating Rich Interactions Using Blend 4: Transition Effects, Fluid Layout, and Layout States
The best video on the subject I have seen to date :)

The list box template is soo cool and I guess that is how you can make really lively Windows phone 7 kind of apps for silverlight web. 

Tuesday, May 3, 2011

Expression Blend : Starting a storyboard from ViewModel in silverlight

It is super easy to do. But first a little bit about the setup.
I have a INPC property on my viewmodel like so :

#region IsLoggedIn Property
        private bool _IsLoggedIn = false;
        public bool IsLoggedIn
        {
            get
            {
                return _IsLoggedIn;
            }
            set
            {
                if (_IsLoggedIn == value)
                {
                    return;
                }
                _IsLoggedIn = value;
                RaisePropertyChanged();
            }
        }
        #endregion


The view has a DataContext set to this.
Now based on a change in this boolean value I want to trigger the "LoginStoryboard" that I created in blend.
Easy peasy. Just look for "ControlStoryboard" in the assets panel as shown:
And drag and drop it onto any object in the "Objects and Timeline" panel as shown:
Now select this action in the objects and timeline panel and view its properties in the properties panel. Click New as shown:
Select "DataTrigger" as shown:
Click Ok.
Next databind the Binding property to your property in the ViewModel as shown:
Complete the remaining properties (comparison / Value / Play / LoginStoryboard ) as shown :

All done :)
Enjoy!

Monday, May 2, 2011

Expression Blend Tip : What elements are assigned to parts

When you edit a control template in blend you can view which elements are attached to parts from a small icon next to the element in Objects and Timeline panel as shown (for the default silverlight slider control template): 
Additionally you can view all the parts available to you in the Parts panel as shown: 

To assign parts you can right click on an object in the objects and timeline panel and select options as shown: 
You can also right click and clear part assignment: 

Enjoy!