IE6 (ah bless) is oddly paranoid when rendering https sites. This can be seen when it attempts to use a page that contains a Silverlight application. The problem stems from the default template Visual Studio generates for hosting the application. It contains a invisible iFrame element, apparently to support Safari. However, if you attempt follow the links to explain why Safari needs such a hack you hit a dead-end. Assuming that was because Safari 4 has since been released I tested the previous problem, that you can't correctly browser-back to a page with SL content. It seems to work fine. However, Ken Tucker pointed out that Silverlight Navigation now requires the use of this iFrame. So the simplest solutions is to add a src="#' attribute to the iFrame - this doesn't seem to cause any problems to "modern" browsers and IE6 now understands that the src is secure.

Silverlight & Blend try and encourage you to separate styles and structure in much the same way as you should with HTML and CSS. However, Blend can be confusing as it will offer up some properties to be changed but “hide” others. One example of this is the seemingly simple task of changing the colour of the text in a button. You’d be forgiven for thinking you can select the button and directly edit the foreground colour since the background is available. You must ignore this temptation, if you don’t attempt to make style changes directly to the structure (control) then you’ll avoid a lot of confusion. I’ve created a little tutorial to show one way of solving this;

1. Create a new project in Blend and accept the defaults.
   
2. Add a button
   
3. Select the button, hint using the control tree is often more reliable, right-click and choose Edit Templatate->Edit a Copy. To promote separation I recommend saving the style to the Application. You should give the style a good name, but I’ll be naughty and leave it at ButtonStyle1
   
4. You’ll now find yourself in the Template for the button. Ignore this and return the MainPage.xaml (there is a quicker way but lets keep things simple). Now you want to change the colour of the button, so you need to edit the buttons style. Select the Resources tab and click the button to edit ButtonStyle1
   
5. Now switch back to the Properties tab and you can change the Foreground (remember to drag the little colour select from the bottom left of the selector).
   
6. All done.

So the “take home” from this is don’t make style changes directly to your controls always look at changing the separate style xaml, not only will you have better separation but you’ll avoid a lot of frustration when trying to find the property you want to change.

Another quick bookmark of a blog that talks about an open source database project that could be ideal for Silverlight out-of-browser applications

Embedded Database Engine for Silverlight Applications

Just discovered Code Run which is basically a Visual Studio clone that runs online, even has Silverlight projects. 

Quick post so I don't lose it, Cross-domain policy file specification

Today I got a rude error message from my application when I attempted to do a very simple operation, that of removing an item from ListBox; "Operation not supported on read-only collection."

The problem stems from the fact that I’d bound my ListBox to an ObservableCollection, once bound the Items collection becomes read-only. A know some others have had the same problem so I thought I’d blog about my solution.  Utilizing a function, I’d previously blogged about, to find the ListBoxItem from a button click I then do a little casting and the item is removed;

One of the problems with Silverlight is that the templating mechanism is really good but you can quickly get a bit stuck. I ran into one such example when I had created a nice DataTemplate for a ListBoxItem that contained a button. When the button is clicked I wanted a specific action to take place in the context of the containing list box item, i.e. I wanted the list box item to be selected because the user has pressed a button within the item.

 

The problem is that the Button_Click event will fire but none of the event args will explain which of the potentially many buttons has been pressed. WPF uses tricks such as binding the button’s tag to an ancestor element but SL2 doesn’t (I believe) offer this feature. One solution is to skip the button click event and simulate the button via some mouse down events and event bubbling but that seemed too dirty for me. So I thought I could walk the control tree and find which ListBoxItem the button was within. You have to be a bit careful here because templating/themes can introduce a different logical tree so you must walk the tree looking for a ListBoxItem rather than assuming a specific number of hops. BTW, in theory the ListBoxItem itself may have been “styled” out too so you should degrade gracefully if you can’t find the ListBoxItem.

So I wrote some code to loop and walk the FrameworkElement.Parent properties. This didn’t work since the .Parent returned null at the ContentPresenter boundary, i.e. before the ListBoxItem. Still not sure exactly why that is, but I needed a quick solution so I turned to the Visual tree instead. This proved to be the solution…

A bit of tenuous Silverlight post but hey it's running in Silverlight. A nice application showing a large number of user experience "patterns".

Just read an interesting blog about Evangelising Silverlight. I didn't realise it was realised in Windows Update, I'll have to check that out.

One thing I didn't mention in my last Silverlight post was about how to create a cross domain policy file to allow Silverlight to use a web service. I found this xml snippet post to be very helpful.

Ok, so strictly this should be entitled Integrating Web Services and ASP.NET membership authentication but it's from a Silverlight client hence the title. So in my previous post I provided a link to a great article explaining how to get a Silverlight client to use ASP.NET membership features. The next step for me was how to a write a web service that will only allow calls from a Silverlight user who has signed in. Here is how I did it;

Assuming you have followed the previous post and now have a Silverlight client that can authenticate users via the membership providers then the next step is to write your web services.

1. Create Service
Although you can as a web service to the current ASP.NET site it's probably more likely that you'll want a separate web service project so Add->New Project->Web Service. If you're using the default templates then you should see a HelloWorld web method created for you.

2. Connect the Service to the same Membership database
As I mentioned in my previous post, you're better off providing your own connection string for the membership store, so now you've created a new site you have to add the same connection string to the web service, something like;
3. Add a reference from your Silverlight client to the service
In the Silverlight project Add Service Reference and press discover. If your service doesn't show make sure you've built the project, VS sometimes won't spot the new project until it has been built.

4. Add the code to call your service
Nothing special here except you may want to catch exceptions because the user isn't authenticated (forgive the rubbish use of Execption here);

To handle the exception correctly you need to delve into the inner exception but hopefully you get the idea.
5. Secure the web method
The easiest way to secure the method is to add a System.Security.Permissions attribute to the method;

There you have it. One "secure" web service. If your user is authenticated via membership then they'll have access, if they don't then the service will tell a white lie and say the service doesn't exist.

 

Silverlight (and WPF) provides very powerful mechanisms to change the look and feel of standard controls. However, as I’ve discovered, it’s not always obvious how to let Blend help you affect the changes.

Blend – friend and (innocent) foe

Recently I wanted to both edit the style (change the basic properties such as colour and font) and template (change the layout and structure of a control) of a Listbox. The main change I was after was to make the list horizontal rather than vertical whilst retaining all the other Listbox features.

Creating sample data

So before we discover where to go to make the changes I want to see some example data in Blend rather than running the application. One method is to; in Visual Studio create the basic class that you’ll bind the Listbox to. Return to Blend and select the Listbox->Properties->Items (Collection)->Add Another Item. Select the class you created and enter in your example data. You then go into the Xaml view and copy and paste the sample data as you wish. So we have data but how to style it? Once you have your Listbox selected Blend has many options; Edit Style, Edit Other Styles, Edit Control Parts (Template), Edit Other Templates. So there you have it, not a confusing array of choices at all! So what do these options do for you?

<ListBox Margin="0,0,17,0" VerticalAlignment="Top" Height="100">

            <ListBoxItem Content="There was a monster from Leeds"/>

            <ListBoxItem Content="who ate a packet of seeds"/>

            <ListBoxItem Content="in less than hour, his nose was a flower"/>

            <ListBoxItem Content="and head was a garden of weeds"/>

        </ListBox>

        <ListBox Margin="0,115,17,85">

            <SLLB3:Lymeric Verse="There was a monster from Leeds"/>

            <SLLB3:Lymeric Verse="who ate a packet of seeds"/>

            <SLLB3:Lymeric Verse="in less than hour, his nose was a flower"/>

            <SLLB3:Lymeric Verse="and head was a garden of weeds"/>

        </ListBox>

Figure 1 Standard and Sample data Listboxes - Xaml

Figure 2 Standard and Sample data Listboxes

Edit Style

The main sub-menu here is Edit Copy. Essentially I want to steal the current style of the Listbox and make a few adjustments, so Edit Copy inserts the current template for you, good news. So we’re at the style level, lots of colours, fonts, etc. Inside the style is the setter for the template. So with Blend looking at the style you can then select Edit Control Parts (Template) and you’re ready to change the layout…well not quite. What I’d expected to see was a large chunk of Xaml describing the state changes for events such as mouse over, leave, etc. What I get was a very dry few lines showing a content presenter…hmm not much use.

Figure 3 Changing a copy of the default style

Edit Other Styles

The sub menu here ItemContainerStyle is the one I’m after. Translating Blend speak, this creates the Listbox Item Style (and template). Once you have a style for a Listbox item you’re free to edit its Control Parts (Template)…

Figure 4 Changing the Listbox Item style

Edit Control Parts (Template)

If you attempt this with the List Box selected you end up with the dry container style you get from Edit Style. However, you should select this after you’ve gone via Edit Other Styles->ItemContainerStyle, i.e. with the style selected. This will take you to the template of the Listbox item (or Control Part Template in Blendease). Finally we’re at the good stuff, Visual State Manager Xaml everywhere.

Figure 5 Changing the MouseOver state to a "nice" pink

Edit Other Templates

Other Templates has two menus; Edit Generated Items (ItemTemplate), Edit Layout of Items (ItemPanel).

Edit Generated Items (ItemTemplate)

Translating Blend this creates the Data Template, i.e. the controls to render the items of data you’re going to bind to. So for a standard Listbox this would be a TextBlock bound to toString. This is an important template if you want to display other data types, e.g. bound images and captions.

Figure 6 Data Template, at last the data

Edit Layout of Items (ItemPanel)

Item Panel means the control (or controls) that contain the items in the data template, i.e. think of it as the data repeater. In my case this is the template I needed to change in order to get the Listbox to display horizontally rather than vertically.

Figure 7 Changing the layout to a Horizontal StackPanel

 

So there you have it, the first steps in styling & templating a listbox. What I’m looking at doing next is to rearrange the scroll bar…