locked
Handling ListViewItem pointer over background with a default background set RRS feed

  • Question

  • Hi there,

    I'm making ListView where the items have alternating backgrounds, which I've managed to successfully do by using a converter setting the background of a grid in the ItemTemplate. I've also created a style that removes the margins from the content:

    <Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            	<Setter Property="Padding" Value="0" />
            	<Setter Property="Margin" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        Padding="{TemplateBinding Padding}"
                        SelectionCheckMarkVisualEnabled="False"
                        CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                        CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                        CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                        DragBackground="#879765"
                        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                        PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                        SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                        SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                        SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
                        SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                        DisabledOpacity="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        PointerOverBackgroundMargin="0"
                        ContentMargin="0" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    However, this causes the selected background to disappear/hide. In Addition, I am getting a border on an item when it is selected.

    My questions are: Is there way to show the pointer over colour when there is a default colour set, and how can I make the selected item show a solid block rather than a border? Any help would be much appreciated!


    Tuesday, February 4, 2014 3:07 PM

All replies

  • What is your converter doing? Are you hardcoding the background or foreground colours? It sounds like you may be setting them both the same by setting the background to the foreground colour and leaving the foreground alone. If so, then make sure your converters convert both so you switch the background and foreground rather than setting just one.

    To change how the selection is displayed override the ListViewItem's template and change the SelectedBorder object as desired.

    Wednesday, February 5, 2014 4:08 AM
    Moderator
  • Hi, thanks for the reply!

    I'm not quite sure I follow?

    This is the code for my ItemTemplate:

    <ListView.ItemTemplate>
        <DataTemplate>
             <Grid Height="100">
                <Grid.Background>
                    <SolidColorBrush Color="{Binding ObjectID,                  Converter={StaticResource listAlternator}}" />
                </Grid.Background>
                <TextBlock Text="{Binding ObjectName}" Style="{ThemeResource HeaderTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" />
              </Grid>
         </DataTemplate>
    </ListView.ItemTemplate>

    public class ListAltMaker : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                if (!(value is int)) return null;
                int index = (int)value;
    
                Debug.WriteLine(value);
                
    
                if (index % 2 == 0)
                {
                    return Colors.White;
                }
                else
                {
                    return Colors.LightGray;
                }
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                throw new NotImplementedException();
            }
        }

    Also, how do I override the SelectedBorder object to a fill instead of border? I'm fairly new at xaml so I'm still finding my way around basic concepts.

    Thanks!

    Wednesday, February 5, 2014 5:40 AM
  • Hardcoding colours (for example using explicit Colors.White & Colors.LightGray) is asking for trouble. You should always set foreground and background colours in pairs and should fall back to default colours in high contrast modes.

    I'm not sure if that's the problem you're having though. Can you share on SkyDrive a minimal project demonstrating the problem along with a clear description of how the actual behavior differs from the desired behavior?

    To edit the SelectedBorder you will need to edit the ListViewItem template. In your designer right click on the ListView and select Edit Additional Templates from the context menu. You can then edit the template's SelectedBorder option to include a fill in addition to the stroke, but if your item has its own filled background then that will cover the selection background.

    --Rob

    Thursday, February 6, 2014 9:47 PM
    Moderator