CODEWITHSUNDEEP
c#windows-phone-8.1win-universal-app
user3796130
user3796130

Reputation:

How to get rid of box selection border of GridView UWP

I have this gridview which works fine, but everytime I select an item I got this blue line around the item, how to remove it ?

<GridView Margin="5,15,0,0"  x:Name="List" ItemsSource="{Binding}" SelectionChanged="List_SelectionChanged">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid  Margin="11">
                    <StackPanel BorderBrush="Black" Orientation="Vertical">
                        <Image Width="150" Height="150" Source="{Binding Way}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid  MaximumRowsOrColumns="2" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

enter image description here

Upvotes: 3

Views: 3095

Answers (3)

Arjun
Arjun

Reputation: 399

The following fixed it for me:

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <ListViewItemPresenter
                SelectedBackground="Transparent"
                SelectedPointerOverBackground="Transparent"
                PressedBackground="Transparent"
                SelectedPressedBackground="Transparent"
                />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GridView.ItemContainerStyle>

Upvotes: 6

rskulles
rskulles

Reputation: 111

This is how I do it. Although it's not difficult to change the style, this requires about 99% less xaml (and a bit more code) to accomplish. You will have to remove the SelectionChanged event, specify the data type for your DataTemplate and add a Tapped event to each item. 

<GridView SelectionMode="None" ItemsSource="{Binding}" 
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="YourType">
            <Grid  Tapped="Grid_Tapped_For_Every_Item">
               ...                   
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    ...
</GridView>

in code file:

private void Grid_Tapped_For_Every_Item(object sender, TappedRoutedEventArgs e){

    var g = (Grid) sender;
    var myClass = (YourType)g.DataContext;
    //Do whatever you were going to do in the SelectionChanged event
}

Upvotes: 1

Jayden
Jayden

Reputation: 3286

To remove the selection blue border of GridView, we can modify the template of GridView. To modify the template of GridViewItem, we can select the GridView in "Document Outline" and right click, then select "Edit Additional Templates"→ "Edit Generated Item Container (ItemContainerStyle)" → "Edit a Copy...".

In the Style, there is a ListViewItemPresenter in it.

When developing for Windows 10, use ListViewItemPresenter instead of GridViewItemPresenter in your item container style, both for ListView and for GridView.

For more info, see ListViewItemPresenter.

The color of blue line around the item is defined by SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}". We can set the SelectedBackground="Transparent", then there is no blue line around the item.

Upvotes: 2

Related Questions