CODEWITHSUNDEEP
xamlwindows-8winrt-xaml
earthling
earthling

Reputation: 5264

Highlighting around GridView items

I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!

Here's my markup:

        <GridView.ItemTemplate>
            <DataTemplate>
                <!--  ******************* here is my margins *******************  -->
                <Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
                    <Grid HorizontalAlignment="Left" Width="390" Height="190">
                        <Grid.Background>
                            <ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
                        </Grid.Background>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                            <Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
                            <StackPanel MaxWidth="270">
                                <TextBlock Text="{Binding Summary}"/>
                                <TextBlock Text="{Binding Brand}" />
                                <TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>

Upvotes: 1

Views: 114

Answers (1)

Chris W.
Chris W.

Reputation: 23280

Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.

You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;

<blah.Resources>
  <SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>

Hope this helps.

Upvotes: 1

Related Questions