CODEWITHSUNDEEP
xamluwpuwp-xaml
None
None

Reputation: 5670

Hide Default checkbox inside MultiSelect ListView (UWP)

I have a ListView like this

                            <ListView  ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Transparent" VerticalAlignment="Stretch" 
                                   SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Multiple"  HorizontalAlignment="Stretch" >
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    <Setter Property="BorderThickness" Value="0 0 0 1"/>
                                </Style>
                            </ListView.ItemContainerStyle>
                        </ListView>

When this Listview Renders on-page, it comes with Default Checkbox inside each item. I want to hide those Checkboxes and show only data. how can I achieve this?

This is how the ListView looks now

enter image description here

Upvotes: 2

Views: 1068

Answers (2)

Dušan Kalivoda
Dušan Kalivoda

Reputation: 189

You can fix it by changing ListView to ListBox:

<ListBox
    ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}"
    Background="Transparent"
    VerticalAlignment="Stretch" 
    SelectionChanged="StudentsList_SelectionChanged"
    x:Name="StudentsList"
    SelectionMode="Multiple"
    HorizontalAlignment="Stretch" >
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0 0 0 1"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Upvotes: -1

Nico Zhu
Nico Zhu

Reputation: 32775

Hide Default checkbox inside MultiSelect ListView (UWP)

That could be approached easily by edit the <Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">,(in generic.xaml file) you could find the checkbox was made with MultiSelectSquare Border, we just add the edit Normal VisualState like the following, and the checkbox will be hidden when Multiple SelectionMode.

<VisualState x:Name="Normal">
    <Storyboard>
        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Usage

<ListView
    Name="TestList"
    IsItemClickEnabled="True"
    ItemClick="ListView_ItemClick"
    ItemContainerStyle="{StaticResource ListViewItemExpanded}"
    SelectionMode="Multiple"
    Visibility="Visible"
    >

Upvotes: 2

Related Questions