• Expression Studio 4 Community Launch Event

    28-5-2010 16:05:02

    Event

    On June 7th Expression Studio 4 will be launched at the Internet Week in New York. One day later, on June 8th, the Dutch Silverlight and Expression User Group SIXIN organizes the Dutch Community Launch in collaboration with Microsoft and Centric at Centric's office in IJsselstein. To celebrate the 4 Expression release we have two interesting speakers. In addition, we give three packages Expression Studio and more great gifts away.  

    Program

    The preliminary program for the evening is as follows:
    • 5:45 p.m. - Food, drinks and networking
    • 6:45 p.m. - Reception and Introduction by Koen Zwikstra, co-founder of SIXIN and Silverlight MVP
    • 7:00 p.m. - Building Silverlight applications using the new features of Expression Blend by Loek van den Ouweland, founder and web designer for Magic Studio
    • 8:00 p.m. - Break
    • 8:30 p.m. - Tour Encoder and Expression Web by Antoni Dol, senior designer at Macaw
    • 9:30 p.m. - Networking while enjoying a drink
     

     

    Ask your question to one of the speakers


    If you have a question to one of the speakers, then you can by email (info@sixin.nl) or thru Twitter. Send an email with subject # expression4 or send a tweet @ sixinUG and use ...

    Full story

    Comments (0)

    Timmy Kokke

  • Changing CSS with jQuery syntax in Silverlight using jLight

    24-4-2010 14:03:09

    Lately I’ve ran into situations where I had to change elements or had to request a value in the DOM from Silverlight. jLight, which was introduced in an earlier article, can help with that. jQuery offers great ways to change CSS during runtime. Silverlight can access the DOM, but it isn’t as easy as jQuery. All examples shown in this article can be looked at in this online demo. The code can be downloaded here.  

    Part 1: The easy stuff

    Selecting and changing properties is pretty straight forward. Setting the text color in all <B> </B> elements can be done using the following code:   
    jQuery.Select("b").Css("color",  "red");
      The Css() method is an extension method on jQueryObject which is return by the jQuery.Select()...

    Full story

    Comments (0)

    Timmy Kokke

  • Introducing jLight – Talking to the DOM using Silverlight and jQuery.

    12-4-2010 0:36:06

    Introduction

    With the recent news about Silverlight on the Windows Phone and all the great Out-Of-Browser features in the upcoming Silverlight 4 you almost forget Silverlight is a browser plugin. It most often runs in a web browser and often as a control. In many cases you need to communicate with the browser to get information about textboxes, events or details about the browser itself. To do this you can use JavaScript from Silverlight. Although Silverlight works the same on every browser, JavaScript does not and it won’t be long before problems arise. To overcome differences in browser I like to use jQuery. The only downside of doing this is that there’s a lot more code needed that you would normally use when you write jQuery in JavaScript. Lately, I had to catch changes is the browser scrollbar and act to the new position. I also had to move the scrollbar when the user dragged around in the Silverlight application. With jQuery it was peanuts to get and set the right attributes, but I found that I had to write a lot of code on Silverlight side.  With a few refactoring I had a separated out the plumbing into ...

    Full story

    Comments (0)

    Timmy Kokke

  • Building a “real” extension for Expression Blend

    1-4-2010 23:21:15

    Last time I showed you how to get started building extensions for Expression Blend. Lets build a useful extension this time and go a bit deeper into Blend.
    • Source of project  => here
    • Compiled dll => here (extract into /extensions folder of Expression Blend)
     

    The Extension

    When working on large Xaml files in Blend it’s often hard to find a specific control in the "Objects and Timeline Pane”. An extension that searches the active document and presents all elements that satisfy the query would be helpful. When the user starts typing a search query a search will be performed and the results are shown in the list. After the user selects an item in the results list, the control in the "Objects and Timeline Pane” will be selected. Below is a sketch of what it is going to look like.

    The Solution

    Create a new WPF User Control project as shown in the earlier tutorial in the Configuring the extension project section, but name it AdvancedSearch this time. Delete the default UserControl1.Xaml to clear the solution (a new user control will be added later thought, but adding a user control is easier then renaming one). Create the main ...

    Full story

    Comments (0)

    Timmy Kokke

  • Building extensions for Expression Blend 4 using MEF

    22-3-2010 12:34:01

    Introduction

    Although it was possible to write extensions for Expression Blend and Expression Design, it wasn’t very easy and out of the box only one addin could be used. With Expression Blend 4 it is possible to write extensions using MEF, the Managed Extensibility Framework. Until today there’s no documentation on how to build these extensions, so look thru the code with Reflector is something you’ll have to do very often. Because Blend and Design are build using WPF searching the visual tree with Snoop and Mole belong to the tools you’ll be using a lot exploring the possibilities. 

    Configuring the extension project

    Extensions are regular .NET class libraries. To create one, load up Visual Studio 2010 and start a new project. Because Blend is build using WPF, choose a WPF User Control Library from the Windows section and give it a name and location. I named mine DemoExtension1. Because Blend looks for addins named *.extension.dll  you’ll have to tell Visual Studio to use that in the Assembly Name. To change the Assembly Name right click your project and go to Properties. On the Application tab, add .Extension to name already in the Assembly name text field....

    Full story

    Comments (0)

    Timmy Kokke

  • Validation in Silverlight

    14-3-2010 23:27:57

    Getting started with the basics

    Validation in Silverlight can get very complex pretty easy. The DataGrid control is the only control that does data validation automatically, but often you want to validate your own entry form. Values a user may enter in this form can be restricted by the customer and have to fit an exact fit to a list of requirements or you just want to prevent problems when saving the data to the database. Showing a message to the user when a value is entered is pretty straight forward as I’ll show you in the following example.     This (default) Silverlight textbox is data-bound to a simple data class. It has to be bound in “Two-way” mode to be sure the source value is updated when the target value changes. The INotifyPropertyChanged interface must be implemented by the data class to get the notification system to work. When the property changes a simple check is performed and when it doesn’t match some criteria an ValidationException is thrown. The ValidatesOnExceptions binding attribute is set to True to tell the textbox it should handle the thrown ValidationException. Let’s have a look at some code now. The xaml should ...

    Full story

    Comments (0)

    Timmy Kokke

  • StarterKits for Silverlight and Expression

    5-11-2009 21:51:32

    StarterKits for Silverlight and the Expression Tools

    Lately I’ve seen some tweets passing by with links to various StarterKits. I’ve decided to "Bing” around a little and find out what these people were talking about. There are quite a few StarterKits available on various topics. I’ve listed a few below, old and new ones, that I find relevant to my fields of interest: Silverlight and the Expression Blend, Design and Web.

    Building a Zune Website with Expression Blend 3 StarterKit

    In this lab you will learn how to use Expression Blend and Visual Studio to build a Zune mini-website
    This hands-on-lab explains how to build a Silverlight application to view a Zune in various colors. The labs shows a couple of Silverlight concepts like data binding, Perspective 3D and Out of Browser. It contains four exercises:
    1. Control styling and templating
    2. Save files to disc
    3. Perspective 3D
    4. Out of browser
    > Download StarterKit

    Creating a ColorSwatch With Expression Blend 3 Starter Kit

    Learn how to create a fun and colorful color swatch control using Expression Blend 3 custom layout controls. In this Starter Kit you will find assets, labs and a video collection.
    This StarterKit explains how to build ...

    Full story

    Comments (1)

    Timmy Kokke

  • Twirling smoke effect in Expression Design

    16-10-2009 23:54:50

    For a long time I’ve been wondering how to create a smoke effect like used in the Silverlight Logo for example. There are some techniques to render smoke by using 3D modeling software. But creating this effect in a tool like Expression Design is easier than it looks. Below is an example of what the end result might look like. After opening expression Design start by creating a new document.The size of the document isn’t very important as long as you have a bit of space to play with some paths, so at least 1024 x 786 is recommended. Select the Pen tool  from the toolbar and draw a curvy path. Try giving it some space, but don’t be scared to try out different variations with wide curves and even small loops. You’ll probably end up drawing these curves a couple of times. After you’ve learned this little trick, you’ll quickly learn to what works and what doesn’t. Remove the fill of the path. Give the stroke a light blue color like #74C4FC. and a width of 3. Change the opacity to 25.   Now draw a second curvy path approximately the same as the first, but don't follow it ...

    Full story

    Comments (0)

    Timmy Kokke

  • Retro-lines in Expression Design

    16-10-2009 16:52:55

    Today I would like to show you how to create lines like above in Expression Design. After opening Expression Design, start by creating a new .design document.                       Now, zoom in a bit to the upper left corner of the document. Draw a small rectangle and give it some easy numbers. Move the rectangle to 10, 10 and change it width and height to 10 too. Change the stroke of the rectangle to none, and change the fill color to black. Copy the black rectangle and move it to position 10,20. Change its color to a medium grey, like #999999. Create another copy of the rectangle and move it to position 10,30. Give that rectangle a light grey color, #DDDDDD. Add a fourth copy and move it to 10,40. Fill it with a dark grey #555555. At this point there should be a stack of 4 squares like this:   Next, the four rectangles have to be turned into a stroke definition to use it for the drawing. Select all four rectangles and go to Object –> Stroke –> New Stroke Definition… By default there’s some room around the squares. ...

    Full story

    Comments (0)

    Timmy Kokke

    Expression Design

    Expression Design