WPF – Ash Tewari

Announcing CodeDemo

It is a challenge to use code snippets in presentations, demos and live coding sessions. I have struggled with this and seen many speakers jumping through hoops to assimilate code snippets in their demos. I had to create something to ease this pain.

Today, I am announcing the general availability of CodeDemo. A tool for instructors, presenters and speakers who create instructional demos, record screen-casts or do live presentations. CodeDemo pastes code snippets into your favorite IDE without getting in your way.

I decided not to open-source CodeDemo to challenge myself to an exercise in commercialization. I decided to learn about entrepreneurship, marketing, sales, licensing and other aspects of software commercialization. It has been an MBA’s worth of education so far. This journey is not over yet. I am taking the Lean approach of creating a Minimum Viable Product. The future of CodeDemo, its feature set and the price, will be shaped by the traction it gets in the market, the feedback from the customers as well as patterns of use reported by the users.

Head over to http://codedemo.net to grab a copy for yourself. Let me know if find it useful – I will be very excited to hear from you.

Here is a quick 2 minute introduction to CodeDemo :

[youtube]aFn3boBAWjw[/youtube]

Remove ListBoxItem Highlighting

A Silverlight/Wpf ListBoxItem is highlighted when selected or when the mouse hovers over it.

I need to display a list of items that are not highlighted when selected. This is a common scenario when displaying an inactive list for simply listing out some information.

ListBoxItem’s default template can be easily inspected and modified using Expression Blend – Select a ListBoxItem in Objects and Timeline pane, Right click and select Edit template > Edit a Copy. Name you template and save it at the scope of your choice.

This will create a copy of the template and allow you to modify it. Switch to the xaml view. Locate the VisualStates of MouseOver, Selected and Focused, and blank them out –

de-highlighted-xaml

The style is applied to the ListBoxItems using ItemContainerStyle –

applying-style-to-listboxitems

Here is the xaml style for the ListBoxItem –
<Style x:Key="ListBoxtemStyleNoHighlighting" TargetType="ListBoxItem"> <Setter Property="Padding" Value="3"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"/> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

After the style is applied, the ListBoxItems are not highlighted when selected or focused. Here is a live demo of a ListBox that does not highlight when items are selected : remove-listboxitem-hlighting-demo

Getting Started with MVVM

I just finished presenting here at RDU Code Camp. It was a great crowd ! Here are the slides –

Getting started with MVVM

View more presentations from ashtewari.

Win Advanced MVVM Book

I am presenting a session on Building WPF Application using MVVM (Model-View-ViewModel) on May 15th at the Carolina Code Camp 2010.

I will dissect a Sample WPF MVVM application and then highlight the most important aspects of the MVVM by coding a brand new ViewModel and incorporating it into the application. You will learn about the Roles of the MVVM triad, the advantages of using MVVM and Characteristics of the ViewModel.

Attendees will be eligible to win ~~two copies~~ one copy (see below) of Josh Smith’s Advanced MVVM book as well as a few other WPF Books.

{ I will be giving away one hard copy version of the book instead of digital versions due to concerns about DRM protection and unclear gift guidelines at lulu.com }.

And the winner is … Mark Freeman !!! Congratulations Mark, your copy of “Advanced MVVM” is on its way. Thanks for attending the code camp and your feedback.

Using Model-View-ViewModel in WPF Applications

I am presenting at SoCalCodeCamp this weekend (January 30th, 2010) – Advanced WPF – Using Model-View-ViewModel in WPF Applications.

Agenda :

1. Roles of the M-V-VM triad

2. Why use M-V-VM ?

3. Characteristics of the ViewModel

4. Build a Sample WPF Application using M-V-VM

Resources :

MSDN Magazine Article and Sample Application Download
Martin Fowler’s description of the ‘Presentation Model ‘
Jeremy Miller’s ‘Build Your Own CAB’ series

Dial Gauge is a ProgressBar

I am not just being philosophical here. In WPF, ControlTemplates allow you to transform a control’s appearance. This is not the same as applying stylesheets. This is an entirely new level of customization. What you see in the screenshot below looks like a Dial but is actually a simple ProgressBar control wearing a “Dial” template. The Dial template was created using Microsoft Expression Blend .

Include the ControlTemplate as a Window.Resource and then assign it to ProgressBar element’s Template attribute :

Of course that is not all. The ControlTemplate must define some named elements of FrameworkElement type. Charles Petzold has explained it in detail : MSDN Magazine Article. So, I will not repeat it here.

The sample code can be downloaded here : DialTest.zip
License : Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.