在 VS C# Windows 通用中切换页面集线器 class 的不同方法

Question

所以，这可能看起来相当基础，但到目前为止，我在 C# 中找到的在 windows 通用应用程序中切换当前页面的唯一方法是使用 header clicked 方法结合将 IsHeaderInteractive 设置为 true。考虑到它只是停留在您单击的小 "see more" 按钮中，这看起来或感觉起来不是很直观。相反，我将如何向更改页面的整个中心部分添加点击事件。这是我现在拥有的。

         private void HubSection_Click(object sender, HubSectionHeaderClickEventArgs e)
    {

        switch (e.Section.Name)
        {
            case "China":
                Frame.Navigate(typeof(SubtopicPage));
                break;
            case "Japan":
                Frame.Navigate(typeof(SubtopicPage));
                break;
        }

    }

这里还有 XAML：

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

<Grid Background="{ThemeResource SystemControlForegroundBaseHighBrush}">
    <Hub Header="Countries App" Foreground="#FFC3BFBF" SectionHeaderClick="HubSection_Click" Name="CountryHub">
        <HubSection x:Name="China" MinWidth="256" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True">
            <DataTemplate>
                <Grid Height="460" Width="256" VerticalAlignment="Bottom">
                    <Image Source="Assets/chinaFlag.bmp"/>
                </Grid>
            </DataTemplate>
        </HubSection>

        <HubSection x:Name ="Japan" MinWidth="256" Height="460" Background="#FF565454" Header="Japan" IsHeaderInteractive="True">
            <DataTemplate>
                <Grid Height="460" Width="256" VerticalAlignment="Bottom">
                    <Image Source="Assets/japanFlag.bmp" Height="169"/>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Width="256" Height="460" Background="#FF343434">

        </HubSection>
        <HubSection Width="256" Height="460" Background="#FF565454">
            <DataTemplate>
                <Grid Height="460" Width="256" VerticalAlignment="Bottom"/>
            </DataTemplate>
        </HubSection>
    </Hub>


</Grid>

目前四个中心部分中有两个没有内容，但这不是重点。提前感谢您的帮助。

Answer 1

我认为目前这是唯一的方法。

我阅读了 MSDN 文档中的官方文章，似乎没有事件或属性来获取当前选定的项目。

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.hub.aspx?cs-save-lang=1&cs-lang=csharp#code-snippet-1

Answer 2

同意 RicardoPons 的观点，据我所知，没有方法可以获取所选项目。

作为工作回合，您可以添加 HubSection 的 Tabbed 事件。您可以知道哪个 HubSection 被窃听了。

例如：

<Hub Header="Countries App" Foreground="#FFC3BFBF" SectionHeaderClick="HubSection_Click" Name="CountryHub">
    <HubSection x:Name="China" MinWidth="256" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}">
        <DataTemplate>
            <Grid Height="460" Width="256" VerticalAlignment="Bottom">
                <Image Source="Assets/dog.jpg" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection x:Name ="Japan" MinWidth="256" Height="460" Background="#FF565454" Header="Japan" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}">
        <DataTemplate>
            <Grid Height="460" Width="256" VerticalAlignment="Bottom">
                <Image Source="Assets/color.jpg" Height="169" />
            </Grid>
        </DataTemplate>
    </HubSection>
</Hub>

在后面的代码中：

private void HubSectionTapped(object sender, TappedRoutedEventArgs e)
{
    var hubSectiona = sender as HubSection;
    var name = hubSectiona.Name;
    NaviagteMethod(name);
}

public void NaviagteMethod(string name)
{
    switch (name)
    {
        case "China":
            Frame.Navigate(typeof(SubtopicPage));
            break;

        case "Japan":
            Frame.Navigate(typeof(SubtopicPage));
            break;
    }
}

在 VS C# Windows 通用中切换页面集线器 class 的不同方法

Different method of switching pages hub class in VS C# Windows Universal

c#

navigation

controls

win-universal-app

windows-10-universal