Brendan Enrick

Daily Software Development

How to Change or Remove the No Data Series Message in a RadChart for Silverlight

I’ve been working with the charts from Telerik’s RadControls for Silverlight. I am of course not blocking the UI when I make my requests to get my data for the charts. Since I am doing this late-loading of the data into the charts it causes them to initially show a message, “No Data Series.” This message is not a bad default message since it provides adequate information about why the chart is not displaying data.

NoDataSeries

However, since my charts will always start with no data, that message is quite silly. Luckily, changing or removing that message is easy. There is a convenient property on the ChartArea object called NoDataString, and in my case I set that as an empty string and I receive this nice blank chart now. I could potentially change the message to something else.

BlankChart

Snippet of Relevant Code

<UserControl x:Class="MyProject.UI.Charts.MyChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:telerikChart=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
    xmlns:telerikCharting=
"clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot">
        <telerikChart:RadChart x:Name="Chart1" 
           UseDefaultLayout="False">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
 
                <telerikCharting:ChartTitle Content="My Chart" 
                  HorizontalAlignment="Center"/>
                <telerikCharting:ChartArea x:Name="ChartArea1" 
                  Grid.Row="1" NoDataString="" />
            </Grid>
        </telerikChart:RadChart>
    </Grid>
</UserControl>

Create a Custom Layout in a RadChart for Silverlight

The default layout for the RadChart for Silverlight is a very common one. It has a title at the top, a legend on the right, and an area in the middle reserved for the chart. It looks roughly like this.

DefaultLayout 

If you started by using the default layout for the chart then you probably used these properties in some way.

Chart1.DefaultView.ChartArea
Chart1.DefaultView.ChartLegend
Chart1.DefaultView.ChartTitle

When you switch you’ll be adding in your own custom content inside of the RadChart tag in the XAML. You can only have one piece of content inside of the RadChart tag, so make sure you put in something like a Grid to do the layout. In this case I am removing the Legend and am going to just have the Title and Area in the chart, so I add this XAML for my chart. With this in place I am now able to see a spiffy new chart.

UsingDefaultLayout

One more thing to do here. I’ve got my new layout in there but the chart is still using the old layout. Notice that the space for the chart and the legend still exist. I have to tell the chart that I don’t want it using the default layout anymore. There is an all-too-obvious name for the Boolean property to disable the default layout. Just set UseDefaultLayout to False in the XAML and you’ll be using the correct layout.

CustomLayout

XAML for Custom RadChart Layout

<telerikChart:RadChart x:Name="Chart1" 
        UseDefaultLayout="False">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
 
        <telerikCharting:ChartTitle
            Content="Number of Hamburgers Eaten" 
            HorizontalAlignment="Center"/>
        <telerikCharting:ChartArea 
            x:Name="ChartArea1" Grid.Row="1" 
            NoDataString="" />
    </Grid>
</telerikChart:RadChart>

Silverlight Attached Properties

One cool feature of XAML is the concept of an attached property. These properties are a way of extending the properties of an element in XAML. By this I don't mean that you can add any arbitrary extra property to an element. What I mean is that child elements have certain properties from their parents attached to them. This is often used as a way of allowing a child element to interact with a parent.

A couple of examples of what I mean can be found in the DockPanel and the Canvas elements. Some attached properties you will find from the Canvas element are Canvas.Top, Canvas.Left, and Canvas.ZOrder. These three let you control the location of the child element within the canvas. A DockPanel element gives DockPanel.Dock, because it is important to know where on the DockPanel your child element is docked.

You have probably noticed by now the naming of these attached properties. They are named in the following way.

ElementName.PropertyName

Here are some examples of how to use these.

<DockPanel>
  <Button DockPanel.Dock="Left"/>
</DockPanel>

<Canvas>
  <Ellipse Width="100" Height="100" Fill="Black"
    Canvas.Left="25" Canvas.Top="25" />
</Canvas>

Notice I've docked the button to the left of the DockPanel and the Eliipse has been positioned away from the left and away from the top of the canvas.

It would be a nightmare to try to control positioning of elements inside of the canvas anywhere but on the specific element, and the attached properties allow this to happen. I think they are quote cool.

Handling Keyboard Input in Silverlight

Keyboard input is one of the most important aspects of truly rich programming environments. I understand that one usually identifies a rich interface as one which can interacted with visually. This interaction feels more natural than keyboard interaction. The mouse allows the user to feel as if he can truly manipulate the environment in which he is working. One cannot, however, ignore the importance of the keyboard in any environment expecting to be able to perform much meaningful work. Again I'll be talking about some code that I wrote many months ago. Sorry for being so late mentioning this stuff. I just need to find more time in the day. I'll find that 25th hour eventually.

Handling keyboard input with Silverlight 2.0 is very easy. In Silverlight 1.1 there wasn't even an enumeration for the keys. Now that it is included one simply has to wire up some handlers for keyboard input. For my purposes I've been using it for gaming, but others could be using this for almost anything. Keep that in mind and use this by adapting it to your needs at the time.

Initializing the key up and key down event handlers is very easy. You just call a couple of lines like these and create a couple of empty methods which we will write later, so we start with this.

this.KeyDown += new KeyEventHandler(Page_KeyDown);
this.KeyUp += new KeyEventHandler(Page_KeyUp);

This will tie these events to the page. If you want to tie them to another element, use its x:Name instead of this. I like to have a more central method for handling keyboard events, so I'll create a method for handling the keys and I will call that method in my event handlers.

private void Page_KeyUp(object sender, KeyEventArgs e)
{
    HandleKey(e.Key, false);
}

private void Page_KeyDown(object sender, KeyEventArgs e)
{
    HandleKey(e.Key, true);
}

Notice that the KeyEventArgs parameter, e, has data about the event, so if you needed more information from it you could obtain it and pass it to HandleKey also. I prefer this to having too much logic directly in my event handlers. The boolean value I am passing is just letting me know whether the key is being pressed or released.

In a game it is important to know the state of the keyboard at any given time. Since Silverlight currently doesn't tell me if a key is being pressed I use this system to allow me to detect a held key as well as when keys are pressed and released. If you're doing something similar then you will probably use something similar to this.

private void HandleKey(Key key, bool isDown)
{
    switch (key)
    {
        case Key.Escape:
            if (isDown) EndGame(Enums.EndGameType.Quit);
            break;
        case Key.Up:
        case Key.W:
            _upIsPressed = isDown;
            break;
        case Key.Down:
        case Key.S:
            _downIsPressed = isDown;
            break;
        case Key.Left:
        case Key.A:
            _leftIsPressed = isDown;
            break;
        case Key.Right:
        case Key.D:
            _rightIsPressed = isDown;
            break;
        default:
            break;
    }
}

By knowing the state of the keyboard at any given time, I can allow my silverlight game loop to know what keys are currently being pressed and respond to them. This allows the game to play along as the user uses keyboard input to interact with the game. These same ideas and code can be modified easily to work with nearly anything. This is why I make sure that the code snippets I show are quite simple. It makes them more easily adapted to a variety of solutions.

I hope everyone is enjoying Silverlight. Make sure you listen to the Silverlight Song. It is a riot.

Creating a Game Loop Using Silverlight

I've been playing with silverlight as a gaming platform for a few months now. I've not published or released anything I've done yet, but I expect I will at some point. I am not much of a game developer really, and I've been hacking things together as best I can. I, like many other developers, have always found game development to be quite interesting. So for now I'll talk about how to create a game loop.

What are Game Loops Used For?

In most games you need to have some control over the passing of time. You always need to be constantly able to respond to user input without stopping the game waiting for this user interaction. It allows you an opportunity to have the game move with or without the player. This loop will allow you to have computer-controlled enemies and neutrals decide how to act and to take these actions.

How to Create a Game Loop

I've found two ways I like for creating game loops. I am sure that there are plenty of others. If you wanted to, you could also wrap these up into classes so it abstracts the ugly details of creating a game loop. Perhaps a class which just lets you create a new instance of the game loop class and lets you assign a method for handling the looping.

Since I am just trying to show the simple how to of it, I'll leave out the class and leave that as an exercise for the reader. The two ways I know of for creating game loops are to use a System.Windows.Threading.DispatchTimer or a System.Windows.Media.Animation.Storyboard. I prefer the timer simply because it feels more hacky to use a storyboard. This just feels more like it should be some sort of a timer managing this, so it's what I like to use.

 

// Initialize the Main Game Loop

_timer = new DispatcherTimer();

_timer.Interval = new TimeSpan(100);

_timer.Tick += new EventHandler(MainGameLoop);

_timer.Start();

What we've done here is just created this DispatchTimer and told it to run fire the MainGameLoop method every time the timer ticks. The timer has an interval set to 10 miliseconds in this example, so our loop should execute 100 times every second.

private void MainGameLoop(object sender, EventArgs e)

{

// ....

// Do Stuff Here For the Game

// ....

}

Again another exercise for the reader is to create a game by filling in that MainGameLoop as well as other portions of the code. I plan on fleshing out some games if I ever get enough free time to work on it. I'll be back to post some more stuff. I expect it will be more complicated that this. I just don't want to post my whole game yet. It will be released eventually. I am not making Duke Nukem Forever, so you can expect my game will actually release at some point.

Silverlight Expired The Pain of Reinstalling

So I have been ignoring these messages I've been receiving for a while about Silverlight. Now I might not have ignored it, but it said my version of Silverlight expired. Ok so big deal. You might say, "Why not just go get a new version?" Well it says to go to a certain URL. You can't click on the URL, and you can't copy and paste the text. Typing URLs by hand is so mid 90's.

SilverlightExpiredMessage

So the really annoying part of all of this. I just now navigated to that site by typing in all of that junk. And it takes me to the Silverlight page on the Microsoft site. http://www.microsoft.com/SILVERLIGHT/default_ns.aspx

I am also annoyed that the older versions of Silverlight don't still work. So I click the download link, and when the download completes I run the install, and this pops up on my screen.

SilverlightInstallFailed

What the hell shouldn't the link that the error message sent me take me to a page where the download will just work? Since it is the URL from the error message it should send me to instructions at least. So now that my install has failed at least I have a link to click on. It takes me to this nice page where I get some Silverlight help. It has links to actually go to the pages. The kind where I don't have to type in a URL by hand.

SilverlightHelp

So it says I need to uninstall. Why wasn't I told this before I was sent to go download the Silverlight install at first? So just for kicks because I thought it was kind of funny to have it there. I clicked on the Silverlight Uninstall Instructions. The best thing ever happened. Going to that page gave me the error message again. So they actually try to have Silverlight content on the page with the instructions to uninstall Silverlight...... Now this is truly amazing. They actually have videos explaining how to uninstall Silverlight on this page, but they couldn't give me a link in the error message. They could have just said, "You will need to uninstall your current version of Silverlight. You can download a new version here." That would just be way too easy though.

SilverlightUninstall

Just thought I would share that nice bit of fun with you.

The moral of the story is probably something about not expecting error messages to give good information. Perhaps also that some install files aren't smart enough to handle an upgrade of any kind.

Silverlight 1.0 has been released!

I read every blog post Scott Guthrie writes, and I intend to keep it that way. In his most recent blog post he let me know about Silverlight's 1.0 release as well as the announcement that Silverlight will be formally supported for Linux. Silverlight has seemed quite impressive so far, and I had been disappointed about Microsoft's not supporting Linux as well. I am happy to learn that the project called "Moonlight" will be able to run on 3 different browsers in Linux; Firefox, Opera, and Konqueror. As a Linux user myself I am always disappointed in the lack of Linux support given by larger companies. Flash is not very compatible with Linux, so it is quite impressive to see Microsoft assisting in the development of Moonlight.

For those of you who do not know there is an implementation of the .NET Framework referred to as Mono. It is a project in the Linux world which allows .NET code to run in Linux. I've done some development using Mono, and I've even written ASP.NET pages in Mono. So far they've done well in replicating the features provided by for .NET developers.

I think many people are eagerly anticipating the Silverlight 1.1 release which has also been mentioned as the current project Scott Guthrie's team is working on.

I am happy to know that when I write code in Silverlight anyone on any of the main 3 Operating systems should be able to see the Silverlight. If Microsoft can get some big websites using Silverlight, most people across the Internet will have Silverlight very quickly.

I recommend checking out a lot of Microsoft's webpages. I've seen a few of them, and these new Silverlight sites are quite amazing.