Search code examples
xamlwinrt-xamlwin-universal-appwindows-10-universaltemplate10

template 10: declaring a new button in hamburger navigation and navigating to its page


I am kind of beginner in UWP Platform and I am building an app using template 10. I have used GridView for a particular page, but the problem is that the GridView shows its borders when you hover over it or select its item. Like this:

The Grideview Image

I want the border not to show up whenever the user hovers over it or selects a GridView item.

My XAML Code is:

<Page
x:Class="Sample.Views.Category"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sample.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:Sample.ViewModels"
 xmlns:controls="using:Template10.Controls"
mc:Ignorable="d">
<Page.Resources>
    <DataTemplate x:DataType="data:CategoryViewModel" x:Key="CategoryDataTemplate">
        <StackPanel HorizontalAlignment="Center" Margin="10,0,20,10">

            <Image Width="150" Source="{x:Bind IconFile}" />
            <TextBlock FontSize="16" Text="{x:Bind Category}" HorizontalAlignment="Center"  />
            <!--<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" />-->
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--  header  -->
    <controls:PageHeader x:Name="pageHeader" Frame="{x:Bind Frame}" Text="Category Page" Grid.Row="0" Grid.ColumnSpan="2">
        <!--  place stretched, across top  -->
        <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
        <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
        <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
    </controls:PageHeader>

    <GridView Grid.Row="2" >
        <GridView  ItemsSource="{x:Bind Categories}" 
              IsItemClickEnabled="True" 
              ItemClick="GridView_ItemClick"
              ItemTemplate="{StaticResource CategoryDataTemplate}" >
        </GridView>
    </GridView>
</Grid>


Solution

  • Try setting the gridview BorderThickness to 0, and brush to Transparent (assuming the thickness didn't work)

    https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

    Here is a link to the properties for the gridview control in XAML.

    since you said you're a beginner, try messing around with the different properties and since you have a nested gridview inside a gridview (not sure why) try setting it on both of them.

    e.g.:

    <GridView Grid.Row="2" BorderThickness="0">