Xamlhouse > Microsoft Silverlight Exploration

Here are a few more accordion variations. The non-colorful ones are set up so that there is one user control, ie:

And the colorful versions of the accordion are set up so that each individual tab is a different user control. This is so that it is easier to edit the content in the accordion tabs and the color variations also. Example of how it is show in the Page.xaml file:

What I like most about Silverlight 2.0 is creating animations dynamically through code. Before with 1.1, you could do it, just not very easily. Now with this accordion, every animation is created dynamically with this one section of code:

So for instance if I wanted to make the second tab open I would do this (in the page.xaml.cs file):

This calls the function animate, which is in the accordion.xaml.cs file:

And in the beginning of the accordion.xaml.cs (when the page was loaded), we created the initial animation:

And that’s it! It was all pretty simple, you will see in the code that there is some logic to handle the tabs (i.e if you click on tab 2 and tab1 is already open, you have to close tab 1).

Source Code:

Accordion_Vertical_Color
Accordion_Vertical_NonColor
Accordion_Horizontal_Color
Accordion_Horizontal_NonColor

-Jess

I have just updated our two widgets to Silverlight 2.0. Overall the process wasn’t that hard, with the tweening buttons it was just a matter of cut and paste. However with the slider controls, I wanted to use the new sliders built in with the new Silverlight, so in order for them to look like they were before I had to skin them. It is definitely not as easy as it should be, and tool a good amount of work to get it working like I would like. With the help of liquid boy’s post and his awesome diagram I was able to finally skin the slider.
Anyways, the process wasn’t too bad I suppose, I ended up using fewer lines of code for both widgets (with the new version) which is always nice. And the sliders work very smoothly now.

Slider Controls 2:
View it | Source code

Tweening Buttons 2:
View it | Source Code

-Jess

We would like to thank Tim Wood and EffectiveUI for giving us gifts of software and books on Silverlight.





Thanks!


-Jim

More of the interface…


Since our goal is to keep usability at the forefront, we’d really like to stick to a clean design that is easy to follow. Things like the color-coded sections, straight-forward icons and open typefaces all play into that. These are prelims of the gallery and calendar sections that we’ll begin to incorporate into Blend once we get them finalized. Any thoughts or feedback?








-Matt

Yesterday I was working on an Image Gallery using Blend 2.5 March 2008 Preview. I had made a new Silverlight 2.0 project in VisualStudio2008, and opened the solution file in Blend 2.5 to make a widget. Everything was going great, I had sliders, it was using my computer to pull images off of…and then I got the “blue screen of death”.

I had tested the solution in a browser several times before, but for some reason when I went to test it this time (around 6 p.m.) I got the blue screen and error numbers. I found I could only log into Safe Mode (no Safe Mode with Networking or anything else as any other mode brings up the blue screen). I tried disabling my NIC due to the advice of my Computer Science major buddy, but the screen still prevailed.

We then attempted to seek out what was causing the error, and we still are not fully sure. What we do know by checking the Event Viewer in safe mode and looking at the System errors, was that Silverlight and SQL ran into some kind of error around 6 p.m. that caused the initial crash.

We wrote down the error codes and googled them to find out that it is some sort of driver issue. The error is labeled “DRIVER_IRQL_NOT_LESS_OR_EQUAL”.

I received some error codes that apparently don’t exist, however. The big error code is as follows:
0X000000D1 ( 0X006A0193, 0X00000002, 0X00000000, 0X006A0193). The 0X000000D1 error does exist, but the 0X006A0193 error apparently can’t be identified.

If anyone has any idea what is wrong or how to fix it, I will be looking for help until next week. After that, I will have to reformat/reinstall Windows XP and install all my development software again. This has been very frustrating and this error simply will not go away, I need to fix or reformat it seems. Any help is GREATLY appreciated!

Note: I never received any errors like this or any issues until installing the components for Silverlight 2.0, if that is of any help.

-Andy

Since we have comprised a web application design that is sufficient on its own, we are running into difficulty designing a logo. We have however, decided on a name for our application, which is sprout.


The nature of this application is to create a sense of community that promotes growth and support within a select group of users. This organic theme brought us into our first round of comps in our logo design process. Most of these designs had curvilinear elements that complemented a simple and clean serif typeface. They were very nice, however they seemed to be a bit too organic and curvy for our more ridged accordion interface.


We are now trying to stick with our simple san-serif typeface, while incorporating a more abstract element that gives the illusion of growth without being too literal. Here are some of the designs we have created along our logo quest.





-Sarah

Here are three comps that will offer a glimpse into our progression. As a family-oriented site we understand the importance of ease-of-use, visual hierarchy, and simplicity. We have explored color combinations, icons, and will continue to improve the design so that Grandma and Little Sister will both enjoy their experience.

This initial comp uses vibrant colors to separate the sections. The typographical theme is not quite solidified so you can see 3 different typography styles. We have the icons at the bottom, which we modified in the next comp. We also decided this comp was a little too busy, so we really “lightened the load” on the next comp.

This comp we tried more subdued colors, icons on top and really lightened the amount of content in each section. We decided it was a little too light, and should provide a little more to munch on, on the portal page.

This last comp shows our current comp. We added a vibrant yellow to the mix to break up the blues. We dropped the section titles out of the frame and onto the bottom bar. There is more content, that is separated by light overlays, but not too much content.

We are happy with what we have currently, but will continue to sharpen the design and explore usability.

-Nate

Microsoft unveiled the newest versions of Internet Explorer, Silverlight, and the Expression Studio package at their web developer and designer conference MIX08 on March 5.

The new versions include Internet Explorer 8.0, Silverlight 2.0, and Expression Studio 2.0. It is clear that Microsoft is taking steps to improve their Expression applications with this newest release. Developers have been itching for Silverlight 2.0 to launch since late last year when Microsoft announced that it would release the version “early next year”.

All of these new versions are public beta, and available for download now.

Microsoft also announced plans to deliver Silverlight content to Windows Mobile devices with the new release.

Expression Studio 2.0 includes features such as PHP support and a new version of Expression Blend – 2.5.

In addition, Microsoft also introduced the Expression Professional Subscription which allows subscribers to download the entire Expression suite as well as other software to help them get started.

Visit http://silverlight.net/GetStarted/ and go near the bottom of the page to get started in Silverlight 2.0 beta today!

-Andrew

Part 1: Creating a UI Element

We will start off by making a UI element in Microsoft Expressions Blend. To begin, create a button and rollover animations using the timeline, right click on it and select “make control”. You will then see a new XAML and C# file show up in your project files. From there you will need to build the solution by going to Project–> Build Solution. Continue by going to your page.xaml file, selecting the Asset Library ( looks like this: >>) icon on your right toolbar, select “custom controls”, selecting your button xaml file, then drawing where you would like to place it on the canvas.

Part 2: The C# Files

Lets start out with the button.xaml.cs file. First we make a framework element variable called initialElement. We do this so that we can use “FindName()” to find the elements that we want to alter.

public class Button : Control
{
FrameworkElement initialElement;
public Storyboard mEnter;
public Storyboard mLeave;
public Storyboard mDown;
public Storyboard mUp;
public Button()
{
//automatically created stuff
Stream s = this.GetType().Assembly.GetManifestResourceStream("TweeningButtons.Button.xaml");
initialElement = this.InitializeFromXaml(new StreamReader(s).ReadToEnd());

//finds the storyboards (animations)
mEnter = initialElement.FindName("myMouseEnter") as Storyboard;
mLeave = initialElement.FindName("myMouseLeave") as Storyboard;
mUp = initialElement.FindName("myMouseUp") as Storyboard;
mDown = initialElement.FindName("myMouseDown") as Storyboard;

}

From there we can then set functions to start the storyboards of the rollover animations like so:

public void playMouseEnter()
{
mEnter.Begin();
}
public void playMouseLeave()
{
mLeave.Begin();
}
public void playMouseUp()
{
mUp.Begin();
}
public void playMouseDown()
{
mDown.Begin();
}

Now go to the Page.xaml.cs file and make event handlers to call those functions in the button.xaml.cs file.

Part 3: The Tweening

In the Page.xaml file make another instance of your UI button, then make an animation using the timeline to move that button. You can make it ease in or ease out by right clicking on the key frame like so:

Now you will notice in the XAML code that it has created render transform properties for your button. Where it says <TweeningButtons:Button.RenderTransform> you are going to want to change that to <Canvas.RenderTransform> Otherwise you will have a parser Error. So, your XAML for that button will end up looking like this:
<TweeningButtons:Button Width="192" Height="64" Canvas.Left="16" Canvas.Top="60" RenderTransformOrigin="0.5,0.5" x:Name="Button1" Cursor="Hand">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
</TweeningButtons:Button>

Now all that is left is to go back to your page.xaml.cs file and make an event handler for the button to start the storyboard element when the button is pressed.

And thats it! You can :

see it in action
download the source

-Jess