ExpressionDark WPF Theme, ListView Problem


I have been working on an application that uses a WPF/XAML View and binds a set of objects to a property on the ViewModel.

I defined a GroupStyle and ItemTemplate on my ListView control, and yet whenever I update the collection with objects, they appear in my ListView as empty rows without any content.

After spending hours checking and rechecking my XAML for errors, I finally figured out the problem.

Apparently, there is some sort of bug in the ExpressionDark.xaml Theme I had been using from the WPF Toolkit. I am not exactly sure what the underlying issue is, but it appears that I am not the only one to encounter this problem (just see the comments on the Theme page).

After some quick experimentation, I found that by updating the following lines in the ListViewItem Style in the Theme XAML file I was able to properly display my templated items as I added them to the bound list.

In the ListViewItem Style, I found this line:

 <GridViewRowPresenter 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                Margin="0,2,0,2" 
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch" />

I decided to try adding a simple ContentPresenter:

<GridViewRowPresenter 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                Margin="0,2,0,2" 
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch" />
                            <ContentPresenter />

And, as if by magic, it started to work : )

I’ve included the complete Style Element in case you wanted to copy/paste the whole thing in your own ExpressionDark.xaml file to fix the same ListView/ListViewItem problem.

        
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
        <Setter Property="FocusVisualStyle" Value="{StaticResource ListViewItemFocusVisual}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Margin" Value="0,0,0,1" />
        <Setter Property="Padding" Value="5,2,5,2" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="HoverOn">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="HoverOff">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="SelectedOn">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="SelectedOff">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="FocussedOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="FocussedOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border SnapsToDevicePixels="true" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" x:Name="border">

                        <Grid Margin="2,0,2,0" Height="Auto">
                            <Rectangle x:Name="Background" IsHitTestVisible="False" Opacity="0.25" Fill="{StaticResource NormalBrush}" RadiusX="1" RadiusY="1"/>
                            <Rectangle x:Name="HoverRectangle" IsHitTestVisible="False" Opacity="0" Fill="{StaticResource NormalBrush}" RadiusX="1" RadiusY="1"/>
                            <Rectangle x:Name="SelectedRectangle" IsHitTestVisible="False" Opacity="0" Fill="{StaticResource SelectedBackgroundBrush}" RadiusX="1" RadiusY="1"/>
                            <GridViewRowPresenter 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                Margin="0,2,0,2" 
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch" />
                            <ContentPresenter />
                        </Grid>

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource SelectedOff}" x:Name="SelectedOff_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource SelectedOn}" x:Name="SelectedOn_BeginStoryboard"/>
                            </Trigger.EnterActions>

                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
                            </MultiTrigger.ExitActions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="Selector.IsSelected" Value="False" />
                            </MultiTrigger.Conditions>

                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelected" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>

                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
                            <Setter Property="Fill" TargetName="Background" Value="{DynamicResource DisabledBackgroundBrush}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true" />
                                <Condition Property="Selector.IsSelectionActive" Value="false" />
                            </MultiTrigger.Conditions>


                        </MultiTrigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Selector.IsSelected" Value="True">
                <Setter Property="Foreground">
                    <Setter.Value>
                        <SolidColorBrush Color="{DynamicResource BlackColor}" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
Advertisements

About Bogdan Varlamov

A .NET Software Engineer that strongly believes technology should simplify and improve the quality of our lives instead of making them more complicated. View all posts by Bogdan Varlamov

One response to “ExpressionDark WPF Theme, ListView Problem

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

%d bloggers like this: