Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • Book review : WPF 4 Unleashed

    Posted on October 19th, 2010 Thibaut 68 comments
    WPF 4 unleashed Widely acclaimed as the best WPF 4 book out there, I decided to buy this book from Microsoft’s Adam Nathan to improve my WPF/Silverlight knowledge. This book really covers in great details almost every topic of interest in WPF : XAML, controls (user controls + custom controls), layout, panels, resources, data binding, styling & theming, 2D & 3D graphics, animation, audio, video, interoperability with non-WPF technologies and more… Presentation of the book is really nice also, in full color with coherent evolution from chapter to chapter. Just note that, because of its extreme completeness, this book isn’t suitable to learn WPF in a “fast & effective fashion”. It’s rather a reference book to keep near your computer to check specific information.

    Pros

    • Great book, covers WPF really in deep
    • Full color, well organized book
    • You’ll learn a lot from this expert author who really knows his stuff

    Cons

    • The biggest pro is the biggest con : so many details that it’s easy to lose your attention from core points
    • Some chapters cover advanced topics before basic ones (eg : “2D graphics” chapter covers PolyQuadraticBezierSegment in the first pages, way before Rectangle)

    Conclusion

    I would definitely recommend this book, which is a must-have on your bookshelf if you’re a WPF/Silverlight developer. But if you’re a beginner looking for a quick-start book to make effective use of your time, you’d rather buy a less detailed book before buying this one !

    Share/Save/Bookmark

  • ReMIX10 : summary

    Posted on October 3rd, 2010 Thibaut No comments

    ReMIX10

    Last Tuesday, I assisted to the 2010 edition of the ReMIX, reedition of the popular MIX event. As usual, two tracks were available : web developer and UX. My current focus being Silverlight, I assisted exclusively to the UX track. Below, you’ll find my notes about the sessions.

    Opening keynote

    IE 9

    Silverlight 4

    Windows Phone 7

    • Silverlight & XNA support
      • Silverlight : for applications
      • XNA : for games
    • Free version of Blend dedicated to Windows Phone development
    • Demos of games on the phone. Companies such as Fishing Cactus presented their games for WP7

    Natural interface

    Session #1 : design venture

    • Prensented by Georg Petschnigg from Microsoft Pioneer Studios
    • Bringing design and business together
    • 2 points :
      • technology knowledge (languages, tools, …)
      • open vision on the world, cultures, etc to be creative and to innovate
    • Innovation process :
      Innovation process
    • From insight to core idea :
      • What’s unique about you
      • What does the world need
    • Observe people, their habits : find new ideas and ways to improve
    • From core idea to product : the three reads in industrial design
      • Eye : what you see
      • Touch : material, feeling
      • Use : does it suits my needs ?
    • Translate them in software :
      • Form (eye) : look & feel
      • Touch : controls
      • Use : features
    • Three reads of industrial design are from top to bottom (first attracted by what you see, then you touch it and use it if you like it)
    • Three reads of software design are from bottom to top
    • Importance of visual designers now : with all new rich web technologies (HTML 5, Silverlight, …), your product can be beautiful, more simple, and visual designers can add “life” to it
    • Passion is key to outstanding quality work. Nothing great in the world has ever been accomplished without passion (Georg Wilhelm Friedrich Hegel). You must have a “soul” in your work, enjoy people you’re working with to be great at creating and innovating

    Session #2 : UX Superpowers with Expression Blend 4

    • Presented by Arturo Toledo (Microsoft)
    • MVVM support
    • New pixel shader effects
    • New shapes (clouds, comics bubble, …)
    • Path layout : items added and layed on a path (one of the best features of Expression Blend 4, see example below). Items automatically arranged as they are added/removed, can be animated along the path, …
      Path layout
    • Examples of applications using path layout : organic menu, etc
    • Lots of demos of the new stuff

    Session #3 : Windows Phone 7 design principles

    WP7

    • Presented by kat Holmes and Karen Davis (from Microsoft WP7 team)
    • Design principles for WP7 : colors, information architecture : remain consistent with Microsoft guidelines, use of Blend for WP7 is strongly suggested so you work on the base of these guidelines
    • Presentation of the two main screen layouts for WP7 :
      • Panorama : when your content is not best suited to be redueced to fit screen size : keep it large
      • Pivot : more traditional layout, where all information can be on one page
    • 3 key points for WP7 development :
      • Personal : familiar and thus easy to use
      • Relevant : don’t overdo, focus on content
      • Connected : compliment, don’t duplicate existing features or applications

    Session #4 : a website life, from sketch to publishing

    • Presented by Arturo Toledo (Microsoft)
    • WebMatrix : 3 tools :
      • IIS Express (instead of Cassini : no more bad surprises because Cassini was different than IIS)
      • SQL Server Compact : local, file-based DB
      • ASP.NET Web Pages (new script syntax : Razor)
    • Concept of code helpers. Eg : @Twitter.Profile(”ThibautVS”) displays a list of my tweets
    • Can run SEO reports, giving you hints on how to improve your search engines friendliness
    • Most of the presentation consisted of coding examples using the new, powerful Razor syntax.
    • More information in this MSDN article : How WebMatrix, Razor, ASP.NET Web Pages and MVC fit together

    Conclusion

    It’s always nice to participate to such events because it enables you to maintain a vision of the Microsoft technologies landscape. Then you can pick up what you’re interested in and start a deep dive into it. That’s exactly what I’m doing with Silverlight 4, Expression Blend 4 and HTML 5. See you next year ;)

    Share/Save/Bookmark

  • Dr. Silverlight #1

    Posted on October 2nd, 2010 Thibaut No comments

    Dr. Silverlight

    With this post, I’m starting a new concept called Doctor Silverlight. In the form of questions & answers, you’ll find a list of problems that I’ve encountered with their solution. Hope it will be useful by saving you precious time and don’t hesitate to comment if you’ve got similar things to share ;)

    Q: I’ve got a blurry content (text, pictures, etc), typically when I perform rescaling on these elements.
    A: Set UseLayoutRounding=”False” on the scaling container (true by default, it’s basically a antialiasing mode that can result in blurriness).
    Q: VisualStateManager is not working (no error, but simply does not do what it’s supposed to, even if the references are correct.
    A: The VisualStateManager tag should be the child of the root panel of the page/control.
    Q: The location of the DropDown of a ComboBox is placed at a wrong position (typically top left).
    A: When the ComboBox is used in a popup, this problem arises when the popup is contained in an element decorated with an effect (eg : DropShadow). This is a Silverlight bug. So place the effect at another position.
    Q: I don’t want the first row of the DataGrid to be selected by default. I set SelectedIndex to -1 or SelectedItem to null and it doesn’t work (code behind databinding scenario, not MVVM).
    A: Set one of these properties in code behind AFTER performing the databinding (typically setting the ItemsSource) of the DataGrid. If you set SelectedIndex to -1 in XAML, it won’t work.
    Q: I want a ComboBox to be editable but can’t find the property to achieve this goal.
    A: As incredible as it might sound, the ComboBox control cannot be editable (this is something we have in other technologies for more than 10 years, but anyway). You have to style the AutoCompleteBox to achieve this behavior. Go to the Silverlight toolkit showcase, click on AutoCompleteBox in the left pane, then styling tab. There you have examples and code to get some kind of editable combobox.
    Q: I created a custom control, added manually Themes/Generic.xaml to define the style of it. But styles don’t apply…
    A: You forgot the set the DefaultStyleKey property in the constructor of your custom control.

     

    Share/Save/Bookmark

  • Silverlight : databound nullable values not updated

    Posted on September 30th, 2010 Thibaut No comments

    While working on a project using Silverlight 4 and MVVM, I noticed a strange behavior : nullable values of the source object are not updated when you clear the value (in a TextBox for example). After some research on the web, it appears that Microsoft decided to perform the TwoWay binding the safer way and thus not setting the original value back to null. Situation is illustrated below :

    XAML

    <Grid x:Name="LayoutRoot">

        <StackPanel>

            <TextBox Text="{Binding Weight, Mode=TwoWay}" />

            <TextBox />

        </StackPanel>

    </Grid>

    Two TextBoxes are created so you can change focus in order to raise a property changed event.

    C#

    public TestPage()

    {

        InitializeComponent();

     

        LayoutRoot.DataContext = new ProductViewModel { Weight = 3.2 };

    }

     

    public class ProductViewModel : INotifyPropertyChanged

    {

        public event PropertyChangedEventHandler PropertyChanged;

        private double? _weight;

     

        public double? Weight

        {

            get { return _weight; }

            set

            {

                if (_weight != value)

                {

                    _weight = value;

                    if (PropertyChanged != null)

                        PropertyChanged(this, new PropertyChangedEventArgs("Weight"));

                }

            }

        }

    }

    We create a ProductViewModel instance, containing one single property : Weight. The TextBox is databound (TwoWay) to this property. Following that, we can observe that behavior :

    • If we change the value in the TextBox (to 1.1 for example) then put the focus in the 2nd TextBox, the breakpoint in the Set of the Weight property is hit (the behavior we all expect)
    • If we clear the value in the TextBox then put the focus in the 2nd one, the breakpoint is not hit. Thus the value can never be set to null back again

    NullableValueConverter

    The solution to this problem is to create a converter, which will not ignore null values. Implementation and usage are shown below.

    public class NullableValueConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return value;

        }

     

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            if (string.IsNullOrEmpty(value.ToString()))

                return null;

            return value;

        }

    }

    <TextBox Text="{Binding Weight, Mode=TwoWay, Converter={StaticResource NullableValueConverter}}"/>

    Hope it helps ;)

    Share/Save/Bookmark

  • Silverlight : hitbox for icons

    Posted on September 29th, 2010 Thibaut No comments

    At work, designers create icons in XAML that we developers use in the applications we’re creating. When integrating one of those icons, and by making it clickable, I realized it hadn’t the behavior I expected it to have. Basically, every drawn part of the icon is clickable, but not “blank” areas. Quite frustrating for the user, who has to click multiple times until he clicks by chance where it does have a an effect.

    Icon hitbox

    At first, I created a transparent rectangle, filling all the icon area, to create some kind of hitbox, which does the job but there’s an even simpler solution. I thought that panels such as grids etc have a transparent background by default. That’s not the case ! A little debugging session gave me the following information :

    Panel backgrounds

    So, being “hollow” by default, panels simply don’t receive click events and this is why, in our case, ony the drawn parts (typically, geometric paths and shapes) will receive them. By setting the background to transparent, the panels will receive the clicks. Very simple, just one property to set. Nothing revolutionary here, just a little tip for those experiencing the same situation ;)

    <Grid Background="Transparent">

        <!– Icon code –>

    </Grid>

    Share/Save/Bookmark

  • Silverlight : binding enums to ItemsControls

    Posted on September 6th, 2010 Thibaut No comments

    Currently working in a Silverlight 4 + WCF RIA Services + MVVM environment, I’m leveraging the data annotations from RIA Services to perform databinding. As some properties of our entites are of enum type, my colleague pointed out that it would be cool to databind them directly, providing friendly names for display. And all of this with no single line of code behind of our view as we’re using MVVM. And the solution must be generic, working whatever the enum type is and for all controls being ItemsControls. Spike started !

    Enum databinding

    1. Create the enum with data annotations

    public enum Country

    {

        [Description("Belgium")]

        Be,

        [Description("France")]

        Fr,

        [Description("United states")]

        Us

    }

    2. Creating an EnumHelper to get [Description] attributes using reflection

    This will be used as ItemsSource, to populate the control initially

    public static class EnumHelper

    {

        public static T[] GetValues<T>()

        {

            Type enumType = typeof(T);

     

            if (!enumType.IsEnum)

                throw new ArgumentException("Type ‘" + enumType.Name + "’ is not an enum");

     

            List<T> values = new List<T>();

            FieldInfo[] fields = enumType.GetFields();

     

            foreach (FieldInfo field in fields)

            {

                if (field.IsLiteral)

                {

                    object value = field.GetValue(enumType);

                    values.Add((T)value);

                }

            }

     

            return values.ToArray();

        }

    }

    3. Creating a EnumDisplayConverter (using reflection again)

    Will be used to convert actual enum values to their corresponding display value

    public class EnumDisplayConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            Type type = value.GetType();

            FieldInfo fieldInfo = type.GetField(value.ToString());

            DescriptionAttribute[] descriptionAttributes = (DescriptionAttribute[])fieldInfo.GetCustomAttributes(typeof(DescriptionAttribute), false);

     

            if (descriptionAttributes != null && descriptionAttributes.Length > 0)

                return descriptionAttributes[0].Description;

            return fieldInfo.GetValue(value);

        }

     

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

    4. Using it : in the ViewModel

    The ViewModel contains the selected country (typically, the enum type that you want to expose and bind to), and a countries list is obtained by our helper class to populate the ComboBox. Note that code related to ViewModelBase won’t be pasted here for brevity (it’s just an implementation of INotifyPropertyChanged)

    public class MainPageViewModel : ViewModelBase

    {

        public Country[] Countries { get; private set; }

     

        private Country _selectedCountry;

        public Country SelectedCountry

        {

            get

            {

                return _selectedCountry;

            }

            set

            {

                if (_selectedCountry != value)

                {

                    _selectedCountry = value;

                    RaisePropertyChanged("SelectedCountry");

                }

            }

        }

     

        public MainPageViewModel()

        {

            Countries = EnumHelper.GetValues<Country>();

        }

    }

    5. Using it : the View

    <ComboBox ItemsSource="{Binding Countries}" SelectedItem="{Binding SelectedCountry, Mode=TwoWay}" >

        <ComboBox.ItemTemplate>

            <DataTemplate>

                <TextBlock Text="{Binding Converter={StaticResource EnumDisplayConverter}}" />

            </DataTemplate>

        </ComboBox.ItemTemplate>

    </ComboBox>

    Conclusion

    Seems to be a lot of code at first sight, but most of the work consisted of creating the helper and converter. Once they’re set, it’s really simple to use ! I tried to make the solution the more concise as possible, so if you ever have an improved version, I’d be interested to hear (read) from you ;)

    Share/Save/Bookmark

  • Silverlight : prevent ListBox from resizing on scroll

    Posted on September 6th, 2010 Thibaut 1 comment

    Today I faced a situation where my ListBox automatically resized, adapting its width to the largest visible item when scrolling. Not user-friendly at all as you’ve got to literally “hunt” the scrollbar arrows with your mouse to be able to scroll. Problem is illustrated below, where a gap occurs when scrolling :

    ListBox resize

    In fact it isn’t a bug at all. ListBox, under the hoods, uses a virtualizing panel to display its elements (a VirtualizingStackPanel to be precise). That means that, just like graphic cards for video games, only the visible content is calculated for performance reasons. In Silverlight, a ListBox isn’t only intended to display basic text like this example, it could have been videos thumbnails playing in real time, for example. And the list could contain thousands of them… This is where virtualization becomes useful. Anyway, in our case, we don’t want it because this is why our ListBox resizes, as it has no knowledge of other - longer or shorter - elements.

    Some solutions on the web suggest to define a fixed width on the ListBox, but you’d rather avoid that otherwise long text might be truncated. My version : change the ItemsPanel of the ListBox to use a non-virtualized panel. As said before, it uses VirtualizingStackPanel by default. So it seems logical to use a regular StackPanel instead. Entire relevant code is pasted so you’ve got the “how to reproduce” situation (key point is to put the ListBox in a grid column having an “auto” size mode).

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

        </Grid.ColumnDefinitions>

        <ListBox Height="45">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <StackPanel />

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBoxItem>AAAAAAAAAAAAAAAA</ListBoxItem>

            <ListBoxItem>BBBBBBBBBBBBBBBB</ListBoxItem>

            <ListBoxItem>CCC</ListBoxItem>

            <ListBoxItem>DDD</ListBoxItem>

            <ListBoxItem>EEE</ListBoxItem>

        </ListBox>

    </Grid>

    The result illustrated :

    ListBox, no resize

    Share/Save/Bookmark

  • ReMIX 09 @ Brussels : Summary

    Posted on October 7th, 2009 Thibaut No comments

    ReMIX

    This last 29th of September was organized at Kinepolis Brussels the 2009 edition of the ReMIX, which is a one-day summary of the MIX edition (held last March in Las Vegas).

    Two session tracks were available : the Web developer track and User Experience (UX) track. But before this, an introduction was given by some well-known people of Microsoft belgium.

    Introduction

    By Luc Van de Velde, Katrien De Graeve, Gill Cleeren, …

    Here are some key points of the presentation :

    • A demo of the Microsoft Web Platform Installer by Katrien De Grave. More info on her blog post about it
    • Demos of Silverlight 3 new features : smooth streaming, rich media capabilities, SEO & deep linking, improved performance, …
    • Zendster, the first belgian web hoster to provide smooth streaming for Silverlight
    • Companies (such as Elia) performing demos about their Silverlight apps for critical, line-of-business applications
    • A demo of SketchFlow by Arturo Toledo
    • Interviews of companies reflecting the important shift towards UX, which is given more and more importance
    • VTM news (a dutch television company) is using Surface, manipulating a newspaper as a support for presenting news but also to present election results

      Surface
    • A demo of the Surface application of Belgian Beer Cafe, featuring a wonderful background simulating beer liquid and providing infos about the beers you put on the table. Check out the video below :
    • The launch of WebsiteSpark, an Microsoft initiative for providing training, free licences for small companies, etc

    Session #1 : Prototyping with Sketchflow

    User Experience (UX) track
    By Arturo Toledo

    • No slides, live demo of prototyping an app using SketchFlow
    • More than a mockup tool, SketchFlow allows you to make it behave a real app (and used as is)
    • Effects, such as transitions, can directly be set easily in SketchFlow. No need to code to get everything working (although you can write some if you want to fine-tune some stuff)
    • The user (typically the customer) can test his app mockup as it’s a classic Silverlight application
    • Comments can be drawn on the mockups or feedback can be written in a column next to the mockup screens

      SketchFlow
    • The flow of the application can be designed visually, creating transitions by linking nodes representing pages

      SketchFlow
    • The creation of datasources is very easy in SketchFlow. Indeed, in a typical mockup, you need to create dummy data (lorem ipsum for texts, fake names or numbers for forms or grids, etc). Such data can be autogenerated by defining the type of data we want (ex: price, date, text, …), which is a great save of time

    Session #2 : Building Amazing Business Applications with Silverlight and RIA Services

    Web developer track
    By Brad Abrams

    According to Brad Abrams, the must-haves for a great app is :

    1. Professional feel
    2. Rich data query
    3. Validating data update
    4. Authentication
    5. Different views (of the same data)
    • A little Silverlight application was built in a RAD fashion using Entity Framework, featuring a GridView, a form to add/update/edit values and Regex attributes on the properties (code behind) for validations
    • A SiteMap of the app was provided in Robots.txt for indexing by search engines. Different views (html pages) were provided for search engines bots to parse the content of the application

    Session #3 : Creating Silverlight Experiences with Blend 3

    User Experience (UX) track
    By Arturo Toledo

    • An Adobe Illustrator file was imported in Expression Design (a character in a spaceship)
    • Showed then how to build a custom control (a button with glossy effects, mouseover growing animation effect without coding, …)
    • Custom button fires an event, starting a storyboard to make the spaceship fly on the screen
    • Timeline manipulations are performed to make the spaceship make a U-turn before flying back to its original position

    Session #4 : ASP.NET MVC Wisdom : building a real-world app in 60′

    Web developer track
    By Maarten Balliauw

    This session covered the following points in ASP.NET MVC :

    • Validation
    • Templated helpers
    • Security
    • Routing

    Slides of the presentation are available below and source code here

     

    Conclusion

    A very interesting event as you can tell, providing lots of news, demos and other stuff about RIA development in general. See you next year ;)

    Share/Save/Bookmark

  • BESUG Silverlight Workshop

    Posted on September 27th, 2009 Thibaut 2 comments

    BESUG

    The last BESUG edition consisted in a Silverlight workshop where a Twitter client was built using Visual Studio 2008 and Expression Blend 3.

    Twitter workshop

    For those who couldn’t attend the workshop and are interested in that, you can download related ressources here :

    Enjoy !

    Share/Save/Bookmark

  • In bulk #4

    Posted on September 9th, 2009 Thibaut No comments

    Share/Save/Bookmark