As promised recently, we’re announcing that early versions of our Silverlight Charts are now available in the nightly builds of Silverlight Elements. We elected to keep the charts as part of our Silverlight suite rather than spin it out as a separate product so that existing customers got some cool new controls and to make the Silverlight Elements suite even more compelling!
So what’s in the box at the moment?
Bar charts:
Line charts:
Pie & doughnut charts:
Remember: You can alter and customise the look and feel of the charts to your hearts content. Axis labels, data labels, colours, background grids, absolutely everything is customisable. If you make a particularly sexy chart then let us know, we’d love to see what users are building! :-)
As we are rolling out the charting beta in the nightly builds, you can expect new features and chart types every day. In the current nightly we’re shipping a Charting QuickStart sample and XML documentation, but we’re working on more detailed samples and improved documentation, and plan to ship those over the next couple of weeks. It is however a great time to provide feedback on the charts by telling us if there’s features you’d like to see, particular chart types you’d like us to prioritise or if you find the samples are not providing enough guidance — that sort of thing.
If you’re working with Silverlight and are curious about not only charting, but what else you get with Silverlight Elements you can read more on the Silverlight Elements site.
You can grab the latest nightly build of Silverlight Elements trial edition from the nightly build page, or get the full version from your account page in the store if you’re an existing customer.
I wanted to give a sneak preview of some great new capabilities that we’re currently developing for WPF and Silverlight. In the coming months we will be releasing a suite of charting controls for both our Silverlight Elements and WPF Elements product lines.
Here’s some examples of what will be possible. Note that these are early screen grabs from our simple test harness – it’s only part of the story, and we’ll have more to say in the future as we get closer to a release. Obviously charting is about much more than just the visuals so we’re working hard to ensure that developers have a great experience with the controls – databinding support through out, infinite restyling and templating ability, animation support and more. Everything you would expect from tools designed and built specifically for the platform.
A simple line series graph showing various styles for lines and automatic legend generation for the various series.
A simple bar graph with category axis support in use.
3D bar graph – customising and styling the look and feel of your charts is easy with the flexibility of styles and templating in Silverlight and WPF.
Data labels can be displayed to make values more clear for the consumer. Data labels can be trigger to display on mouse over, all at once or however you would like. The display style is completely customisable.
A simple pie chart with lighting effects applied.
Doughnut charts are supported. They’re also delicious when consumed fresh from the bakery with sugar on top.
This marks the end of a short glimpse of what’s under development for the WPF Elements and Silverlight Elements products. We appreciate any feedback as it will directly impact the product development. As mentioned earlier, these are alpha screenshots and you can customise the look and feel considerably more than we have shown here (as they’re all being rendered from our test harness the legend, title, etc is all displayed in the same place with the same colours – this isn’t necessary! :-)
So when can I get my hands on this?
If you’re a Silverlight Elements customer, we’ll be rolling out the charts into the nightly builds soon. We’ve elected to start with supporting Silverlight as the Silverlight API is far more primitive than WPF and it will make releasing the WPF version shortly after we finalise the Silverlight version much easier. We will be posting updates to the blog in future when parts become available to play with (you can subscribe to the blog here if you use an RSS reader).
If you’re building controls or applications that display numbers and dates, you’re going to want to have a good understanding of how to format them nicely. In WPF and Silverlight, this is achieved using the static String.Format method which has a few overloads. The method overload we’ll be looking at takes in a string and an object as the parameters. The string parameter is a format string which will be used to format the given object. The object is whatever we want to convert to a string such as a double or a DateTime. In this blog post we will look at just a few of the many format strings provided by WPF and Silverlight for formating doubles and DateTimes. The general structure of a format string is: “{0:*}” where the * is replaced with the format string itself.
Most format strings for double values are comprised of some numbers or symbols followed by a decimal point followed by some more numbers or symbols. The most common string format for formatting a double value is to specify the number of decimal places. As seen in the examples below, the number of following zeros define the exact number of decimal places to display. The number of “#” symbols can be used to define a maximum number of decimal places while only displaying digits if they are not zero. The last example below shows how “0.0#” can be used to specify that at least one decimal place is always shown, but only a maximum of two decimal places.
// exactly two decimal places String.Format("{0:0.00}", 123.4567); // "123.46" String.Format("{0:0.00}", 123.4); // "123.40" String.Format("{0:0.00}", 123.0); // "123.00" // at most two decimal places String.Format("{0:0.##}", 123.4567); // "123.46" String.Format("{0:0.##}", 123.4); // "123.4" String.Format("{0:0.##}", 123.0); // "123" // one or two decimal places String.Format("{0:0.0#}", 123.4567); // "123.46" String.Format("{0:0.0#}", 123.4); // "123.4" String.Format("{0:0.0#}", 123.0); // "123.0"
Format strings for DateTime objects are built up as a sequence of grouped letters. Each letter targets a particular part of the DateTime such as the year, day or hour. The number of letters in each group defines how that part should be formatted. Below is a list of some of the letters and the results of applying them to a DateTime.
DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 0); String.Format("{0:y yy yyy yyyy}", dt); // "8 08 008 2008" year String.Format("{0:M MM MMM MMMM}", dt); // "3 03 Mar March" month String.Format("{0:d dd ddd dddd}", dt); // "9 09 Sun Sunday" day String.Format("{0:h hh H HH}", dt); // "4 04 16 16" hour 12/24 String.Format("{0:m mm}", dt); // "5 05" minute String.Format("{0:s ss}", dt); // "7 07" second String.Format("{0:t tt}", dt); // "P PM" AM or PM
By using any combination of these letter groups within a format string, you can display a DateTime in any possible way you need. Between each letter group, you may also want to include a symbol such as a comma, colon or slash. The slash and colon symbols are special characters known as the date separator and time separator respectively. One thing to keep in mind is that the date and time separator characters may be displayed differently depending on the current culture of the application. Month and day names will also be displayed in different languages based on the culture.
// DateTime format examples String.Format("{0:MM/dd/yy}", dt); // "03/09/08" String.Format("{0:dddd, MMMM d, yyyy}", dt); // "Sunday, March 9, 2008" String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9/3/2008 16:05:07"
If you ever come across a situation where you need to set a property of an object in XAML to be a format string, you may notice a small problem. Format strings such as the ones described in this blog post start and end with the curly bracket symbols. So the following code will fail to compile because the curly bracket is a special character which XAML will interpret in its own way rather than using it as a string.
<MyFormattingObject FormatString="{0:0.0}" />To get around this issue, all we need to do is place an empty pair of curly brackets before the format string to tell XAML to interpret it as a string value.
<MyFormattingObject FormatString="{}{0:0.0}" />For a more extensive list of format string tips and tricks, you can follow this link to find DateTime formats, and check here to find string formats for doubles.
In this blog post we will have a quick look at the main mechanism used for providing interaction visuals to control templates in Silverlight. Instead of using triggers like in WPF, Silverlight provides a system called the Visual State Manager which we can use to change the appearance of a Silverlight control based on the current state that the control is in. In the Silverlight world, each control has various visual states that it can be in such as ‘normal’ or ‘mouse over’. Furthermore, within each control, related states are grouped together and given a group name such as ‘CommonStates’ or ‘FocusStates’.
The first thing to do when making control templates for Silverlight is to include the following namespace reference at the top of the xaml file that will contain the templates.
xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”
Now, lets look at a very simple example of a style that can be applied to a Silverlight button.
<Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid> <Border Background="{StaticResource ButtonBackground}" BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" /> <Border Name="MouseOverBorder" Background="{StaticResource MouseOverButtonBackground}" BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" /> <Border Name="MousePressedBorder" Background="{StaticResource PressedButtonBackground}" BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" /> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,0,5,0" /> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal" /> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0:0:00.200" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverBorder" To="1" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Duration="0:0:00.000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MousePressedBorder" To="1" /> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
This style provides interaction visuals for the mouse over and mouse pressed actions of a button. Here you will see that the root element of the control template is a Grid. Within this grid are 3 Border objects. Each Border corresponds to one of the button states and have different background brushes. The first border defines the neutral look of the button and the remaining ones have zero opacity making them invisible. Below the Borders and the ContentPresenter are some lines of code that are using the vsm namespace. The first tag is the VisualStateManager.VisualStateGroups. Within this are the VisualStateGroups containing the VisualStates that we need. The content of a VisualState is a Storyboard object which can contain any number of various animations. The most common animation to use here is the DoubleAnimation as seen in the above style. The double animations here are changing the opacity of the appropriate Border object to 1. This makes the border visible and covers up the neutral border, thus changing the appearance of the button.
Other animations that are useful for Silverlight control templates are ColorAnimation and ObjectAnimation. ColorAnimation is an alternative to using a DoubleAnimation when all you need to do is change the color of something. Though, if your working with gradient paints, DoubleAnimation is much easier. The ObjectAnimation can be used to change the value of any property. This is useful for various tasks such as changing the visibility of the popup within a ComboBox template. Changing the duration property of any of these animations will provide animated transitions from one visual to another as the control changes state.
Other things to notice in the above style is that the ‘Normal’ state is included even though it doesn’t contain any animations. There is a difference between including an empty VisualState, and not including the VisualState at all. In this case, we need to include the ‘Normal’ state to allow the button to return to normal when the mouse leaves. Also, it doesn’t matter if you include the visual state groups before or after the content of the grid. This just depends on your personal preference.
If you need any advice with creating control templates for any of the controls in our Silverlight Elements pack, then let us know and we’ll be there to help.
We are proud to announce the release of Silverlight Elements 1.1. In this version we have added a whole bunch of interesting new controls to add an even richer user experience to your applications. All five of our current Silverlight themes have been updated to include all these new controls. We have also added new features to a few of the existing controls. The TimePicker and TimeSpanPicker controls now have up/down functionality and have the option to hide the drop down button. The Scheduler now supports custom schedule items which can be easily templated and added to the control.
The Mindscape Slider control includes tick mark support as well as the usual Slider functionality. Tick marks can be displayed above or/and below the slider track, and the spacing between the tick marks can be changed. You can also specify whether or not the slider thumb should snap to the tick marks. The Slider can also be oriented vertically as well as horizontally.
The Mindscape DualSlider control includes all the features that we have put into the Slider, and also contains an additional slider thumb. This control is useful for selecting the start and end values or some kind of range. The thumbs can be moved either individually or at the same time by dragging the area between them. Various properties allow you to specify a minimum and maximum range, and also whether or not the thumbs are able to pass through each other.
You can read more information about the Slider and Dual Slider here, or play with them in our online demo.
The DockPanel provides a layout strategy that arranges its children around the inside of its edges, like the WPF DockPanel. Individual items can be told which edge to be aligned against, and you can specify whether or not the last item should fill the remaining space or not. Have a look at the online demo where you can experiment with changing the width, height and dock properties of each of the items in the DockPanel.
The Mindscape DualProgressBar can display the progress of individual sub-operations at the same time as the overall progress. If you don’t need to show the progress of an individual sub-operation, then you can still use this control as an enhanced version of a normal ProgressBar. Custom content can be displayed at the start, center and end of this control which can be text, images, bindings to the current progress or anything you fancy.
Read more information about the progress bar here, and have a look at it in the online demo.
The Menu control organises application commands into one easy to access location. This control is based on the familiar Windows menu component and makes is simple for users to discover what your application can do. Menus can include icons, checkable items and separators, and can be nested to provide a cascading menu effect. You can also set up particular menu items to remain open after the user has clicked on them.
You can read more information about the Menu control here, and see it in action with our online demo.
This control is both a button and a menu combined. This control is useful when you have multiple related commands where one of the commands can be used as a default. The SplitButton acts like a button by raising an event when the user clicks on it. Further commands can be accessed from the drop down menu part of this control. Menu items can be added to the SplitButton in the same way they are added to a menu, and just like a menu the SplitButton supports cascading menus, icons and separators.
You can read more information about the SplitButton here, and see it in action with our online demo.
The Expander can tuck away its content and then display it only when the user wants to see it. This control is similar to the Expander seen in WPF and can accept any kind of visual content. You can also set it up to expand its content in an upward direction.
This control is a replica of the tab system seen in the Microsoft Outlook application. It displays a stack of tabs which can be used to select what content it should display. The thumb in this control can be dragged up and down to change the number of tabs that are visible. Tabs that have been collapsed can be seen in a smaller form in the tray at the bottom of the control. While collapsed, a tab can still be clicked to display its content. All the content and header content of each tab can be whatever you want it to be.
You can read more information about the OutlookBar here, and see it in action with our online demo.
This is an ideal control for selecting a decimal value. The NumericUpDown displays a value which can be edited in a few different ways. The control is styled with a pair of buttons that can be used to increase or decrease the value by a specified magnitude. Clicking on the control and then using the up or down arrow keys will also increase or decrease the value. The user can even type directly into the control to input what ever number they need. This control can limit the users input by setting the minimum and maximum values, and the number of decimal places to display can also be set.
Looks useful? Try out the online demo and download the free trial version to give it a spin. And if there’s a new feature or control that would be useful for you, why not let us know in the forums? And you can get more information about Silverlight Elements here.
You should join our newsletter! Sent monthly:
