WPF ListView Theme

The Goal: To provide a theme for a standard list view.

Looking for a standard theme source for a ListView to base my theme on, I stumbled on this link: Styling with ControlTemplates Sample. It is a good basis to create a theme for anything.

ListView issues: Load up your new listview with 1000s of rows. It will be very slow. This is because the ScrollContentPresenter is not allowing the contents (that supports IScrollInfo) to do the scrolling. So, set CanContentScroll=True in the Lists ScrollViewer ControlTemplate. Eg:

<ScrollContentPresenter Name=PART_ScrollContentPresenterKeyboardNavigation.DirectionalNavigation=Local CanContentScroll=True CanHorizontallyScroll=False CanVerticallyScroll=False />

Next issue: Setting up the theme as per other examples to be found in various places, didn’t seem to affect all the ListViews the project. The problem there is that some of those ListViews were overriding styles. Example:

<ListView.ItemContainerStyle>

<Style TargetType={x:Type ListViewItem} >

<EventSetter Event=MouseDoubleClick Handler=OnDetailsGridDblClk/>

</Style>

</ListView.ItemContainerStyle>

This was sorted by basing inherited styles from the ones in the theme. This can be done as follows:

<ListView.ItemContainerStyle>

<Style TargetType={x:Type ListViewItem} BasedOn={StaticResource {x:Type ListViewItem}}>

<EventSetter Event=MouseDoubleClick Handler=OnDetailsGridDblClk/>

</Style>

</ListView.ItemContainerStyle>

A final issue: With the sample source, there are triggers based on Role for the GridViewColumnHeader template. The one of concern is the “Padding” role to draw the column header where there is no column. I removed this trigger to get the header drawing as the other headers. I then changed IsMouseOver and IsPressed triggers to be MultiDataTrigger giving a second condition of

<Condition Binding={Binding RelativeSource={RelativeSource Self}, Path=Role} Value=Normal />

to stop the padding header from responding to IsMouseOver and IsPressed situations.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s