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>