• Discovering Expression Blend 5 - ListView

    27-9-2011 14:15:28

    Often you need to display a list of items in a application. The Windows Library for JavaScript contains a ListView control for you to use in your applications. The control can be bound to a data source and templated from HTML.

    Getting started

    We’ll start off by creating a new project and choosing the Fixed Layout Application project template. As you can see, the template has added a paragraph (p) to the tree which contains some text. You can use that to place the title of your application. The ListView is going to be in the same div as that paragraph. You can add the ListView by hand, typing the HTML, but I personally prefer dragging and dropping controls onto the designer. Select the parent div of the paragraph. Type ListView in the search box of the Assets panel and drag the result from the list to the design surface. If you switch to Split view in the designer you can see the HTML … which should contain the following element. 
    <div data-win-control="WinJS.UI.ListView"></div>
    To be able to write code against the ListView it has to have an Id. You can enter this on the Attributes panel. In this ...

    Full story

    Comments (0)

    Timmy Kokke

    Expression Blend 5

  • Discovering Expression Blend 5 - Styles

    16-9-2011 14:14:00

    In my previous article I explained the different templates of the Expression Blend 5 preview. Today I would like to walk you through some of the basic of using CSS, or Cascading Style Sheets, in Expression Blend 5. You’ll need CSS to define the look and formatting of your Windows 8 Metro Style application. Expression Blend 5 helps you create your styles in pretty much the same way you are used to when working on Silverlight or WPF applications in Expression Blend 4 and earlier. But not entirely.  

    Defining a style

    For sake of simplicity I’ve created a new solution in Blend using the Blank Application project template. This template comes with three CSS files. Two files are for the default Metro style. One defines a light UI, ui-light.css and one that defines a dark UI, ui-dark.css. Only one of these files is linked in the default.html file, the dark version. I won’t recommend changing these files, but adding you own styles to a new CSS file or adding them to the third CSS file in the project, default.css. Style sheets linked to the currently opened and active file can be found on the Styles panel. On ...

    Full story

    Comments (0)

    Timmy Kokke

    Expression Blend 5

  • Discovering Expression Blend 5 - Templates

    15-9-2011 14:11:00

    At the BUILD event a lot of great applications were released. The big one of course was the Windows 8 preview. One of the released ISOs contains a couple of preview version of development tools. Expression Blend 5 preview is one of them.   This preview of Expression Blend 5 doesn’t let you create Silverlight, WPF or Windows Phone 7 apps. Instead it does what a lot of people where hoping for: Editing/Designing Html5, Css and JavaScript.

    Project Templates

    The first thing to notice are the new project templates. There’s only one category in the preview: Windows Metro Style. The category contains 5 templates. All templates help you getting started creating Html applications for Windows 8 in Metro style. The Language and Version dropdown lists only contain one element in the preview version. I assume these will grow over time, when Silverlight, WPF and WP7 return. The Blank Application template creates a solutions with only the minimal elements needed. The designer shows a tablet-shape around the surface, like you might be used to when working on Windows Phone 7 applications. The solution contains a couple of Css and .Js files needed for the Metro Style. A manifest file ...

    Full story

    Comments (0)

    Timmy Kokke

    Expression Blend 5

  • What’s new in the Expression Design January 2011 preview?

    29-1-2011 21:01:11

    This week Microsoft released the January 2011 preview of Expression Design 5. The preview can be downloaded here: http://bit.ly/gPxBMr. The January 2011 preview contains only two new features:
    • EPS import
    • Multiple selection in the Layers panel
     

    EPS Import

    I’ve found this image in my Image Library. It’s in .EPS format and I would like to use it in one of my designs. With the new Expression Design preview I can import it directly without having to convert it to another format first. To do this, go to the “File” menu and select “Import Encapsulated Postscript File…”. An open-file dialog appears where you can select the .EPS file you would like to open. After hitting “open” a progress bar shows at the bottom right of Expression Design for a moment. And done. The .EPS file is opened in your .design file.

    Multiple selection in layers panel

    In the current version of Design, Expression Design 4, it is possible to select multiple layers by holding the Shift key. When doing this you can add layers to the selection. In the new Expression Design January Preview this process has changed and works in the same way you might be used to ...

    Full story

    Comments (993)

    Timmy Kokke

  • Dependency Injection, MVVM, Ninject and Silverlight

    16-12-2010 21:44:26

    Intro

    The MVVM patterns is pretty popular these days. In Silverlight and WPF it is used a lot. Dependency Injection is also used very often. In this tutorials I would like to show you how to use Dependency Injection when building a Silverlight application using the MVVM pattern. The are numerous Dependency Injection Frameworks. For this tutorial I’ve chosen Ninject. The main idea on how to implement DI in your application is pretty much the same for all frameworks. In this tutorial I hope I can give you a small introduction in using Ninject in you projects. Ninject is an open source project which can be found at www.ninject.org. Ninject is also available through the NuGet tool in Visual Studio. Have look at my NuGet tutorial on how to get it through that.  

    Demo project

    The demo project is a very simple game. The objective of the game is to guess a number. There will be a web service that can be requested to provide a random number. The game consists of three screens or Views. The first, StartView, asks the player for the maximum number. The second screen, GameView, ask the player to guess a ...

    Full story

    Comments (5)

    Timmy Kokke

  • NuGet

    14-11-2010 0:51:24

    If you often use open source libraries you probably have a large library with various tools, like I do. NuGet is an extension for visual studio that enables you to install, uninstall and upgrade open source packages into your application very easily. Say for example you want to use MvvmLight or Ninject in your project, with NuGet it’s nothing more that tell it to add the package to your project.

    NuGet

    NuGet (formerly known as NuPack) is a free, open source developer focused package management system for the .NET platform.
    You can download the .vsix extension at http://nuget.codeplex.com. After installing it you can start adding packages to your project in two ways. The first is by right clicking in the Solution Explorer and selecting the Add Library Package Reference… option. This will present you with a dialog where you can find and install a package. To see the package available, select the Online option from the list on the left. You can use the text box on the top right to filter the list to get to the package you want to use. Hit the install button to add the package to your project. To remove a package, go ...

    Full story

    Comments (2)

    Timmy Kokke

  • Using Visual States in custom controls in Silverlight

    14-11-2010 0:50:05

    Intro

    Visual States are an easy way to change the looks of your controls based on certain states. This state can be something like a mouse hover, some invalid state or any state you need in a control. For this tutorial I chose a traffic light control that can be one of four states. Green, Orange, Red and Inconclusive (blinking orange). In the end I show you how to use behaviors on buttons to set the state of the traffic light. This makes the use of visual states perfectly suitable for use in MVVM projects.

    Part 1 – Setting up the project

    Start by creating a new Silverlight project in Visual Studio 2010 and add a new Item to the project by right clicking on the project in the Solution window and click Add –> New Item… or hit Ctrl+Shift+A. Select the Silverlight Templated Control item template from the list of Silverlight templates Add a folder named Themes to the Silverlight project. Add a ResourceDictionary to the project by using the Add->New Item… on the project folder and name this dictionary Generic.xaml. Add the following style to the dictionary: 
    <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:VsmDemo="clr-namespace:VsmDemo">
  <Style TargetType="VsmDemo:TrafficLight">
    <Style.Setters>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate/>
        ...

    Full story

    Comments (2)

    Timmy Kokke

  • Custom Assets folder for Expression Blend

    11-11-2010 9:43:17

    In the projects I’m doing I often use controls from my own library or use control from third party vendors. I don’t like the process of doing this. Rather I would like to have the libraries available inside Expression Blend, like the controls that came with the Silverlight Toolkit or Blend itself. One way is to add the custom assemblies containing the controls to one the folders in your Program Files containing the assemblies for the toolkit for example. Another and for more elegant way is to make Expression Blend look in an additional location in your UserProfile (c:/Users/SomeUser/…). The Expression Suite already has a folder in your My Documents, but not for assets. I’ve create a .BAT file that adds a couple of folders to the Expression folder in the My Documents folder of the current user. Folders to store assemblies for .NET and Silverlight in various versions. A .REG file is used to add these locations to the windows registry. After you have run both you’ll have to restart Blend to reread the registry and the folders. The assemblies placed in these folders are now available in Expression Blend. Your assemblies should show up in the Assets panel. ...

    Full story

    Comments (2)

    Timmy Kokke

  • Sildes and Code – Devnology Community day

    7-11-2010 9:41:00

    Yesterday I gave a talk at the Devnology Community Day about Unit testing Mvvm in Silverlight. Although only a handful of people came to my session, we had some nice discussions about writing tests using various frameworks. I would like to thank Devnology and VXCompany for organizing and hosting this great and informative day. One last note. Tuesday, November 9th Sixin is organizing a user group meeting about Design and Development Experiences in Silverlight at Macaw in Schiphol-Rijk in the Netherlands. There are some places available.


    Full story

    Comments (2)

    Timmy Kokke

  • Gradient Importer for Expression Blend

    19-10-2010 20:35:13

    Intro

    Adobe Photoshop offers people the possibility to share gradients through .GRD files. These files can be found very easily on various sites. This extension for Expression Blend allows you to import these files and use them in your Silverlight or WPF projects. The extension makes use of some changes to Expression Blend made in SP1. You must have Blend SP1 installed to use this extension.

    Know limitations

    The extension isn’t finished yet. I haven’t worked out all the bugs yet, but this first release should enable you to import most of the .GRD files. In Adobe Photoshop it is possible to create a noise gradient type. This type of gradient isn’t available in Xaml. At this point the extension will show an error when a file containing a noise gradient is opened. In a future version the noise gradient will be skipped. Because there is no documentation on how to interact with Expression Blend from extensions I have not been able to create a new resource entry from code. I’m not even sure if this is possible at all. Therefore I have chosen to show the Xaml created from the imported gradient and give you the opportunity to ...

    Full story

    Comments (5)

    Timmy Kokke

  2. 1
  3. 2
  4. Next page