CODEWITHSUNDEEP
c#xamlgridviewmicrosoft-metro
Bolorunduro Winner-Timothy
Bolorunduro Winner-Timothy

Reputation: 323

How to determine the clicked item in a gridview

I used this XAML code to create a gridview and add items to it:

<Grid x:Name="MainStack" HorizontalAlignment="Left" Height="628" Grid.Row="1" VerticalAlignment="Top" Width="1366">
        <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
            Grid.RowSpan="2"
        Padding="130,42,116,46"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        Background="#FFFB0404" Margin="0,0,0,0" RenderTransformOrigin="0.489,0.503" ItemClick="MainPage_Click">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
            <x:String>Item 4</x:String>
            <x:String>Item 5</x:String>
            <x:String>Item 6</x:String>
            <x:String>Item 7</x:String>
            <x:String>Item 8</x:String>
        </GridView>
    </Grid>

Then I tried using this C# code

 private void MainPage_Click(object sender, ItemClickEventArgs e)
    {
        string output = e.ClickedItem.ToString();
        int ClickValue = Convert.ToInt32(output);
        if (ClickValue == 0)
        {
            this.Frame.Navigate(typeof(ItemsPageRSS));
        }
    }

to make the app navigate to a page when the 1st item is clicked but it gave an error.

Please if anyone can tell me how to isolate each iem and add a seperate click event for each and how to customize the gridview items by adding titles, subtitles and images to the items. Thank you in advance.

Upvotes: 2

Views: 5499

Answers (1)

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

Here I am giving you simple example if you can't understand MSDN sample. Just create new project and paste the whole code.

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <GridView
        x:Name="itemGridView"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="None"
        IsItemClickEnabled="True"
        Background="#FFFB0404" 
        ItemClick="MainPage_Click"/>
</Grid>

C#

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var gvData = new ObservableCollection<MyData>();
    for (int i = 0; i < 8; i++)
    {
        gvData.Add(new MyData
        {
            ID = i,
            Image = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png")), //You can add any image
            Title = "Title " + i,
            Subtitle = "Subtitle " + i
        });
    }
    itemGridView.ItemsSource = gvData;
}

private void MainPage_Click(object sender, ItemClickEventArgs e)
{
    MyData output = e.ClickedItem as MyData;
    int ClickValue = output.ID;
    if (ClickValue == 0)
    {
        this.Frame.Navigate(typeof(ItemsPageRSS));
        //TODO : Do whatever you want
    }

    //.....
    //TODO : Do operations for other items as well.
}

You may create MyData class outside the scope of MainPage (XAML Page) class.

public class MyData
{
    public int ID { get; set; }
    public ImageSource Image { get; set; }
    public string Title { get; set; }
    public string Subtitle { get; set; }
}

Upvotes: 9

Related Questions