The data binding not working in custom ListViewItem style

aluzi liu 486

I use ListView to display data, and I need fully control the mouse hover, selected visual state of ListViewItem, So I define a custom ListViewItem style:

        <ListView ItemsSource="{x:Bind persons}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="TabNavigation" Value="Local" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="UseSystemFocusVisuals" Value="False" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <Grid x:Name="Bd" Background="PaleVioletRed" Margin="10" Padding="4">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <VisualState.Setters>
                                                    <Setter Target="Bd.Background" Value="#6f9cf7"/>
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="Selected">
                                                <VisualState.Setters>
                                                    <Setter Target="Bd.Background" Value="#335cad"/>
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="SelectedPointerOver">
                                                <VisualState.Setters>
                                                    <Setter Target="Bd.Background" Value="#173b85"/>
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Source="{Binding ImageUrl}" Width="180" Height="180"/>
                                    <TextBlock Grid.Row="1" HorizontalAlignment="Center" Foreground="#000" Text="{Binding Name}"/>
                                    <TextBlock Grid.Row="2" HorizontalAlignment="Center" Foreground="BlueViolet" Text="{Binding Age}"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>                
        </ListView>

C# code is:

    public class BINPerson
    {
        public string Name { get; set; }
        public double Age { get; set; }
        string imageUrl = "";
        public string ImageUrl
        {
            get
            {
                return imageUrl;
            }
            set => imageUrl = value;
        }
    }

    public sealed partial class ListViewTest : Window
    {
        public ObservableCollection<BINPerson> persons { get; set; }
        public ListViewTest()
        {
            this.InitializeComponent();
            persons = new ObservableCollection<BINPerson> {
                new BINPerson { Name = "Tom", Age = 22, ImageUrl = "https://tse3-mm.cn.bing.net/th/id/OIP-C.QCCHiDia-3rwlugbjE25HwHaE4?w=274&h=180&c=7&r=0&o=5&pid=1.7" },
                    new BINPerson { Name = "Lily", Age = 23, ImageUrl = "https://tse4-mm.cn.bing.net/th/id/OIP-C.r3Tn7N9bculvfp-TSBYSMgHaE8?w=276&h=184&c=7&r=0&o=5&pid=1.7" }
                    };
        }
    }

When I run the application, I can only see 2 blank item, it seems that "{Binding}" command not work at all.

I also try "DataTemplte" like this:

        <ListView ItemsSource="{x:Bind persons}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:BINPerson">
                    <Grid x:Name="Bd" Background="PaleVioletRed" Margin="10" Padding="4">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Image Source="{x:Bind ImageUrl}" Width="180" Height="180"/>
                        <TextBlock Grid.Row="1" HorizontalAlignment="Center" Foreground="#000" Text="{x:Bind Name}"/>
                        <TextBlock Grid.Row="2" HorizontalAlignment="Center" Foreground="BlueViolet" Text="{x:Bind Age}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>                
        </ListView>

In this case, data can be display as expected, but I can not modify default mouse hover or selected visual state of ListViewItem, so data template is not my choice.

1 answer

Jeanine Zhang-MSFT 9,181 Microsoft Vendor

Hello,

Welcome to Microsoft Q&A!

According to your description, whether you want to set the background color of the ListViewItem on mouse hover? If so I suggest you could try to modify the value of PointerOverBackground Property.

You could follow the steps:

1, Add the Style in the StackPanel.Resources.

You could find TargetType="ListViewItem" x:Key="ListViewItemRevealStyle" in the generic.xaml. And you could copy it directly into XAML.

        <StackPanel.Resources>

            <Style TargetType="ListViewItem" x:Key="testStyle">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="12,0,12,0" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="Red"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />

                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="PointerOver" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />

                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="PointerOver" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />

                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />

                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />

                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />

                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />

                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />

                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </StackPanel.Resources>

2, Modify the value of PointerOverBackground Property as you like.

PointerOverBackground="Red"

3, Add ItemContainerStyle Property to set the Style that is applied to the container element generated for ListView item.

<ListView ItemsSource="{x:Bind persons}" ItemContainerStyle="{StaticResource testStyle}" >

Result:

User's image

Thank you.

Jeanine

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

aluzi liu 486 Reputation points

2023-05-16T10:04:30.9966667+00:00

The default ListViewItem container style has some problems to me:

1.The mouse hover highlight is round corner, and has margin you can not remove.Only change it's color is not enough.

2.When listview item selected, a small blue bar will appear on left side of listview item, I don't want it.

3.When listview set to allow multiple selection, the default checkbox style does not meet my aesthetics at all.

I can combine use ItemContainerStyle + ItemTemplate to solve this problems and data-binding issue, but I can not control the visual state of elements inside ItemTemplate.

For example, suppose there is a button in listview item, this button visible only when mouse hover on listview item, so I have to put it on ItemContainerStyle, not ItemTemplate, this will cause ui layout issue( becuase the button is not in ItemTemplate, I can not layout it with other elements)

Jeanine Zhang-MSFT 9,181 Microsoft Vendor

I suggest you could try to handle PointerEntered Event and PointerExited Event in ItemTemplate.

XAML:

<Grid x:Name="Bd"  Background="PaleVioletRed" Margin="10" Padding="4" PointerEntered="Bd_PointerEntered" PointerExited="Bd_PointerExited">

C#:

		private void Bd_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            var grid = sender as Grid;
            grid.Background = new SolidColorBrush(Colors.Yellow);
        }



        private void Bd_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            var grid = sender as Grid;
            grid.Background = new SolidColorBrush(Colors.PaleVioletRed);
        }

Result:

User's image

aluzi liu 486 Reputation points

2023-05-19T03:33:37.5733333+00:00
I said only change the background color is not enough.

But luckily, I found the solution, that is do not use ItemContainerStyle, just use DataTemplate like this:

<ListView> <ListView.ItemTemplate> <DataTemplate> <ListViewItem Style="{StaticResource MyListViewItemStyle}"/> </DataTemplate> </ListView.ItemTemplate> </ListView>

In the DataTemplate just put a ListViewItem on it, use style to full customize the visual state of ListViewItem, and the data binding is working!