Redirect to page on Listview row click

Question

I have a Listview and each of the columns has an associated id_Number. Is it possible to redirect to another page, if user clicks on one of the rows? For example, if id_Number is 4, than page should be redirected to achive.xaml.

MainPage

 <SplitView Name="MySplitView" 
               Grid.Row="1" 
               DisplayMode="CompactOverlay" 
               OpenPaneLength="150" 
               CompactPaneLength="45" >
        <SplitView.Pane>
            <ListBox SelectionMode="Single" 
                     SelectionChanged="ListBox_SelectionChanged">
                <ListBoxItem Name="Home">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock 
                            Text="&#xE80F;"
                            FontFamily="Segoe MDL2 Assets" 
                            FontSize="20" />
                        <TextBlock Text="Home" 
                                   FontSize="18" 
                                   Margin="20,0,0,0" />
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="About">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock 
                            Text="&#xE1CE;"
                            FontFamily="Segoe MDL2 Assets" 
                            FontSize="20" />
                        <TextBlock Text="About" 
                                   FontSize="18" 
                                   Margin="20,0,0,0" />
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
            <GridView Name="SkinItemGrid"
                      Background="LightGray"
                      ItemsSource="{x:Bind SkinItems}"
                      HorizontalAlignment="Stretch"
                      IsItemClickEnabled="True"
                      Margin="10,0,0,0">
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="data:SkinItem">
                        <local:SkinItemControl />
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </SplitView.Content>
    </SplitView>

MainPage.cs

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (Home.IsSelected)
        {
            SkinsManager.GetSkins("Home", SkinItems);
            TitleTextBlock.Text = "Home";
        }
        else if (About.IsSelected)
        {
            SkinsManager.GetSkins("About", SkinItems);
            TitleTextBlock.Text = "About";
        }
    }

Skin Class

public class SkinItem
{
    public int Id { get; set; }
    public string Category { get; set; }
    public string Headline { get; set; }
    public string Subhead { get; set; }
    public string DateLine { get; set; }
    public string Image { get; set; }
}

public class SkinsManager
{
    public static void GetSkins(string category, ObservableCollection<SkinItem> skinItems)
    {
        var allItems = getSkinItems();

        var filteredNewsItems = allItems.Where(p => p.Category == category).ToList();

        skinItems.Clear();

        filteredNewsItems.ForEach(p => skinItems.Add(p));
    }

    private static List<SkinItem> getSkinItems()
    {
        var items = new List<SkinItem>();

        items.Add(new SkinItem() { Id = 1, Category = "Home", Headline = "Diagnosis", Subhead = "", DateLine = "", Image = "Assets/Diagnosis.jpg" });
        items.Add(new SkinItem() { Id = 2, Category = "Home", Headline = "Archive",   Subhead = "", DateLine = "", Image = "Assets/Archive.png" });

        items.Add(new SkinItem() { Id = 3, Category = "About", Headline = "VKSE", Subhead = "", DateLine = "", Image = "Assets/About.jpg" });

        return items;
    }

}

}

could you perhaps use something like this posted here and do your redirects based on a switch case using the `e.RoutedEventsArgs` http://stackoverflow.com/questions/1271375/how-to-capture-a-mouse-click-on-an-item-in-a-listbox-in-wpf — MethodMan, Nov 23 '15 at 16:38

score 0 · Answer 1 · answered Nov 23 '15 at 16:50

0

This is probably best done in javascript/jquery with a .click() listener and adding a class to all of the rows

$( ".YourClass" ).click(function() {
  var id = $(this).attribute("RowID");
  if (id == 4) {window.open("address.html");}
});

answered Nov 23 '15 at 16:50

Drewber81

25
10

$(".SkinItem").click(function () { var id = $(this).attribute("2"); if (id == 4) { window.open("Archive.xaml"); } }); – user3807187 Nov 23 '15 at 16:55

score 0 · Answer 2 · answered Nov 23 '15 at 16:59

0

Try

       $(document).on('click','.SkinItem',function () { var id =    $(this).attribute("2"); if (id == 4) { window.open("Archive.xaml"); } });

Sometimes i have problems calling on click events on listview objects without doing this.

answered Nov 23 '15 at 16:59

Falanor

206
1
9

Nope. Doesn't work. I just create a javascript file, maybe i need to reference it or smth like jquery? its my first time attempting this. – user3807187 Nov 23 '15 at 17:05
1

You can either reference the .js file or include it in the script block on the page – Falanor Nov 24 '15 at 04:11

Redirect to page on Listview row click

MainPage

MainPage.cs

Skin Class

2 Answers2