Disabled list items with enabled scrollbars

In several scenarios we disables list box preventing user to do any action against list items. When you disable list box it also disables scrollbars preventing scrolling of list items. However in some cases we might want to show scrollable disabled items to view list contents. To solve this issue there are various options available including implementation of custom list box with properties to enable scrolls. Following code snippet shows a technique to disable only list items allowing user to scroll items. Note the ScrollViewer and ItemsPresenter properties in list box control template which governs enabling scrollbars while disabling list items.

<Window x:Class="WpfTest.Window2"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
Title="Window8" Height="300" Width="300">
<ListBox  Margin="10,10,10,10" Height="130" Width="100">
 <ListBox.Resources>
<Style TargetType="ListBox"  >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border BorderBrush="Black" BorderThickness="1">
<ScrollViewer IsEnabled="True" >
<ItemsPresenter IsEnabled="False"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</ScrollViewer>                
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
<ListBoxItem>Item 4</ListBoxItem>
<ListBoxItem>Item 5</ListBoxItem>
<ListBoxItem>Item 6</ListBoxItem>    
<ListBoxItem>Item 7 - Long length item</ListBoxItem>
<ListBoxItem>Item 8</ListBoxItem>
<ListBoxItem>Item 9</ListBoxItem>
</ListBox>   
</Window>

Blend style scrollbar–another version

Following scrollbar style mimics Microsoft Bland style scrollbars with different colors.
Check the following figure in correspondence with various elements & their styles used in XAML.

XAML Code:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>

<SolidColorBrush x:Key="ScrollBarBorderBrush" Color="#FFD8D8D8"/>
<SolidColorBrush x:Key="StandardBorderBrush" Color="#FFD8D8D8"></SolidColorBrush>
<SolidColorBrush x:Key="PressedBrush" Color="CornflowerBlue"></SolidColorBrush>
<SolidColorBrush x:Key="GlyphBrush" Color="Blue"></SolidColorBrush>

<LinearGradientBrush x:Key="StandardBrush" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF1D82C3" Offset="0"/>
<GradientStop Color="#FF1D82C3" Offset="1"/>
<GradientStop Color="#FF359EE2" Offset="0.308"/>
<GradientStop Color="#FF359EE2" Offset="0.696"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HoverBrush" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF1D82C3" Offset="0"/>
<GradientStop Color="#FF1D82C3" Offset="1"/>
<GradientStop Color="#FF69C1F9" Offset="0.308"/>
<GradientStop Color="#FF69C1F9" Offset="0.7"/>
</LinearGradientBrush>

<Style x:Key="VerticalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="1,0,1,0" />
<Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Width="8" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5" RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource PressedBrush}"></Setter>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HorizontalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="0,1,0,1" />
<Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Height="8" Name="ellipse"  Stroke="{StaticResource StandardBorderBrush}"
Fill="{StaticResource StandardBrush}"
RadiusX="5" RadiusY="5"></Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource HoverBrush}"></Setter>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ellipse" Property="Fill" Value="{StaticResource PressedBrush}"></Setter>
</Trigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonUpStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Height="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 8 L 8 8 L 4 0 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonDownStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Height="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 4 8 L 8 0 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonLeftStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Width="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L -8 4 L 0 8 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LineButtonRightStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid Margin="1" Width="18" >
<Path Stretch="None" HorizontalAlignment="Center"
VerticalAlignment="Center" Name="Path"  Fill="{StaticResource StandardBrush}"
Data="M 0 0 L 8 4 L 0 8 Z"></Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource HoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Path" Property="Fill"
Value="{StaticResource PressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Border x:Name="ScrollBarBorder"
BorderBrush="{DynamicResource ScrollBarBorderBrush}"
BorderThickness="1"
CornerRadius="5" Padding="1"
Width="14">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton Grid.Row="0" Height="18"
Style="{StaticResource LineButtonUpStyle}"
Command="ScrollBar.LineUpCommand" >

</RepeatButton>

<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource VerticalScrollBarThumbStyle}" Background="#00EBE9ED" Margin="0,0"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand"
Style="{StaticResource ScrollBarPageButtonStyle}"
BorderBrush="{x:Null}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>

<RepeatButton Grid.Row="2" Height="18"
Style="{StaticResource LineButtonDownStyle}"
Command="ScrollBar.LineDownCommand">
</RepeatButton>
</Grid>
</Border >
</ControlTemplate>
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Border x:Name="HorizontalScrollBarBorder"
BorderBrush="{DynamicResource ScrollBarBorderBrush}"
BorderThickness="1"
CornerRadius="5" Padding="1"
Height="14">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="18"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition MaxWidth="18"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Grid.Background>
<RepeatButton Grid.Column="0" Width="18"
Style="{StaticResource LineButtonLeftStyle}"
Command="ScrollBar.LineLeftCommand" >
</RepeatButton>

<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageLeftCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource HorizontalScrollBarThumbStyle}">
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageRightCommand"
Style="{StaticResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="2" Width="18"
Style="{StaticResource LineButtonRightStyle}"
Command="ScrollBar.LineRightCommand">
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical" >
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="18" />
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>

WPF debugging

A fellow send me a note - Josh Smith's Blog has a topic on debugging tips where you can find links to Snoop, Reflector and Add-ins for reflector ..

http://joshsmithonwpf.wordpress.com/page/2/

Great applications using Expression Blend RC1

This site has some fantastic applications using Expression Blend Release Candidate 1. Although applications has not many features but you get clear idea where the UI world is going...

WPF Wiki - FAQ

WPF Wiki is largest collection of WPF FAQ on internet.

Windows Vista Display Driver Model (and WPF)

Windows Display Driver Model (WDDM) is a new display driver architecture supported in Windows Vista. For the first time in Windows, graphics processing unit (GPU) multitasking is possible, enabling users to run more than one GPU-intensive application simultaneously. No doubt WPF will work better on Vista...

Using Templates to Customize WPF Controls

Chales Petzold discusses how to use templates to customize WPF controls.

Ready for WPF?

Ready for WPF? Check this post from Tim Sneath..........

http://blogs.msdn.com/tims/archive/2006/12/20/building-a-perfect-wpf-developer-workstation.aspx

Xceed DataGrid for WPF data grid view gridview presenter control XAML XBAP .NET 3.0

Xceed DataGrid for WPF data grid view gridview presenter control XAML XBAP .NET 3.0: "The world’s first data grid control designed and built for Windows Presentation Foundation and .NET 3.0!"

A Guided Tour of Windows Presentation Foundation

A great MSDN article to get an overview of Windows Presentation Foundation (formerly code-named "Avalon") and a context for this new graphics subsystem.

WPF on Channel 9 - Cool apps and learning WPF

WPF on Channel 9

• Some cool WPF applications
• Resources for Learning WPF

Some WPF resources

Here are some WPF resouces:

WPF Developer Center on MSDN – it all starts with the MSDN Dev Center
WPF Community Site – tons of samples, tutorials, whitepapers, code snippets, controls, and more!
WPF in .NET Framework 3.0 SDK – WPF SDK reference
Top Ten UI Development Breakthroughs in WPF – a great article on the top features in WPF
The XAML Wiki – central place for designers and developers to find and share XAML samples, controls, and styles
WPF Hands-On Labs – set of tutorials that introduce key features of WPF, guiding you step-by-step through the process of developing a complete WPF app
Getting Started with WPF – a great intro to get you up to speed
WPF Samples – more sample WPF apps
Optimize WPF Application Performance – once you've gotten started, then you'll need to learn how to optimize performance
WPF SDK Team Blog – 'nuff said

WPF Graphics Performance

This is great Q/A on WPF Graphics Performance by Tim Chaill.

Petzold Book Blog - What I Hate About XBAPs

Petzold Book Blog - What I Hate About XBAPs: "What I Hate About XBAPs

The XBAP is a WPF executable that represents a compromise between XAML and EXE. The XBAP application includes some code (or perhaps more than one XAML file), and that's why it needs to be compiled. But XBAPs are hosted in the browser just like XAML files, and they run in a sandbox so they require only partial trust. "

New standard(s) for web UI?

What is going to happen in next 3/4 years? Are we going to have unique standard for 'everyone' :

XAML(http://www.xaml.net/ and http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language)
UsiXML (http://www.usixml.org)
UIML(http://en.wikipedia.org/wiki/UIML)
jUMIL(http://sourceforge.net/projects/juiml)
XIML(http://ximl.org/)? Is XAML will get new(or other) name like nUMIL ?(where are you Mono?)

WPF Base Classes

The base element classes are required to create custom class. Following figure shows various base classes which can be derived in the custom class.

DependencyObject Class

• Represents an object that participates in the dependency property system.
  
• Enables Windows Presentation Foundation (WPF) property system services on its many derived classes.
  
• The property system's primary function is to compute the values of properties, and to provide system notification about values that have changed.
  
• Classes inherited from DependencyProperty can use dependency properties.
  

Visual Class

• Provides services and properties that are common to all visual objects.
  
• The Visual object is a core WPF object, whose primary role is to provide rendering support. User interface controls, such as Button and TextBox, derive from the Visual class, and use it for persisting their rendering data.
  
• The Visual object provides support for:
  
  • Output display: Rendering the persisted, serialized drawing content of a visual.
    
  • Transformations: Performing transformations on a visual.
    
  • Clipping: Providing clipping region support for a visual.
    
  • Hit testing: Determining whether a coordinate or geometry is contained within the bounds of a visual.
    
  • Bounding box calculations: Determining the bounding rectangle of a visual.
    
• However, the Visual object does not include support for non-rendering features, such as:
  
  • Event handling
    
  • Layout
    
  • Styles
    
  • Data binding
    
  • Globalization
    

DrawingVisual Class

• The DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text.
  
• It does not provide layout or event handling
  
• In order to use DrawingVisual objects, you need to create a host container for the objects. The host container object must be derived
  
• From the FrameworkElement class, which provides the layout and event handling support that the DrawingVisual class lacks support.
  

Viewport3DVisual Class

• Provides a bridge between 2D Visual and Visual3D objects.
  
• The Visual3D class is the base class for all 3D visual elements.
  

ContainerVisual Class

• The ContainerVisual class is used as a container for a collection of Visual objects.
  
• The DrawingVisual class derives from the ContainerVisual class, allowing it to contain a collection of visual objects.
  

ContentElement Class

• Provides a WPF core-level base class for content elements.
  
• Content elements are designed for flow-style presentation, using an intuitive markup-oriented layout model and a deliberately simple object model.
  

FrameworkContentElement Class

• WPF framework-level implementation of the ContentElement base class.
  
• Adds support for additional input APIs (including tooltips and context menus), storyboards, data context for databinding, styles support, and logical tree helper APIs.
  

Freezable Class

• Defines an object that has a modifiable and a read-only (frozen) state.
  
• Classes that derive from Freezable provide detailed change notification, can be made immutable, and can clone themselves.
  

WPF performance whitepaper

This topic by Kiran is intended as a reference for Windows Presentation Foundation (WPF) application developers who are looking for ways to improve the performance of their applications.

WPF - Layout

Layout elements can be used to build an adaptable user interface like –

• flow-style layout, where content flows left to right and then onto the start of the next line


• a grid layout, which enables table-like layouts, where contents can resize automatically or proportionally. You can nest layout elements to produce complex layouts and write new element types if the built-in types are not suitable
  

Example:

<Page x:Class="TestXBAP.Page1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Page1"

>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="5*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="1"

Grid.ColumnSpan="3"

Background="Honeydew" FontSize="18pt"

TextAlignment="Center" Foreground="Red">

iKnown

</TextBlock>

<ListBox Grid.Row="1">

<ListBoxItem>WPF</ListBoxItem>

<ListBoxItem>WCF</ListBoxItem>

<ListBoxItem>WF</ListBoxItem>

<ListBoxItem>InfoCard</ListBoxItem>

</ListBox>

<TextBlock Grid.Row="1" Grid.Column="1"

>This is Text Block with some text

</TextBlock>

<TextBlock Grid.ColumnSpan="2" Text="Copyright 2006" TextAlignment="Center" VerticalAlignment="Bottom" Grid.Row="1" />

</Grid>

</Page>

WPF - Lookless Controls

Lookless Controls

• you can easily customize the entire appearance of a control without the need to write a custom control.


• usually have a built-in template that provides a default appearance, however, you can replace this template to change the look of the control.
  
• most controls are lookless because WPF disassociates the appearance from the control.

Example:

<Page x:Class="TestXBAP.Page1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Page1" Height="100" Width="200">

<Button>

<Button.Template>

<ControlTemplate>

<Grid>

<Rectangle Fill="Bisque" Stroke="DarkRed" RadiusX="5" RadiusY="3" />

<ContentPresenter Content="{TemplateBinding Button.Content}"

HorizontalAlignment="Center" VerticalAlignment="Center"/>

<Ellipse Fill="Azure"/>

<ContentPresenter Content="{TemplateBinding Button.Content}"

HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Grid>

</ControlTemplate>

</Button.Template>

Click me! I'm Button!!

</Button>

</Page>

WPF - Triggers

Triggers

• a declarative mechanism that specifies how a control should respond to certain stimuli.


• Trigger can be declared inside a style or a template


• The declarative nature of triggers enables designers to create a user interface that responds to actions without the need for code from a developer

Example:

Following example shows hos to use trigger to have animation effect with the Eclipse.

<Page x:Class="TestXBAP.Page1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Page1" Height="108.8" Width="329.6">

<Ellipse Fill="Navy" Height="100">

<Ellipse.Triggers>

<EventTrigger

RoutedEvent="Ellipse.Loaded">

<BeginStoryboard>

<Storyboard TargetProperty=

"(Ellipse.Width)">

<DoubleAnimation From="20" To="200"

Duration="0:0:5"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

</Page>