Silverlight Book control released!

Wow, Silverlight Elements is getting some attention lately! Yesterday we announced that charting controls were being rolled into the nightly builds and today I’m excited to announce the inclusion of our Silverlight Book Control. This is a great control for presenting readable data in a manner that is familiar to people while at the same time being flexible enough for developers to host any content they want. So you can host images, text, scheduler controls, 3D spinning cubes, whatever you want – and still get the nice smooth animating page flip effects.

Here’s some pretty pictures:

Silverlight Book control with open pages

Standard view of the book open at pages 6 & 7.

Turning a page in the Silverlight Book Control

Turning a page in the book control is visually beautiful, feeling like a real book. Either drag pages over or simply click to flip fast.

Fliping pages back in the Silverlight Book Control

Turning a page backwards. The pages are complete databindable, supporting any content you may want to show in the book.

Jason started developing this control some months ago in the evenings for fun and we loved it so much that it’s now being included in our official Silverlight control suite!

Check out the whole Silverlight Elements suite here which includes many other controls to make your applications sing and dance.

Note: The book control is in the current nightly builds so you will need to grab it from the nightly build page, or if you’re one of our much loved customers, you can grab it from your store page here.

Silverlight charts beta is now available

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:

Silverlight bar chart with labels

Line charts:

Line chart in Silverlight

Pie & doughnut charts:

Pie chart with data labels in Silverlight

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.

Coming soon: Charts for Silverlight & WPF

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.

Line chart in WPF and Silverlight

A simple line series graph showing various styles for lines and automatic legend generation for the various series.

Category axis support with Silverlight and WPF Charts

A simple bar graph with category axis support in use.

3D bar styles for Silverlight and WPF Charts

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 in WPF and Silverlight charts

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.

Pie chart in WPF and Silverlight Charts

A simple pie chart with lighting effects applied.

Doughnut charts are delicious when coated with sugar.

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).

String formatting in WPF and Silverlight

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.

C# String format for double

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"

C# String format for DateTime

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"

Format strings in XAML

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}" />

More information

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.

Tagged as General, Silverlight, WPF

Introduction to Silverlight control templates

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.

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top