单击列表框项时如何导航到另一个页面。

时间:2015-11-26 11:11:19

标签: c# wpf xaml listview

我陷入了这个特殊的问题。请帮忙。基本上,每个项目都有唯一的ID,我希望项目在点击时导航到不同的地方。我试图将页面路径设置为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;
    }


}

}

SkinItem类

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

}

}

1 个答案:

答案 0 :(得分:0)

简短的回答是您的框架具有Navigate方法来为您处理此问题。见https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.frame.navigate.aspx

您可以通过向ListItem添加点击事件(不完全推荐但快速实施)或使用命令来调用这些事件。

您可以使用ListItem内的按钮来实现这一点,您可以使用简单的

删除样式
    <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>

...