UWP入门一 7天酒店客户端源码及说明

　　以前写过一个wp8的工程，说实话那会的代码很麻烦，写起来费劲，另外还没多少人下载，不过到windows 10 开始微软出了UWP架构以后一切都像以前的winform wpf一样好转起来，新建一个工程以后模板很简洁。

现在就开始介绍一下基本控件的使用，为新手写程序提供一个例子。7天酒店没有官方客户端，不过不妨碍拿他做例子。

　　由于以前代码使用到了json.net 为了减少代码修改，所以还是需要引入进来，但去官方网站下载的无法直接使用，说什么不适配，只要打开

然后呢搜索Json  其实我打开默认第二个就是

添加好之后呢

开始布局代码

在MainPage.xaml中写如下代码

<Page

    x:Class="_7inns.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:_7inns"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.Resources>

            <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="ItemContent" />

        </Grid.Resources>

        <Image Source="Assets/2.png" Margin="42,23,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="109" Width="94" />

        <TextBlock Margin="42,193,264,0" TextWrapping="Wrap" Text="城市" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>

        <TextBlock Margin="42,252,264,0" TextWrapping="Wrap" Text="区域" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>

        <Button x:Name="buttonCities" Content="" HorizontalAlignment="Stretch" Margin="104,194,3,0" VerticalAlignment="Top" Click="buttonCities_Click" BorderThickness="1" Height="33"/>

        <SemanticZoom x:Name="semanticZoomCities" Margin="0" ViewChangeCompleted="SemanticZoom_ViewChangeCompleted" Visibility="Collapsed" Canvas.ZIndex="5" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

            <SemanticZoom.ZoomedInView>

                <ListView x:Name="ListCities" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False" ItemClick="ListCities_ItemClick" SelectionChanged="ListCities_SelectionChanged">

                    <ListView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Border Background="#FFECAE0A" Height="60" Width="60">

                                        <TextBlock Text="{Binding Key}" FontSize="50" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"></TextBlock>

                                    </Border>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                        </GroupStyle>

                    </ListView.GroupStyle>

                    <ListView.ItemTemplate>

                        <DataTemplate>

                            <StackPanel>

                                <TextBlock Text="{Binding name}" Height="40" FontSize="30"></TextBlock>

                            </StackPanel>

                        </DataTemplate>

                    </ListView.ItemTemplate>

                </ListView>

            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>

                <GridView x:Name="GridCitiesFirstName" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False" Margin="0,100" HorizontalAlignment="Center" VerticalAlignment="Center">

                    <GridView.ItemTemplate>

                        <DataTemplate>

                            <Border Height="60">

                                <TextBlock Text="{Binding Group.Key}" FontSize="24"></TextBlock>

                            </Border>

                        </DataTemplate>

                    </GridView.ItemTemplate>

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <WrapGrid ItemWidth="60" ItemHeight="60" VerticalChildrenAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" />

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.ItemContainerStyle>

                        <Style TargetType="GridViewItem">

                            <Setter Property="BorderBrush" Value="Gray" />

                            <Setter Property="Background" Value="#FFECAE0A" />

                            <Setter Property="BorderThickness" Value="3" />

                            <Setter Property="HorizontalContentAlignment" Value="Center" />

                            <Setter Property="VerticalContentAlignment" Value="Center" />

                        </Style>

                    </GridView.ItemContainerStyle>

                </GridView>

            </SemanticZoom.ZoomedOutView>

        </SemanticZoom>

        <ComboBox x:Name="comboBoxDistricts" Margin="107,251,0,0" VerticalAlignment="Top" BorderThickness="1" SelectionChanged="comboBoxDistricts_SelectionChanged" Width="251"/>

        <TextBlock Margin="42,368,264,0" TextWrapping="Wrap" Text="关键字" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>

        <TextBlock Margin="42,442,264,0" TextWrapping="Wrap" Text="入住时间" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>

        <Button x:Name="search" Content="搜索" HorizontalAlignment="Right" Margin="0,0,10,49" VerticalAlignment="Bottom" Click="search_Click" FontSize="20" FontWeight="Bold" BorderThickness="1" RenderTransformOrigin="0.925,0.455" Width="129"/>

        <DatePicker x:Name="inRoomDate" Margin="96,454,0,0" VerticalAlignment="Top" DateChanged="inRoomDate_DateChanged" BorderThickness="1" Width="255"/>

        <TextBox x:Name="keyword" Margin="104,358,1,0" TextWrapping="Wrap" VerticalAlignment="Top"/>

    </Grid>

</Page>

恕当时没什么布局概念，基本就是手动布局，罗列控件。布局的事情以后再慢慢写，不过微软的教程或者其他书里面这块讲的很清楚，各种panel grid 布局。

这个里面基本就是一些textblock 跟textbox button 和一个SemanticZoom  SemanticZoom的效果就是联系人菜单那个感觉，这里用来选择城市

先看一下选择前的

点一下字母 就会有

然后可以选个北京

后台呢就会对这个选择的city进行行政区查询

        private async void ListCities_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            Debug.WriteLine("ListCities_SelectionChanged");

            if (e.AddedItems.Count == )

            {

                currentCityItem = (CityItem)e.AddedItems.First();

                Debug.WriteLine(currentCityItem.name);

                buttonCities.Content = currentCityItem.name;

            }

            string di = await FindDistrict(currentCityItem.id);

            int total = di.Length;

            semanticZoomCities.Visibility = Visibility.Collapsed;

            if (total <= )

                return;

            JArray jobjectAllDistricts = JArray.Parse(di);

            comboBoxDistricts.PlaceholderText = "";

            comboBoxDistricts.Items.Clear();

            if (DItem != null)

            {

                DItem.Clear();

                for (int i = ; i < jobjectAllDistricts.Count; i++)

                {

                    DItem.Add(new DistrictItem { id = (string)jobjectAllDistricts[i]["id"], name = (string)jobjectAllDistricts[i]["name"] });

                    //Debug.WriteLine((string)jobjectAllDistricts[i]["name"]);

                    comboBoxDistricts.Items.Add((string)jobjectAllDistricts[i]["name"]);

                }

            }

            Debug.WriteLine("Total bytes returned:  " + total);

        }

FindDistrict这个函数就需要用到http请求了

当时这么写的 可能是win10推荐的代码 不过能用

        private async Task<string> FindDistrict(string id)

        {

            string url = @"http://m.7daysinn.cn/q/city/" + id + @"/districts";

            HttpClientHandler handler = new HttpClientHandler();

            handler.AllowAutoRedirect = false;

            HttpClient httpClient = new HttpClient(handler);

            // Limit the max buffer size for the response so we don't get overwhelmed

            httpClient.MaxResponseContentBufferSize = ;

            string result;

            try

            {

                result = await httpClient.GetStringAsync(url);

                return result;

            }

            catch (Exception)

            {

            }

            return "";

        }

点击搜索按钮
就可以得到这个日子的酒店列表啦

        private async void search_Click(object sender, RoutedEventArgs e)

        {

            try

            {

                string url = @"http://m.7daysinn.cn/q/inns?cityId=" + currentCityItem.id;

                if (currentDistrictItem != null && currentDistrictItem.id != "")

                {

                    url += "&districtId=";

                    url += currentDistrictItem.id;

                }

                if (keyword.Text != "")

                {

                    url += "&keyword=";

                    url += Uri.EscapeUriString(keyword.Text);

                }

                url += "&fromDate=" + inDate.Date.ToString("yy-MM-dd") + "&days=1&getQuota=true";

                HttpClientHandler handler = new HttpClientHandler();

                handler.AllowAutoRedirect = false;

                HttpClient httpClient = new HttpClient(handler);

                // Limit the max buffer size for the response so we don't get overwhelmed

                httpClient.MaxResponseContentBufferSize = ;

                ParameterObject po = new ParameterObject();

                po.result = await httpClient.GetStringAsync(url);

                po.date = inDate;

                Frame.Navigate(typeof(InnStatus), po);

            }

            catch (Exception)

            {

            }

        }

Frame.Navigate(typeof(InnStatus), po);这句呢就是把数据传到第二个页面

第二个页面Innstatus 解析并且展示出来

 protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            innstatus = (ParameterObject)e.Parameter;

            try

            {

                List<InnItem> innItems = new List<InnItem>();

                JObject jobjectAllInns = JObject.Parse(innstatus.result);

                JArray jaRooms = (JArray)jobjectAllInns["content"];

                for (int i = ; i < jaRooms.Count; i++)

                {

                    innItems.Add(new InnItem

                    {

                        innId = (string)jaRooms[i]["innId"],

                        name = (string)jaRooms[i]["name"],

                        firstCharsOfPinyin = (string)jaRooms[i]["firstCharsOfPinyin"],

                        cityId = (string)jaRooms[i]["cityId"],

                        cityName = (string)jaRooms[i]["cityName"],

                        districtId = (string)jaRooms[i]["districtId"],

                        districtName = (string)jaRooms[i]["districtName"],

                        address = (string)jaRooms[i]["address"],

                        score = (string)jaRooms[i]["score"],

                        orderWeight = (string)jaRooms[i]["orderWeight"],

                        thumbnailPath = (string)jaRooms[i]["thumbnailPath"],

                        lowestPrice = (string)jaRooms[i]["lowestPrice"],

                        hasRoom = (string)jaRooms[i]["hasRoom"],

                        hasWifi = (string)jaRooms[i]["hasWifi"],

                        hasPark = (string)jaRooms[i]["hasPark"],

                        canUseCashCoupon = (string)jaRooms[i]["canUseCashCoupon"],

                        brandId = (string)jaRooms[i]["brandId"],

                        //currentActivities = (string)jaRooms[i]["currentActivities"],

                    });

                }

                this.inncollectSource.Source = innItems;

                ContentInnsList.ItemsSource = inncollectSource.View;

            }

            catch (Exception)

            { }

        }

效果如下

第二个页面的xaml代码就这么写的
一个数据模板

<Page

    x:Class="_7inns.InnStatus"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:_7inns"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="LayoutRoot">

        <Grid.ChildrenTransitions>

            <TransitionCollection>

                <EntranceThemeTransition/>

            </TransitionCollection>

        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!-- TitlePanel -->

        <StackPanel Grid.Row="0" Margin="0" Orientation="Horizontal">

            <TextBlock Text="酒店状态" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps" Margin="0,15,0,16.5" RenderTransformOrigin="1.473,0.155" Width="300" TextAlignment="Center"/>

        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->

        <Grid Grid.Row="1" x:Name="ContentRoom">

            <Grid.Resources>

                <CollectionViewSource x:Name="inncollectSource" IsSourceGrouped="False" ItemsPath="" />

            </Grid.Resources>

            <ListView x:Name="ContentInnsList" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" IsItemClickEnabled="True" ItemClick="ContentInnsList_ItemClick">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <StackPanel>

                            <TextBlock Text="{Binding name}" Height="40" FontSize="30"></TextBlock>

                            <TextBlock Text="{Binding address}" Height="30" FontSize="14" Foreground="#FFECAE0A"></TextBlock>

                        </StackPanel>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </Grid>

    </Grid>

</Page>

好啦 要介绍的就这么多

工程我上传上来好了方便新手调试

http://files.cnblogs.com/files/emsoro/7inns.zip