Windows 8 中的数据导航

• 下载 Example2_StringTransfer-noexe.zip - 150.4 KB
• 下载 Eample1_ImageTransfer-noexe.zip - 6.7 MB

引言

在这个项目中，我解释了如何在 Windows 8 应用程序中通过数据在两个页面之间进行导航。在这里，最重要的是“Public Static”关键字。我在 mainpage.xaml.cs 中创建了 public static Imagesource（或“int”或“string”）引用。之后，将其分配给对象的值。

我解释了两个简单但非常有用的例子。

在第一个例子中，我在一个页面和另一个页面之间传输图像源。

在第二个例子中，我在一个页面和另一个页面之间传输了 string 值。

Using the Code

示例 1（传输图像源）

步骤 1

打开 Visual Studio 并创建一个新项目。选择空白应用。之后分配有意义的名称。然后确定。

第二步

将您的四张图像粘贴到 Asstes 文件夹中。

步骤 3

之后，像这样在 mainpage.xaml 中拖放四个图像控件。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Image HorizontalAlignment="Left" Height="251" Margin="88,108,0,0" 
        VerticalAlignment="Top" Width="403"/>
        <Image HorizontalAlignment="Left" Height="251"
Margin="713,123,0,0" VerticalAlignment="Top" Width="403"/>
        <Image HorizontalAlignment="Left" Height="251"
Margin="88,416,0,0" VerticalAlignment="Top" Width="403"/>
        <Image HorizontalAlignment="Left" Height="251"
Margin="713,416,0,0" VerticalAlignment="Top" Width="403"/>

    </Grid>

步骤 4

之后，定义图像控件的名称，例如第一个图像控件名称“Image1”，第二个是“Image2”，第三个是“Image3”，第四个是“Image4”。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Image x:Name="Image1" HorizontalAlignment="Left" Height="251" 
        Margin="88,108,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image2" HorizontalAlignment="Left" Height="251"
Margin="713,123,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image3" HorizontalAlignment="Left" Height="251"
Margin="88,416,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image4" HorizontalAlignment="Left" Height="251"
Margin="713,416,0,0" VerticalAlignment="Top" Width="403"/>

    </Grid>

步骤 5

之后，所有图像都设置了源，并且所有图像都触发了点击事件。所以代码看起来像这样

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Image x:Name="Image1" HorizontalAlignment="Left" Height="251" Source=" Assets/1.jpg" Tapped="Image_Tapped_1"
               Margin="88,108,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image2" HorizontalAlignment="Left" Height="251" Source=" Assets/2.jpg" Tapped="Image_Tapped_2"
               Margin="713,123,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image3" HorizontalAlignment="Left" Height="251" Source=" Assets/3.jpg" Tapped="Image_Tapped_3"
               Margin="88,416,0,0" VerticalAlignment="Top" Width="403"/>
        <Image x:Name="Image4" HorizontalAlignment="Left" Height="251" Source=" Assets/4.jpg" Tapped="Image_Tapped_4"
               Margin="713,416,0,0" VerticalAlignment="Top" Width="403"/>

    </Grid>

步骤 6

在主页面构造函数上方创建一个名为 ImageSource1 的 ImageSource 类引用。

public static ImageSource ImageSource1;
public MainPage()
   {
      this.InitializeComponent();
   }

步骤 7

之后在项目中，右键单击添加 > 添加新项目并选择基本页面。

构建解决方案。

步骤 8

之后在 Image_Tapped_1 事件中，代码如下所示

//
//here assign value Image1.source in “ImageSource1”.and after that page
//navigation code for one page to another page.here BasicPage1 is destination page.
//
ImageSource1 = Image1.Source;
this.Frame.Navigate(typeof(BasicPage1));

步骤 9

类似于 Image_Tapped_2、Image_Tapped_3、Image_Tapped_4 事件，但只有一个变化。分配 ImageSource1 的值改变。

private void Image_Tapped_2(object sender, TappedRoutedEventArgs e)
{
   ImageSource1 = Image2.Source;
   this.Frame.Navigate(typeof(BasicPage1));
}

private void Image_Tapped_3(object sender, TappedRoutedEventArgs e)
{
   ImageSource1 = Image3.Source;
   this.Frame.Navigate(typeof(BasicPage1));
}

private void Image_Tapped_4(object sender, TappedRoutedEventArgs e)
{
   ImageSource1 = Image4.Source;
   this.Frame.Navigate(typeof(BasicPage1));
}

第 10 步

之后，在 Basicpage1.xaml 中取一个图像控件并赋予有意义的名称，例如“mycatchimage”。

<Image Name="mycatchimage" HorizontalAlignment="Left" Height="193" Margin="110,40,0,0" Grid.Row="1" VerticalAlignment="Top" Width="356"/>

第 11 步

在 BasicPage1.xaml.cs 中分配 mycatchimage 的源。

public BasicPage1()
{
    this.InitializeComponent();
    mycatchimage.Source = MainPage.ImageSource1;
}

第 12 步

您已经运行了代码，它看起来像这样

MainPage

BasicPage1

示例 2（传输字符串值）

步骤 1

打开 Visual Studio 并创建一个新项目。选择空白应用。之后分配有意义的名称。然后确定。

第二步

之后，在 mainpage.xaml 中拖放一个 TextBox 和 Button 控件，如下所示

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBox HorizontalAlignment="Left" Margin="351,172,0,0" TextWrapping="Wrap"
        Text="TextBox" VerticalAlignment="Top" Height="66" Width="412"/>
        <Button Content="Click" HorizontalAlignment="Left" 
        Margin="496,307,0,0" VerticalAlignment="Top"/>

    </Grid>

步骤 3

TextBox 控件的含义名称，例如“myText”。并触发按钮点击事件。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBox Name="myText" HorizontalAlignment="Left" Margin="351,172,0,0"
        TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" 
        Height="66" Width="412"/>
        <Button Content="Click" HorizontalAlignment="Left" 
        Margin="496,307,0,0"
        VerticalAlignment="Top" Click="Button_Click"/>

    </Grid>

步骤 4

在主页面构造函数上方创建一个名为“Data”的 string 类引用。

public static string Data;
public MainPage()
{
   this.InitializeComponent();
}

步骤 5

之后在项目中，右键单击添加 > 添加新项目并选择基本页面。

构建解决方案。

步骤 6

之后在 Button_Click 事件中，代码如下所示

private void Button_Click(object sender, RoutedEventArgs e)
{
   Data = myText.Text;
   this.Frame.Navigate(typeof(BasicPage1));
}

步骤 7

之后，在 Basicpage1.xaml 中取一个 Textblock 控件并赋予有意义的名称，例如“mycatchtext”。

<TextBlock Name="mycatchtext" HorizontalAlignment="Left" 
Margin="172,78,0,0"
Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
VerticalAlignment="Top" Height="440" Width="815"/>

步骤 8

在 BasicPage1.xaml.cs 中分配 mycatchtext 的 Text。

public BasicPage1()
{
   this.InitializeComponent();
   mycatchtext.Text = MainPage.Data;
}

步骤 9

您已经运行了代码，它看起来像这样

MainPage

BasicPage1