XAML Hero

Xceed at Mix10!

Matt — Tue, 02 Mar 2010 18:24:00 GMT

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!

Xceed Professional Themes for WPF - 2 New Themes!

Matt — Fri, 19 Feb 2010 20:39:00 GMT

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!

Quick usage preview of Xceed Professional Themes for WPF

Matt — Thu, 23 Jul 2009 18:29:00 GMT

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:

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:

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:

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!

A Glimpse at Xceed Professional Theme Packs for WPF.

Matt — Thu, 25 Jun 2009 16:47:00 GMT

For the past few months, Catherine and I have been working on a new product called Xceed Professional Theme Packs for WPF. This product will include all Standard Microsoft controls : Button, RadioButton, Checkbox, ListBox, TreeView, Toolbar, StatusBar etc... and about 30 different controls—all skinned.

The main reason why we decided to develop this product is because of you, our users. We received many comments like : "the WMP11 theme is nice for the DataGrid; however, the rest of my application doesn't fit!". It seemed like the next logical step was to offer a product that would enable our users to give their application a uniformed look. This product does not have a dependancy on Xceed DataGrid for WPF since we can easily imagine users wanting to use this product in any WPF application.

One of the features this product will have is the ability to skin all your controls and still respond to visual properties. For example, having a WMP11 button will completely redo the look of the button; however, we were careful to still support properties like Background and BorderBrush, for example. If you look a the following image, you'll see three different buttons all with the same skin. The only difference between each button is the Background property :

We wanted to enable our users to modify the look of the controls without compromising the skin. To achieve this, we had to exploit TemplateBindings as much as we could. TemplateBindings in a template allow you to chose which VisualElement in your VisualTree will respond to a given property. So in our WMP11 Button template, we added a layer over the gradient brush that gives the WMP11 look. So :

<Rectangle Fill={TemplateBinding Background}

Opacity="0.3"/>

This is obviously not exactly how our template looks, it's just to give you an idea of how we proceeded. The Rectangle that has the opacity set to 0.3 is the one that is template bound to the background property. This will allow our users to set a color to the control without overriding the grandients as seen in the image.

Here's a quick video demonstrating some of our controls in action :

Not all controls are being displayed but it should give you a general idea of where we're going with this product. One of the toolbars has its background property set to DeepSkyBlue and, as you can see, it still fits with the look of the control.

I'm pretty excited about Xceed getting this product out to you as soon as possible. We are currently in a final polishing phase and hoping for this to be released by the end of the summer. Expect to see 5 different themes with over 30 controls including : Office 2007 Blue, Black and Silver, WMP11, and Glass. Have questions about the control? Feel free to email me at drimonakosm@xceed.com or follow me on twitter at www.twitter.com/mattd1980.

Don't sacrifice function for looks!

Matt — Fri, 29 May 2009 15:13:00 GMT

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

Mix09!

Matt — Fri, 13 Mar 2009 13:47:00 GMT

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!

Animation in xaml to get you started.

Matt — Mon, 16 Feb 2009 16:14:00 GMT

My previous post was xamlless so I thought I'd give some basic examples to get you started if you're not familiar with animations.

First I'll show you how to create this smooth translate and opacity animation and how to tweak it to what you want. Here's the storyboard I declared in my project resources :

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

DecelerationRatio="0.5"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation

Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"

To="0"

DecelerationRatio="0.5"

Duration="00:00:00.400"/>

</Storyboard>

There are various ways you can do this but I prefer using a more generic approach where I will not be dependent on the type of object I will be animating, hence the UIElement.RenderTransform. You could also set this explicitly by using the Storyboard.TargetName property and naming (x:Name) your TranslateTransform, which would look like this :

<DoubleAnimation

Storyboard.TargetName="myTranslate"

Storyboard.TargetProperty="X"

To="0"

DecelerationRatio="0.5"

Duration="00:00:00.400"/>

Either way, it does not really change anything for the current example. Now, the only thing left is to make sure the object you will be animating has a TranslateTransform attached and its opacity set to 0 :

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

Your control is now ready to be animated, for testing purposes you can just add the following code in your xaml :

<TextBlock.Triggers>

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

</TextBlock.Triggers>

There are various elements you can play with to get the effect you want, at this point it's just a matter of changing the duration along with the Acceleration or DecelerationRatio and the TranslateTransform X value. Keep in mind that in a lot of cases a simple Opacity animation should be enough without adding the translate. The key is to not over do it .

Another fun yet dangerous (in a design point of view) thing to play with when working with animation, is the ScaleTransform. If you read my previous post you will understand why. ScaleTransform animation surfs on the thin line between corny and cool. Scaling elements can be intresting in splash screens or when you initially layout your elements. Here is an example :

<DoubleAnimation Storyboard.TargetProperty="Opacity"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

To="1"

Duration="00:00:00.400"/>

Make sure your element has both the opacity set to 0 and has a ScaleTransform attached :

<TextBlock Text="Hello World"

Opacity="0">

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

I would advise against starting with a ScaleX and ScaleY at 0 as the effect will be too drastic. You can try it out and see what I mean.

Just to demonstrate what you could do :

So how does that all tie in the datagrid? Well, it's really up to you and your creativity. An easy example would be to use an animation like a scaleTransform in a cell's error style. If some data is invalid, you could then scale it to bring the information to the user's attention.

If you want to try this out, create a new Style with TargetType xcdg:DataCell (assuming you added Xceed's namespace with xcdg) give it a key like : myCellErrorStyle

In this style you can add something like this (tweak it to what you want) :

<Setter Property="RenderTransformOrigin"

Value="0.5,0.5"/>

<Setter.Value>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsValidationErrorRestrictive"

Value="True">

<Setter Property="Background"

Value="Red">

</Trigger>

<Trigger Property="IsValidationErrorRestrictive"

Value="False">

<Setter Property="Background"

Value="Orange">

<Trigger.EnterActions>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

To="1.1"

Duration="00:00:00.25"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

To="1.1"

Duration="00:00:00.25"/>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

</Style.Triggers>

Now, on the datagrid you have a property named CellErrorStyle, you can set it to your myCellErrorStyle and voila!

Questions? Comments? Please feel free to share :).

Because you can animate, doesn't mean you should.

Matt — Tue, 10 Feb 2009 17:56:00 GMT

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 !

Being the Integrator

Matt — Wed, 04 Feb 2009 20:52:00 GMT

Hello! Welcome to my new blog, Xaml hero! My name is Matt and I work as the WPF and Silverlight integrator at Xceed. With the arrival of new technologies that require artists and programmers to work together, came the need for a middle man: Me! Part of my job is to make sure that both parties understand each other and work towards the same goal. When we have technical group meetings the artist will often look at me and go "huh" and it's part of my job to make her understand some of the technical limitations she will be facing. My day to day job consists of taking the designs or prototypes the artists might have created and integrate them into our products. It can be new look for the column header in our grid or a new sample application for our Silverlight tools. I usually work directly in Visual Studio or a XAML-pad type of editor. I usually try to avoid using Blend as its XAML editor is still lacking.

As for our artist, she can use a wide variety of tools. She obviously does a lot in Blend; however, her mock ups can be static and come from illustrator. Once she is done, she'll ask me to "wpfize" them. She will also occasionally use Flash when her mock ups rely on elements being animated.

So there you have it, this is what I do at Xceed. I hope to bring you tips and samples on how to do neat things in both WPF and Silverlight whenever I get the chance.

Note that Catherine and I will be attending mix09! Look for us if you have questions about our products or just feel like chatting about them.