C# 如何在单击listbox项目时导航到其他页面。

我陷入了这个特殊的问题。请帮忙。基本上，每个项目都有唯一的ID，我希望项目在单击时导航到不同的位置。我试图将pagepath设置为Archive.xaml，但它不起作用

MainPage.Xaml

<Page
x:Class="SkinScanner.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SkinScanner"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Loaded="Page_Loaded"
xmlns:data="using:SkinScanner.Model"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyAutoSuggestBox.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="400" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyAutoSuggestBox.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <RelativePanel>
        <Button Name="HamburgerButton" 
                RelativePanel.AlignLeftWithPanel="True"
                FontFamily="Segoe MDL2 Assets" 
                Content="&#xE700;"
                FontSize="20"
                Width="45"
                Height="45"
                HorizontalAlignment="Center"
                Click="HamburgerButton_Click"
                />

        <TextBlock Name="TitleTextBlock" 
                   RelativePanel.RightOf="HamburgerButton"
                   FontSize="18"
                   FontWeight="Bold"
                   Margin="20,10,0,0" />

        <AutoSuggestBox Name="MyAutoSuggestBox"
                        QueryIcon="Find" 
                        PlaceholderText="Search" 
                        RelativePanel.AlignRightWithPanel="True"
                        Width="200"
                        Margin="0,5,10,0" />
    </RelativePanel>

    <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>

</Grid>

MainPage.cs

public sealed partial class MainPage : Page
{
    private ObservableCollection<SkinItem> SkinItems;

    public MainPage()
    {
        this.InitializeComponent();
        SkinItems = new ObservableCollection<SkinItem>();
    }

    private void HamburgerButton_Click(object sender, RoutedEventArgs e)
    {
        MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    }

    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";
        }
    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        Home.IsSelected = true;
    }


}

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", pagePath = "Archive.xaml" });

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

        return items;
    }

}

公共密封部分类主页面：第页
{
私人可观测收集项目；
公共主页（）
{
this.InitializeComponent（）；
SkinItems=新的ObservableCollection（）；
}
私有无效汉堡按钮点击（对象发送者，路由目标e）
{
MySplitView.IsPaneOpen=！MySplitView.IsPaneOpen；
}
私有无效列表框\u SelectionChanged（对象发送方，SelectionChangedEventArgs e）
{
如果（Home.IsSelected）
{
SkinsManager.GetSkins（“主页”，SkinItems）；
TitleTextBlock.Text=“主页”；
}
else if（关于.IsSelected）
{
GetSkins（“关于”，SkinItems）；
TitleTextBlock.Text=“关于”；
}
}
已加载私有无效页面（对象发送方，路由目标e）
{
Home.IsSelected=true；
}
}

}

皮肤项目类别

public sealed partial class MainPage : Page
{
    private ObservableCollection<SkinItem> SkinItems;

    public MainPage()
    {
        this.InitializeComponent();
        SkinItems = new ObservableCollection<SkinItem>();
    }

    private void HamburgerButton_Click(object sender, RoutedEventArgs e)
    {
        MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    }

    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";
        }
    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        Home.IsSelected = true;
    }


}

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", pagePath = "Archive.xaml" });

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

        return items;
    }

}

公共类SkinsManager
{
公共静态void GetSkins（字符串类别，ObservableCollection skinItems）
{
var allItems=getSkinItems（）；
var filterednewitems=allItems.Where（p=>p.Category==Category.ToList（）；
skinItems.Clear（）；
filteredNewsItems.ForEach（p=>skinItems.Add（p））；
}
私有静态列表getSkinItems（）
{
var items=新列表（）；
添加（new SkinItem（）{Id=1，Category=“Home”，Headline=“Diagnosis”，Subhead=“”，DateLine=“”，Image=“Assets/Diagnosis.jpg”}）；
添加（new SkinItem（）{Id=2，Category=“Home”，Headline=“Archive”，Subhead=“”，DateLine=“”，Image=“Assets/Archive.png”，pagePath=“Archive.xaml”}）；
添加（new SkinItem（）{Id=3，Category=“About”，Headline=“VKSE”，Subhead=“”，DateLine=“”，Image=“Assets/About.jpg”}）；
退货项目；
}
}

---

}简单的回答是，您的框架有导航方法来为您处理此问题。看

您可以通过将单击事件添加到

列表项

s（不完全推荐，但可以快速实现）或使用命令来调用这些事件

您可以通过使用

列表项

中的按钮来实现这一点，只需简单的操作即可删除样式

    <Style x:Key="NavigationButtonStyle" TargetType="Button">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="BorderThickness" Value="4,0,0,0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
    </Style>

事实上，这是我之前做的一个

    <SplitView Grid.Row="1" DisplayMode="CompactInline" IsPaneOpen="{Binding ElementName=hamburger,Path=IsChecked}">
        <SplitView.Pane>
            <StackPanel Orientation="Vertical">
                <StackPanel Style="{StaticResource HamburgerStackPanelStyle}" >
                    <ToggleButton x:Name="hamburger" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Style="{StaticResource HamburgerToggleButtonStyle}" Width="48" />
                    <TextBlock Text=" Timesheet" Style="{StaticResource NavigationHeaderTextBlockStyle}"/>
                </StackPanel>
                <Button Style="{StaticResource NavigationButtonStyle}" Command="{Binding GoXxxxxxxCommand}">
                    <Button.Content>
                        <StackPanel Style="{StaticResource NavigationStackPanelStyle}" >
                            <TextBlock Text="" Style="{StaticResource NavigationLinkIconTextBlockStyle}"/>
                            <TextBlock Text="Xxxxxxx" Style="{StaticResource NavigationLinkTextTextBlockStyle}"/>
                        </StackPanel>
                    </Button.Content>
                </Button>

---

..

我想避免使用按钮，因为它看起来非常糟糕。我尝试了这个方法，但它不起作用。私有void itemGridView_ItemClick（对象发送者，ItemClickEventArgs e）{var itemId=（（SkinItem）e.ClickedItem）.Id；this.Frame.Navigate（typeof（Archive），2）；this.Frame.Navigate（typeof（Diagnosis），1）；如果它的外观是唯一的问题，请参见上文，我已经更新了这篇文章，介绍了如何在通用应用程序中处理固定导航列表。但是，如果您想要动态菜单，那么再次返回“ListView ItemsSource=“{Binding…”将是一种方法。