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 -

The style is applied to the ListBoxItems using ItemContainerStyle -

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

Share This

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.

Share This

tasklist-mockup

Agenda :

Resources :

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

Share This

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.

Share This

<Image Grid.Row=\"2\"
Source=\"{Binding Path=ThumbNailPhoto ,
Converter={StaticResource imageConverter}}\"></Image>

The custom converter is declared in the same .xaml file as a resource -

<Window.Resources>
<local:ImageDataConverter x:Key=\"imageConverter\" />
</Window.Resources>

ImageDataConverter is implemented in .xaml.cs file -

public class ImageDataConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter,
   System.Globalization.CultureInfo culture)
   {
      byte[] image = ((System.Data.Linq.Binary)value).ToArray();
      return image;
   }
	
   public object ConvertBack(object value, Type targetType, object parameter,
   System.Globalization.CultureInfo culture)
   {
      throw new NotSupportedException();
   }
}

The updated sample code can be downloaded here : WPF-LINQ to SQL Sample
License : Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Share This

This sample demonstrates :

1. LINQ to SQL mapping.
2. WPF ListView Control DataBinding.
3. Displaying images stored in database as varbinary in WPF control.

The sample code can be downloaded here : WPF-LINQ to SQL Sample
License : Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Share This