Monthly Archives: November 2010

Will it Blend: Wrapping the Text on Silverlight Chart Legends

In the course of my building our ROI app, I was trying to figure out how to wrap the legends of charts when the text gets too long.

This is what I get with the default chart.

image

You’ll see here, there’s a lot of waste of space for the legend when what I really want to see is more of the chart.  So first thing we’ll do is fix the width of the chart. To do that, Right Click on the chart, Edit Template then depending on whether you’ve already been fiddling with your chart template, either Edit Current or Edit a Copy

2010-11-30 13h39_21

When you expand the template, you’ll see a grid within the grid that contains both the chart and the legend.

2010-11-30 13h42_32

You’ll notice that the grid is split into two, a star sized column and an auto sized one. Since autosizing will adapt the column size to the content, we’ll need to change this to star sized as well. You can do that by clicking on the icon and change it to the unlocked lock symbol.

2010-11-30 14h11_07

Now, you should be able to click on the triangle and resize the columns to your desired width ratios.

2010-11-30 14h12_46

You’ll notice that when you do this, your legend area won’t have as much space as before and since the legend items aren’t formatted to wrap by default, the text gets cropped if you have long lines of text.

2010-11-30 14h14_00

Return to the scope of the user control by clicking on this icon in your Objects and Timeline panel

2010-11-30 14h17_00

Find one of your ColumnSeries (or whatever data series your chart is using) Right-click->Edit Additional Templates –> Edit LegendItemStyle –> Edit a Copy

2010-11-30 14h19_22

Give your style a name, and choose where to define this style. This depends on where you will be using this style, if it’s only in this page, then you can choose document. If there are other pages, you think you’ll be using this style in, choose Application. If you want to be able to reuse this style in other applications ,choose Resource Dictionary, choose an existing one or create a new one if you don’t have one yet. This stores the style in a separate file which you can then later on import to your other projects.

2010-11-30 14h23_18

Clicking on OK should then bring your designer to to the LegendItem template designer. If you expand the StackPanel, you’ll see that we have the Rectangle and Title elements. If you look into the xaml code, you’ll see that the Title element is template-bound to a property called Content.

2010-11-30 14h31_26

In my case, since I know that the legend will only represent text content, I can simple delete the title element, replace it with a Textblock object and apply the same bindings. I can do that by first selecting the textbox, search for the text property in the search box of the Properties panel, then clicking on the small square beside the property to access advanced options.

2010-11-30 14h35_30

We select Template Binding –> Content

2010-11-30 14h38_51

One last thing to do is set the width of the TextBox since it’s currently auto sized and we can’t currently set the width to take up the rest of the unoccupied horizontal stackpanel space. Smile If you want your legend to scale dynamically, you’ll need to change the stackpanel into a grid. To do this, right-click on the StackPanel in your Objects and Timeline panel –> Change Layout Type –> and select Grid

2010-11-30 14h46_38

After this step, check on your Rectangle, most likely, the Width and Height properties will be reset to auto so you’ll want to give this a size.

2010-11-30 15h01_40

For the grid itself, it’s Height and Width gets fixed so we’ll want to reset this to auto so the grid is free to resize as it’s content or container feels necessary.

2010-11-30 15h06_16

Now we can add a grid line by clicking on the top portion of our grid, and right after where the Rectangle ends:

2010-11-30 14h49_09

then toggle the grid property (by clicking on the lock icon) until we get Pixel sized.

2010-11-30 14h52_22

We can leave the other column at star sized so it’ll take up the rest of the available space.

2010-11-30 14h51_56

With the TextBox selected, make sure the Width and Height  is set to auto (if there is a value, you can use the button on the right of the field to set to auto), the HorizontalAlignment and VerticalAlignment are set to Justified and the margins are set to the distance you want.

2010-11-30 14h55_05

Now when you go back up to the UserControl scope, you’ll see the TextWrap in effect. Looking at this though, I might want to change the alignment/margins so that the rectangle is aligned to top instead of in the middle just to make it look nicer.

2010-11-30 15h11_13

To go back to editing the template, right click on the ColumnSeries –> Edit Additional Templates –> Edit Current –> Edit LegendItemStyle

2010-11-30 15h12_35

In my case, I chose top aligned with a bit of a top margin.

2010-11-30 15h14_27

Going back out to the UserControl scope, we’ll be able to see the effect.

2010-11-30 15h18_33

You can play around with how you want your legend to look and once your satisfied, it’s time to apply the style to the other series’. No you don’t to do that whole set of steps for each of them so don’t worry. Right click on the other column series-> Edit Additional Templates –> Edit LegendItemStyle –> and this time select ApplyResource and you should see the style you created in the previous steps and click on that. In my case, I named the style LegendItemStyle.

2010-11-30 15h20_05

You’ll notice your legend automatically format itself the same way the previous column series did.

2010-11-30 15h22_34

And that’s it!

Weekend Highlights

The Bad

  • Lost Headphones
    I was listening to tunes on my wp7 on the way back home from work but then uncle cab driver was feeling a bit chatty so I did the polite thing and took off my headphones and chatted with him. I’m not sure whether I remembered to toss the headphones in my bag. I just realized the next morning when I went out for a run that they were gone. Sadness.
  • Scratches on the iPad
    Well so much for the claims of the iPad being scratch proof. I guess they relied on people treating it like a holy object that they didn’t think it would ever happen. But alas, while I was cleaning up the screen of the oils and dirt from my fingers, I noticed there was a scratch right by the home button. Sadness.
  • 160 Dollar Ugly and Useless Screen Protector
    Happened while the F was buying his Macbook air so I just chucked in the first screen protector I could find. It was from the brand Power Support and it was supposed to be a privacy film guard. I probably wouldn’t have complained if it worked as a privacy film guard but no, it didn’t work as good as those privacy films for laptops in that you could still see the screen from the side angles but it would be a bit blurry and a bit dark. Now I have trouble reading my iPad in bed since it’s more difficult to keep it aligned to the eye. Also, my Boxwave stylus doesn’t work as well anymore. I guess this was my fault for not checking the price but I didn’t realize that a privacy film could be so expensive, AND so crappy. Sadness.
  • Failed Vivo City Shopping
    On Saturday, the F and I ventured out to Vivo City to shop for an extra battery for my phone and some clothes for our trip coming up in December. I guess we should have just gone to Ion or somewhere nearby by knowing the weekend crowd, we wanted to avoid that (only to find out there are enough people in SG to accumulate a crowd in most malls on the weekend. I did a search online for the shops I wanted to go to: Columbia and the LG. I found online they were supposed to be on the second floor of Vivo City, but apparently after searching the whole second floor (because they make it so difficult to figure out what the store numbers are) we found that not one, but BOTH have closed down. How I wish that people keep their online listings up to date. We ended up taking a cab to Ion anyway. Sadness.

The Good

  • New Sennheiser Headphones
    Although the bundled in ear headphones from LG was already okay quality, these ones are really good. You can never go wrong with Sennheisers. I love the earphones and it just makes the music listening experience so much better. Aural Pleasure!
  • Lunch with the Old Bosses
    It’s always nice to meet up with old friends. I got to have lunch and catch up with not one but two of my former bosses, catching up on old times. We’re all in different roles, different companies but it’s good that (at least I think) the friendship is still there. Happiness!
  • Good Sunday Breakfast AND Dinner with the F
    We had breakfast at a new place on recommendation from a friend at a place called Wild Honey where they serve all sorts of breakfasts. For dinner, it was at an old favorite, Spices of India for a nice Indian dinner. Chicken Tikka Masala is the bomb. Fullness!

As a friend always says, “don’t sweat the small stuff”. It seemed like a crappy weekend but I think we’re still okay.

Syncing One Note on your WP7 phone with Office Live

If you start up the Office app, there’s a One Note section

IMG_0021

Basically, click on all and then refresh. There will be a prompt that will ask you to confirm the creation of your default notebook on your Skydrive. After that’s done, you should be able to access your notes from the phone on http://office.live.com  I found the Personal (Web)

If it’s not in the recent documents, you might want to check “My Documents” cause that’s where I found mine.

image

So all that works perfect. But what I did discover is you can view and edit your existing notebooks too (though it’s a bit buggy). If you want to try it, go back to the home screen and start up Internet Explorer, then navigate to http://office.live.com

IMG_0023

You can then navigate to the existing notebook you want to edit, and click on its icon.

IMG_0024

That should then trigger the One Note app to open up the notebook:

IMG_0027

You’ll then be able to navigate to the sections on that notebook and edit and sync as you please. One bug in this instance is the One Note app doesn’t seem to name the section right*, in this case the app says “Untitled Section” even though I have it named Project List on Skydrive. Making changes seems to still update the right section though. On another incident where I tried syncing a notebook with 4 sections, 3 of the sections ended up having the same name, even though they were named differently on the server. I’m sure they will send out an update to fix this problem soon.

IMG_0028

Oh, and if you want to stop syncing (or want to try re-adding the notebooks to try and fix the section names) just tap on the trash bin icon at the bottom, that will prompt you to select the notebook to delete and it will stop syncing to your phone.

*UPDATE: Seems that the issue is fixed now. If you have any untitled sections, you can just delete and readd them to have them showing right. 😀