让堆栈面板可点击并加载视口

Question

先post在这里，如果我做错了什么，请打我一巴掌。

我目前正在尝试学习 UWP 代码，我想尝试创建一个底部导航栏。我正在尝试使用堆栈面板来做到这一点

我的想法是，当单击/点击堆栈面板时，它应该将一个新页面加载到视口中，但是我想不出这样做的正确代码。这是我的堆栈面板的简短版本：

<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
        <StackPanel Name="FirstButton" Tapped="FirstButton_Tapped">
            <TextBlock x:Name="Icon1" />
            <TextBlock x:Name="Text1" />
        </StackPanel>
         <StackPanel Name="SecondButton" Tapped="SecondButton_Tapped">
            <TextBlock x:Name="Icon2" />
            <TextBlock x:Name="Text2" />
        </StackPanel>
         <StackPanel Name="ThirdButton" Tapped="ThirdButton_Tapped">
            <TextBlock x:Name="Icon3" />
            <TextBlock x:Name="Text3" />
        </StackPanel>

我选择 stackpanel 是因为这对我来说是最好的方式，它有一个底部和水平对齐的栏，顶部有一个图标，下面显示文本。（如果您有更好的想法，请随时post）

现在的问题是我应该如何编写 C# 代码，以便 Tapped 事件将第二页加载到视口中。

（此外，我的目标风格类似于 deezer 使用的风格，示例在这里：http://imgur.com/WNNi96v

提前致谢！

Answer 1

只需创建按钮并将它们放置在每个堆栈面板中。 Button 控件的 button.Content 属性可让您将两个文本块放入其中。

Answer 2

正如@Pedro G. Dias 所说，使用 Button 控件要好得多，因为与使用 Tap StackPanel

的事件

您可以使用 ContentTemplate

轻松自定义 Button

 <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
        <Button x:Name="FirstButton" Click="FirstButton_Click">
            <Button.ContentTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock x:Name="Icon1" />
                        <TextBlock x:Name="Text1" />
                    </StackPanel>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>
        <!--More buttons here-->
</StackPanel>

让堆栈面板可点击并加载视口

have stackpanel clickable and load viewport

c#

onclick

uwp

viewport

stackpanel