PocketWorld-Ultrabook 旅行应用程序

引言

这是我的第一篇文章，所以我希望大家能原谅我糟糕的语法和稚嫩的写作经验。我期待着大家的支持。

这篇文章是关于一款针对 Windows 8 操作系统（桌面和 Metro 风格应用）的应用，它目前正在我的应用工厂中，并将很快在商店中上架。Windows 8 应用（桌面和 Metro 风格）必须非凡，在用户使用时提供娱乐性，并提供 W8 平台的最大特性。除了键盘和鼠标，使用触摸的能力将是这一代应用的关键属性。因此，在编写应用时，我们必须瞄准这个出色的平台。

我正在制作的应用是一款适合所有人随时随地使用的应用（在你的口袋里、公文包里……任何你想去的地方）。在这个云计算时代，人们有意或无意地环游世界，每一步都可能造成混乱。所以我们应该警惕我们的每一步。有一款能充当你的私人助理的应用会很好。我的应用（PocketWorld）将成为你在你最喜欢的超极本/W8 设备中的最佳朋友，你所需要的只是一个互联网连接。

这款应用的主要特点是，由于其可靠的设计，它可以轻松地在 Windows 桌面和 Metro 风格之间转换。我通过提供这款非凡的应用来同时针对 Metro 和桌面用户。我相信每个人都会喜欢它的设计和工作方式。

你不会在大城市或人群中迷失方向，因为这款应用会根据你的需求进行调整，并确保你在外出时玩得开心。这款应用利用 GPS（如果没有 GPS 功能，桌面设备的用户位置将通过 IP 获取），并利用设备传感器来帮助你。

如今，我们的伴侣可能无法完全理解我们的需求和情绪。但这款应用将成为你最好的伴侣。通过利用 GPS，它将引导你前往有吸引力的地方（湖泊、咖啡馆、酒吧、酒店、交通、旅游、租车等），并提供路线、天气、足迹等功能。它甚至会利用高级天气预报提醒你带雨衣。它是一款简单但对我们忙碌的生活非常有用的助手。

我的应用口号是“活出帝王般的生活”，超极本炫酷的触控和疯狂的传感器机制将让我的应用受到所有人的喜爱。

背景 

在一次孤独的旅行中，我迷路了，我身边的人说着外国语言。他们不理解我或我的语言。有时，不同文化的人必须相互交流，但会遇到困难。我想问他们很多关于我所在位置的问题，但我突然紧张得什么都忘了。挣扎了几个小时后，我逃离了那个地方。

在回家的路上，我一直在思考一个解决方案，以避免将来出现这个问题。最终，我设计了这款 Metro 风格的应用（以及一些 Metro 生活方式的内容），并将其整合在一个伞下。足迹功能将以一定的间隔记录你的旅行历史（使用巧妙的算法），而不会消耗太多电池电量。它可以通过 Facebook 与你的朋友分享。你也可以在应用中启用/禁用这些设置。它将帮助你找到返回原点的方式，或者在发生不好的事情时帮助你的朋友/家人。只需摇动应用，即可查看你在旅途中不想错过的地方。这些地方的所有评论和酷炫的画廊都触手可及。该应用会通知你周围的朋友可以打电话，这样你就可以在旅途中与他们见面，他们的面孔会在应用的地图上可见并“飞舞”。

该应用还提供你将要访问的某些地方的天气预报，并使用最近的交通工具（铁路、机场、公共汽车、出租车等）规划你的旅行。

Using the Code

代码正在上传到应用商店。我不知道这里需要描述多少代码。我只是截取了应用的一小部分来帮助说明。在 Metro/超极本应用中，我们需要处理的最重要的事情是必须处理多种视图模式（例如：横向、纵向、分屏视图等）。在分屏视图中，我们需要通过在列表和网格视图之间呈现数据来处理数据转换，以便为我们的应用磁贴和列表呈现更好的 UI 视图。这可以使用 VisualStateManager 来处理。

例如，如果你使用 Grid 或 Split Application 模板创建一个新的 WinRT 解决方案，你将获得创建布局感知页面所需的所有代码，该页面在分屏视图中显示不同的视图。如果你使用空白项目模板启动项目，则需要更多的工作才能使其正常运行。

首先，你需要将页面更改为布局感知页面。LayoutAwarePage 是模板提供的类，位于 Common 文件夹中。（更新：在 Visual Studio 2012 RC 中，空白页面项目中的 LayoutAwarePage 不再位于 common 文件夹中。你需要从 Grid 或 Split Application 模板中复制该文件。新版本还依赖于 SuspensionManager，该文件也位于这些项目模板的 common 文件夹中。）

在 BlankPage.xaml.cs 中，更改

public sealed partial class BlankPage : Page 

to

public sealed partial class BlankPage : LayoutAwarePage 

在 BlankPage.xaml 中，你需要更改一些内容：主页面标签现在需要是 LayoutAwarePage，因此将其从以下内容更改

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

到

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Application1.BlankPage"
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
    xmlns:local="using:Application1"
    xmlns:common="using:Application1.Common"
    xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008</a>"
    xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
    mc:Ignorable="d">

你的页面现在是一个布局感知页面，所以你所需要做的就是添加一个可视状态管理器，它将控制在每个不同视图中的外观。你可以根据视图选择显示或隐藏不同的元素，或者只是更改一些大小。无论哪种方式，你都必须在页面中包含所有你想要的元素，并设置它们在标准视图中的大小。只有当你希望它们仅在分屏视图中可见时才隐藏它们。这是一个可视状态管理器的简单示例

<VisualStateManager.VisualStateGroups>
 <VisualStateGroup>
  <VisualState x:Name="FullScreenLandscape"/>
  <VisualState x:Name="Filled"/>
  <VisualState x:Name="FullScreenPortrait"/>
  <VisualState x:Name="Snapped">
   <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyListScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGridScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    </ObjectAnimationUsingKeyFrames>
   </Storyboard>
  </VisualState>
 </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

在这个例子中，我有一个列表视图，它最初在分屏视图中是隐藏的，还有一个用于全屏视图的网格视图，我在分屏视图中隐藏它。

我希望你现在理解了分屏视图设置。现在我们可以将其转移到 API 调用和 WebResponse 解析等功能。我的应用处理的最重要的事情是 GPS。该应用利用设备的 GPS 通过 BingMap SDK 获取用户当前位置。

Geolocator geoLocator = new Geolocator(); 
geoLocator.PositionChanged += geoLocator_PositionChanged;

在位置更改事件中，获取 GPS 位置数据以供应用使用。

void  geoLocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
if (null != geoLocator)
try
{
Utility.CurrentPosition = args.Position;
}
catch (Exception)
{
//Nothing to do - no GPS signal or some timeout occured...
Utility.ShowMessage("No GPS signal or some timeout occured...").ShowAsync();
}
}

这里 Utility.CurrentPosition 是静态变量类型 GeoLocator。

请记住设置此位置以处理所有与应用相关的功能。

为了在应用中获取天气预报详细信息，我们创建了一个如下所示的类

public class WeatherInfoCurrent
    {
        public string observation_time { get; set; }
        public string temp_C { get; set; }
        public string temp_F { get; set; }
        public string icon { get; set; }
        public string condition { get; set; }
        public string advice { get; set; }
    }

为了获取任何地点的天气详细信息，需要进行 Web API 调用。这是使用 System.Net.Http 命名空间中的 HttpClient 进行 Web API 调用的语法。

这是调用 API 以及将 API 响应解析为用户定义类的示例

HttpClient http = new System.Net.Http.HttpClient(); 
HttpResponseMessage response = await 
http.GetAsync("YourPrivateApiUrl=" +   
Utility.CurrentPosition.Coordinate.Latitude.ToString() + "," + 
Utility.CurrentPosition.Coordinate.Longitude.ToString() + 
"&format=xml&num_of_days=2"); 
XElement XmlWeather = XElement.Parse(await response.Content.ReadAsStringAsync());
// Parse the XMLto WeatherInfoCurrent class and bind to normal Listbox control
listBoxcntrl.ItemsSource = from weather in XmlWeather.Descendants("current_condition")
select new WeatherInfoCurrent
{
observation_time = weather.Element("observation_time").Value,
temp_C = weather.Element("temp_C").Value,
temp_F = weather.Element("temp_F").Value,
icon = weather.Element("weatherIconUrl").Value,
condition = weather.Element("weatherDesc").Value
};

这是将呈现在用户级别的列表框样式。

<ListBox  Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxc">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="99" >
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image  Grid.Column="0" Height="100" Width="100" Source="{Binding Path=icon}"></Image>
<TextBlock
 Text="{Binding Path=observation_time}" Foreground="Orange"  
Grid.Column="1" Margin="10,10,10,60"></TextBlock>
<TextBlock Grid.Column="1" Margin="10,40,300,30" Text="C: "></TextBlock>
<TextBlock Text="{Binding Path=temp_C}" Grid.Column="1" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Margin="150,40,160,30" Text="F: "></TextBlock>
<TextBlock Text="{Binding Path=temp_F}" Grid.Column="1" Margin="215,40,90,30"></TextBlock>
<TextBlock Text="{Binding Path=condition}" Grid.Column="1" Margin="10,75,10,0"></TextBlock>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

它将帮助你处理我们控件中的 WebRequest 和 Response，以便以非常酷的方式向用户呈现数据。我实现了漂亮的样式来以 Metro 风格呈现它。

这只是一个简单的代码片段，但我希望我能写一篇详细的文章，并在语法、代码和演示方面有很大的改进。这仅仅是为了应用创新大赛。

感谢 Code-project 给了我这样一个绝佳的机会来写一点关于我的应用的文章。我相信每个人都会喜欢我的应用，它将在市场上大受欢迎。

兴趣点 

从 Java 背景转到 Windows 8（桌面和 Metro 风格）编程，我玩得很开心，并在 Google 和论坛的帮助下完成了它。解析 Metro 外观中存在的 XML/JSON 很有趣，但在朋友的超极本上运行我的应用包后，它变得更加酷，我们玩得很开心。但在分屏视图中表现不佳。经过一个小时的研究，我们纠正了这个问题，所以现在我的应用将面临任何视图模式的挑战。

Windows 8 应用太棒了……

历史 

这只是开始。更多内容和更多信息即将到来，请耐心等待并支持我。

你的评论是我的老师，所以请评论这篇文章，并帮助我纠正你在这里发现的任何问题。非常感谢！