Hello! I'm MattD1980

Feels like not too long ago I was writing about Xceed going to Mix09 and here we are a year later, ready to go to Mix10! We are all very excited about the announcements that will be made in regards to Windows Phone 7 Series development and are looking forward to some announcements about Silverlight's future as well. And who knows, maybe even WPF? Come on Microsoft, give WPF some love! :).

That said, if you catch Cat, Odi, Charles, or myself at the event and have questions about our products, don't be shy and come talk to us! We'll be staying at the Mandalay Bay hotel and will try to be part of social events there. You can check us out as usual on twitter (@MattD1980 @Cattatatow @Kosmatos) to see where we're hanging out.

I hope the keynotes and sessions this year will be as inspiring as last year. Mix09 by far surpassed my expectations and it would seem that even more is brewing in Microsoft's lair. I still have to fill my schedule with the sessions I will be attending. So much to learn, so little time!

See you there and don't hesitate to contact us if you want to meet up!

The upcoming release of Xceed Professional Themes for WPF will be our biggest update to the product since it was released last year. The latest incarnation of Xceed DataGrid for WPF brought a Windows 7 inspired theme as well as the Live Explorer theme to the table. Both these themes will now be available in the next version of Xceed Professional Themes for WPF.

So let's talk about the Live Explorer theme. When we first created our Xceed DataGrid for WPF Live Explorer we wanted to have a branded theme that would demonstrate how much of our product you could "re-style". At the time we didn't offer it as an available theme since we thought it would be too specific to our application. Boy, did we guess wrong on that one! Many of you responded very well to the theme and some of you were furious at us for not making it available. We heard you! Here's what it's going to look like :

The Live Explorer theme was crafted so you can easily add it to your window and instantly get the look we are using in our own Live Explorer. It is perfect for applications that require a "darker" environment with a hint of color to keep it visually pleasing. Keep in mind that the video displays a work-in-progress version of the theme but very little should change visually when it is released. We also decided to expose an additional style for the toolbar to make it orange instead of gray.

The second theme we added is a Windows 7 inspired theme. Windows 7 creates a very colorful and exciting environment and we wanted to capture this and bring it to our products. We tried to bring a more extravagant experience with this theme and hopefully it will allow you to build a fun application around it.

Both these themes are available in Xceed DataGrid for WPF and the upcoming version of Xceed Professional Themes for WPF. Another version of Xceed Professional Themes for WPF will provide styles for Microsoft's datagrid and calendar controls should come out shortly after.

If you have any questions about the product, feel free to contact us!

 
I thought it would be a good idea to share with you how easy you'll be able to integrate our new Xceed Professional Themes for WPF product into your application. Version 1.0 will include 5 different themes: Media, Glass, and Office 2007 Black/Blue/Silver. Future versions will probably include Office 2010, Windows 7 themes, etc. You can expect each theme to have a version for Xceed DataGrid for WPF as well. This way, you can keep the datagrid's look in sync with all the standard controls.

Once you have the product installed, the first thing you'll want to do is add references to your project. Each theme has an assembly associated with it. For this example, we'll work with the Media theme (similar to the WMP11 theme in Xceed DataGrid for WPf). Once you have added the reference, you'll want to set the namespace declaration in XAML:

xmlns:xcpt="http://schemas.xceed.com/wpf/xaml/themes"

xcpt stands for Xceed Professional Themes . We wanted to preserve the proper "WPF" way as much as possible, so each theme is basically a resource dictionary that you can add to your resources. You can simply add the resource dictionary as a resource to your entire window:

<Window.Resources>
  <xcpt:MediaResourceDictionary/>
</Window.Resources>

This will also work if you want it to be applied to your entire application.

<Application.Resources>
  <xcpt:MediaResourceDictionary/>
</Application.Resources>

You're almost ready to go. You need to first take care of the licensing. Our custom resource dictionary exposes a LicenseKey property:

<xcpt:MediaResourceDictionary LicenseKey="Your-License-Key-Here"/>

If you are in trial mode, you should be able to find your trial license key in the Resource Center installed with the product. If you have purchased the product already, you will find your license key in an email sent by our sales department. If you are trying the theme on an already existing application, you can hit F5 and see your standard controls styled with the Media theme. Simple enough?

The method I just described is using all our resources implicitly, meaning that you did not have to define explicitly on each controls which theme you want to use. If, for any reason, you do not wish our themes  to override all your defined styles, you can use this product explicitly.

<xcpt:MediaResourceDictionary StyleUsageMode="Explicit"/>

As you already probably guessed, the default value is Implicit. Now that you have changed the StyleUsageMode property, if you hit F5, you should not see any difference from what you usually see without the themes referenced.

This means, however, that you will have to define the resource you want for each control. Let’s take a button for example:

<Button Style="{x:Static xcpt:MediaResources.ButtonStyle}"/>

You have to force the Style of the Media button on the desired control. You will find a complete list of keys for our controls available in our documentation if you chose to work in Explicit mode.

When creating this product, we were also aware that even though we styled all the standard Microsoft controls, some users would require us to go further. This is why in our light API we added some brush resources that you can apply to your own controls. Here's an example:

<Border Background="{x:Static
xcpt:MediaResources.ControlBackgroundBrush}"
        BorderBrush="{x:Static xcpt:MediaResources.BorderBrush}"
        BorderThickness="1"            
        Height="50"
        Width="50"/>

This way, you create your own controls using some of our resources. As demonstrated above, you can set Background and BorderBrush to any element using our resources. A complete list of exposed resources will be available in our documentation as well. Of course, there's always the option to get our Blueprint Edition to get access to the complete XAML resources for all controls.

Finally, a request I have received a few times and even in my previous blog post is to be able to change themes on the fly for your application. Basically, something to allow the user to have a Combobox with a list of available themes that can be changed during run-time. Here's a quick and dirty way you can do this, by defining your Combobox:

<ComboBox SelectedIndex="0"
                SelectionChanged="ThemeComboBox_SelectionChanged">
         <ComboBoxItem Content="Glass">
            <ComboBoxItem.Tag>
               <xcpt:GlassResourceDictionary />
            </ComboBoxItem.Tag>
         </ComboBoxItem>
         <ComboBoxItem Content="Office 2007 Blue">
            <ComboBoxItem.Tag>
               <xcpt:Office2007BlueResourceDictionary />
            </ComboBoxItem.Tag>
         </ComboBoxItem>
         <ComboBoxItem Content="Office 2007 Black">
            <ComboBoxItem.Tag>
               <xcpt:Office2007BlackResourceDictionary />
            </ComboBoxItem.Tag>
         </ComboBoxItem>
         <ComboBoxItem Content="Office 2007 Silver">
            <ComboBoxItem.Tag>
               <xcpt:Office2007SilverResourceDictionary />
            </ComboBoxItem.Tag>
         </ComboBoxItem>
         <ComboBoxItem Content="WMP11">
            <ComboBoxItem.Tag>
               <xcpt:MediaResourceDictionary />
            </ComboBoxItem.Tag>
         </ComboBoxItem>
      </ComboBox>   

In your codebehind you will have to add the ThemeComboBox_SelectionChanged method, which should look like this:

private void ThemeComboBox_SelectionChanged(object sender,
SelectionChangedEventArgs e)
    {
      if (e.AddedItems.Count > 0)
      {
        this.Resources = ((ComboBoxItem)e.AddedItems[0]).Tag as
ResourceDictionary;

      }
    }

So this pretty much covers how our new product called Xceed Professional Themes for WPF will work. If you have questions about licensing and pricing, you can already contact sales@xceedsoft.com. You can expect this product to be available by mid/end of August. Enjoy!

This is somewhat related to my previous post about "less is more". Another thing that I've noticed over the years is that some websites or applications tend to give a priority to looks over function. There are some exceptions to this that obviously depend on the theme of the application or website. Now, WPF and Silverlight provide us with a lot of features to alter the visual appearance of an application and as I mentionned before: with great power comes great responsibility. 

A lot of our clients have to wear the designer, artist, and programmer hat all at once. Not everyone has the chance to have an integrator and artist/designer working alongside. If you are just starting out in WPF or Silveright and do not have a lot of experience in design my first advice is this: don’t try to be cute. Design is hard and requires a lot of experience, you wouldn’t expect someone to start coding in C# and or VB.NET by improvising, well don’t expect you can easily improvise design ;-). 

When I say “don’t sacrifice function over looks” it means elements placed on your application or website that require interaction should not be blended in your design in a way that they cannot be easily accessible. This might sound very basic; however, even the most advanced design companies make these fundamental mistakes. For example, here’s something Odi (@kosmatos) tweeted : “So who can tell which is currently selected in the "Public | Private" TOGGLE button? How do you know? http://twitpic.com/659sb”. And he’s right, the purpose of a ToggleButton is to easily determine if a button is currently toggled or not. When designing an application make sure your controls are easily accessible and that their visual representation respects the essence of the controls. 

Another fundamental way to allow users to easily indentify an element that can be manipulated is by using contrasts. Make sure that what is important to the end users visually stands out. This is another point that may sound very basic to most of you; however, it is a detail that can be forgotten or ignored. Here’s a selected menu item from a very awesome website I visit:

Bright orange on white is not the best way to make text stand out. Test your contrasts and make sure that important text or informationcan be easily read. 

Regroup valuable information or sections currently important to the user. We faced this issue when developing our Resource Center.  We wanted to display a lot of information in a single form. For those who don’t know what the Resource Center looks like, here it is: 

We have a main section in our circular listbox, we have News Headlines and Licensing Information. That’s a lot of content to throw at our users. So we have to guide our user eyes to what is important. The currently active section will have a big icon standout and the icon will be linked to the currently active section, in this case Getting Started, which is represented by a timer. One of the issues we had is that the news headline would have grabbed the user's attention too much when really this is not where we want them to initially look. So what we did is we made the text semi transparent until the user hovers over the section. We also decided to hide our scrollbar on the News section that would just be cumbersome to the user's eye. So with this, we hope that the users initially pay attention to the middle circular panel. 

This is just some advice I’ve learned by working with our designer over the years. They are fundamental principles that we obviously did not invent. Those are related to the Contrast, Repitetion, Alignment, Proximity (C.R.A.P.) design principles brought up by Robin Williams in his popular book The Non-Designer’s Design Book. You can do a quick google search for C.R.A.P. Web Design to find more information about this. Keep in mind that the C.R.A.P. Principles applies, in my opinion, to application design as well.

 Questions or comments, feel free to send them either on twitter @mattd1980 or drimonakosm@xceed.com

Next week I'm headed to Vegas to participate in this much anticipated event. I'm really looking forward to meet some of you and I will be hard to miss with my white Xceed polo ;-) so don't be a stranger! The sessions I will be attending will be mostly those concerning Silverlight 3 and WPF. I'm pretty excited about What's New in Windows Presentation Foundation (WPF) 4 by Kevin Gjerstad and Mark Wolson-Thomas, I've been working with WPF over the past three years and have pretty high expectations about this new version. I hear XAML will change a bit, which concerns me considering most of my coding time is done in XAML for the DataGrid or our Silverlight products.

My expectations for Mix09 are to a) learn new stuff and b) get inspired! It'll be interesting to see what others do and what Microsoft has planned for the future. I'll see you guys and gals there! I'll probably be tweeting quite a bit about what I am doing while I’m there so feel free to follow me at twitter.com/mattd1980. Oh and I'll be attending the TAO party with Catherine, Charles, and Odi on Wednesday night!

A lot has changed since WinForms but one of the variables that hasn't changed much, is the programmer. WinForms programmers who were used to static environments are now asked to "upgrade" to WPF, which brings a whole new world of possibilities. One of these possibilities is animation. In an ideal world, a company that moves from WinForms to WPF should have an integrator and an artist. Obviously, not all of WPF programmers are that fortunate and some have to take on the three roles. Here's an example of what I consider a good use of animation.

If working with Catherine (our artist) has taught me anything in the past three year is that "less is more", which she often loves to remind me. This is especially true with animations and more so if you have little or no experience with it. Stick with the basics. Why do you want to animate X and Y? The answer can't always be "because it's cool” or “because I can". Animations should be used to guide the user’s eyes on the screen, to give them a visual queue that something changed. It's easy to go over the top and do too much. Here's an example of what I would not recommend :

Unfortunately, this is the type of things we see in WPF applications. Too much visual noise, which overwhelms the user. I would recommend a much smoother approach. For example:

In the end, if your application is built around a "light" animation philosophy, odds are that you'll get a much slicker application. Try not to vary the type of animation you are using either. Mixing ScaleTransforms with RotateTransform can make a user nauseous. If you don't feel you have the knowledge required to determine when you should use animation, refer to the pros like what you see in Zune, which uses very smooth animation like the one I demonstrated.

Also feel free to follow me on twitter !