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>

Answer 1

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>

Answer 2

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

check checkbox when item selected in listview UWP

2 个答案: