check checkbox when item selected in listview UWP

Question

I am writing a UWP app with a listview. The listviewitems contain a textblock and a checkbox. When the listviewitem is selected, I would like the checkbox to check/uncheck. I would also like to remove the "selected" animation, where the listviewitem turns blue when it is selected.

I have found different solutions, but they all seem to rely on the use of Triggers, which Visual Studio tells me is not available in UWP.

How can I solve this, without triggers in UWP?

My listview:

<ListView Name="ListViewItems" Grid.Row="2">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Margin" Value="0,0,0,1"></Setter>
                <Setter Property="Background" Value="White"></Setter>
                <Setter Property="Padding" Value="5"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,0">
                    <CheckBox HorizontalAlignment="Right" VerticalAlignment="Center" Name="CheckBoxItem"></CheckBox>
                    <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Name="TextblockItem" Text="{Binding}"></TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Bruno Joaquim · Answer 1 · 2015-11-12T12:12:07.070

When the listviewitem is selected, I would like the checkbox to check/uncheck.

You can directly binding the IsChecked property to the CheckBox to the ListViewItem IsSelected property:

<CheckBox 
      HorizontalAlignment="Right" 
      Margin="10"
      VerticalAlignment="Center" 
      IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}}"
      Name="CheckBoxItem">
</CheckBox>

Whenever the IsSelected Property of ListViewItem change, the CheckBox will be checked/unchecked.

I would also like to remove the "selected" animation, where the listviewitem turns blue when it is selected.

The code below can help you achieve this, BUT, it overrides the Template of the Item, which means that you have to write your own template.

            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />                    
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Looks like a clean solution, but have you tried making that binding to the IsChecked property? I read [here](http://stackoverflow.com/questions/15233072/windowsphone-relativesource-mode-findancestor-ancestortype-cannotresolve-sy) that the AncestorType is not supported on Windows Phone, and I can't seem to make it work in UWP either. "AncestorType is not regicnized or is not accessible". — Masterchief, Nov 12 '15 at 13:49
As is not possible do that in Windows Phone(I test a binding, but on a desktop application), you could try the solution of Depechie, but be careful, doing so you can mix business logic and UI, since you are creating a property on your class just to handle some UI logic, I recommend you create a Viewmodel to the item which is bind to the list. — Bruno Joaquim, Nov 12 '15 at 15:19
Depends a bit if you still need to get hold of the selected ones if you navigate away and come back to the page. Then having the property bound to the object in your viewmodel helps :) — Depechie, Nov 12 '15 at 15:30
If you have a view that is not cached and navigate away from it and come back, all items will be deselected again... so if you need to keep track of that, you better bind a field of the class to the checkbox — Depechie, Nov 12 '15 at 20:56

score 0 · Answer 2 · answered Nov 12 '15 at 11:51

If your ItemSource of the ListView is bound to a collection on a ViewModel, I would suggest you add a bool to the item class of the collection.

So for example if you are showing Persons, add a bool IsSelected field to the Person class. You can then use this field to bind it to the IsChecked prop of the checkbox in your view, only thing needed to do is be sure to set the Mode=TwoWay

Last thing left to do is toggle this IsSelected field, you do this by binding the SelectedItem of the ListView to a Person property on your ViewModel and each time this is being called ( setter of the property ), toggle the given IsSelected field.

To override the change in colour when an item is selected of the ListView, you need to get a copy of the ListView template and delete the colour setting in the selected state

I had some similar problem, your solution helped me a lot, thanks — Maryam, Nov 16 '16 at 06:48
I feel like adding the selection bool to the model breaks mvvm. — Ryan, Mar 31 '17 at 01:33

check checkbox when item selected in listview UWP

2 Answers2