音频/视频的相关播放技术

MeidaElement 控件能同时在这两个平台是播放音频和视频，但是关于MeidaElement，他们之间也存在一些差异，比如说windows phone 8中，你不能向MeidaElement添加任何的音频和视频效果（如插件）。且在DRM的实现上这两者之间也存在差异。如果你在实现MeidaElement播放音频/视频的时候不做任何花哨或者复杂的处理，那么MeidaElement在这两个平台是可以相互兼容的。

MediaEngine（与上述讨论的MeidaElement 有所不同）是windows 8与Windows phone 8中新的特征，但是MediaEngine只能在C++项目中使用，目前它并不支持托管代码。而且在windows phone 8中该MediaEngine功能与windows 8相比略有减少。比如说在windows phone 8种，MediaEngine仅支持帧服务器模式。此外请记住一点，在windows phone 8中，硬件加速会经常被使用到。

WASAPI 与XAudio2都能在这两个平台使用，但是这些技术仅仅能被C++项目所调用，到目前为止它们并不被托管代码所支持。虽然有关于XAudio2的全部功能都能在这两个平台使用，但是需要注意的一点是在windows phone 8平台，XAudio2仅支持未被压缩的PCM音频。如果想要XAudio2能在Windows phone 8中支持已压缩的PCM音频是非常困难的，因此在Windows phone中，仅仅只能使用WASAPI核心音频API的一部分。

背景音频

在windows store app与windows phone 8中播放背景音频的差别是在于windows phone 8中BackgroundAudioPlayer与windows store app中MediaElement与Audio标签的使用方式的不同。 BackgroundAudioPlaye是一个静态的类在使用之前并不需要被实例化，但是MediaElement与Audio标签必须要先定义然后才能使用。

在windows store app你仅仅需要设置MsAudioCategory这个属性等于”backgroundCapableMedia”就可以播放背景音频，但是在windows phone中，您需要建立一个AudioPlayerAgent，然后使它能在后台运行。

最后需要注意的一点是，你经常需要处理用户在锁定屏幕时对这些媒体控件的输入。在windows phone 8平台，我们需要调用这个控件的“Universal Volume Control（UVC）”；在windows
store app中我们仅需要调用这些媒体控件。虽然在这两个平台实现的技术不同但是基本功能是类似的。 

媒体分享

关于媒体分享，Windows store app与windows phone最大的区别在于在Windows store app中是通过share charm来进行分享，而在windows phone 8种您需要在您的代码中调用ShareMediaTask

在上述两种方式中您可能不能确认您的数据有没有被成功的分享，因为本质上分享是一种“被触发和被遗忘”的过程。

还需要记住一点是，当你的共享应用程序占据了整个屏幕时，您的Windows phone 8 app有可能会被挂起甚至会被关闭，所以您应保存该程序的运行状态和数据。

这个时候我们需要使用VS来显示一些设计时数据。

情况一，数据源为本地数据

这种情况是最好的，绑定完成之后debug就可以看到数据显示是否符合需求，稍作修改便可。请参考如何绑定到分层数据并创建主视图/详细信息视图。

情况二，数据源为远程数据

当然你可以使用本地数据作为测试，下面这段代码可以在测试时帮助调用一些本地的测试数据

Fake Date

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)

{   
    GetSampleData();

}

else GetRealData();

同样的，这种方式也仅仅只能在Debug下才能看到数据显示是否正确，如果想在设计时看到数据，那么我们需要其他的一些代码。

情况三，设计时显示测试数据

 
上图所示就是在设计时候显示的数据，而作为对比，下图为运行时数据

我们需要做的就是

Step1， 定义设计时所需要的数据，我这里创建了一个叫DesignTimeDataCenter的类专门用于放置测试数据

Step2，完善绑定，在此声明下，具有 d: 前缀的属性仅在设计时被解释，而在运行时被忽略。所以绑定的属性可以用d:Source 来实现。

Step3，修改排版，让界面看起来更完美。

具体的代码我贴一部分在这里，其他的大家可以在我的SkyDrive上下载，地址为：http://1drv.ms/1cwIj2c

MainPage.XAML文件：

<Page  x:Class="DesignTimeData.MainPage"

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

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

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

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

    DataContext="{Binding RelativeSource={RelativeSource Self}}"

    d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeDataCenter, IsDesignTimeCreatable=True}}"

    mc:Ignorable="d">

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <GridView ItemsSource="{Binding News}">

            <GridView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="500">

                        <Image Height="100" Margin="10" Source="{Binding Image}"/>

                        <TextBlock Margin="10" FontSize="25" Text="{Binding Desc}"/>

                    </StackPanel>

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

    </Grid>

</Page>

MainPage.cs

public sealed partial class MainPage : Page

    {

        public List<RealRecord> News {get; set; }

        public MainPage()

        {

            this.InitializeComponent();

            News = LoadNews();

        }

        List<RealRecord> LoadNews()

        {

            return new List<RealRecord>

                       {

                           new RealRecord {Desc = "Nix Colour Sensor", Image = "../Assets/1.jpg"},

                           new RealRecord {Desc = "Site of the Week: Rake It Up", Image = "../Assets/2.jpg"},

                           new RealRecord {Desc = "First Look: Noah", Image = "../Assets/3.jpg"},

                           new RealRecord {Desc = "New + Noted: Anti:dote", Image = "../Assets/4.jpg"},

                       };

        }

    }

    public class RealRecord

    {

        public string Desc { get; set; }

        public string Image { get; set; }

}

DesignTimeData.cs

    public class DesignTimeDataCenter

    {

        public List<TestRecord> News { get; set; }

        public DesignTimeDataCenter()

        {

            News = LoadNews();

        }

        List<TestRecord> LoadNews()

        {

            return new List<TestRecord>

                       {

                           new TestRecord {Desc = "Scene & Heard: Guess who, don’t boo", Image = "../Assets/0.jpg"},

                           new TestRecord {Desc = "Scene & Heard: Guess who, don’t boo", Image = "../Assets/0.jpg"},

                           new TestRecord {Desc = "Scene & Heard: Guess who, don’t boo", Image = "../Assets/0.jpg"},

                           new TestRecord {Desc = "Scene & Heard: Guess who, don’t boo", Image = "../Assets/0.jpg"},

                       };

        }

    }

    public class TestRecord

    {

        public string Desc { get;set; }

        public string Image {get; set; }

    }

 RenderTargetBitmap 是windows 8.1中一个新的类，它可以将任意的UIElement以bitmap的形式呈现。这篇博客的第一部分将介绍如何在windows 8.1中使用RenderTargetBitmap。第二部分将介绍在windows store app与WPF中RenderTargetBitmap大小调整方式的差异。UIElement以bitmap的形式呈现时，RenderTargetBitmap如何调整原来的UIElement大小对于你的项目来说是一个难题，但幸运的是这篇文章将会提出一个解决方案，使您可以在windows store app中得到与WPF相同的结果。让我们开始这篇博客的介绍吧。

怎么在windows 8.1中使用RenderTargetBitmap

在windows store app，你可以分以下两种情况来使用RenderTargetBitmap

1. 将它当成一个ImageSources使用（用一个image-Element来显示或者通过ImageBrush来显示）
2. 使用它的pixels值（比如说将一个bitmap存储到硬盘或者与其他的app进行分享）

本节只是介绍一些基础的知识，在MSDN的相关文档里面有详尽的描述：

• RenderTargetBitmap-class (这个网站有关于RenderTargetBitmap的详细描述 )
• XAML render to bitmap sample (一个很好的例子，可以学习如何通过ImageSources和pixels来使用RenderTargetBitmap)

接下来我们来看一个简单的例子以及开始学习如何将一个UIElement以bitmap的方式呈现。

UIElement的呈现

在接下来的章节中，我们将通过下面的代码来定义一个Grid并将它作为RenderTargetBitmap的输入.在这个Grid中包含一个image和TextBlock控件。由于这个Grid没有定义任何的行或列，所以TextBlock的内容呈现在图片的上方。

<Grid x:Name="elementToRender" Width="500" Height="500">

            <Image Source="Assets/image.jpg" Stretch="UniformToFill"/>

            <TextBlock Text="This text is on top of the image" FontSize="40" TextWrapping="Wrap" Margin="50"/>

</Grid>

上段代码的结果如下：

需要注意的是在上面代码中，将Grid的名称定义为elementToRender，我们接下来可以在C#代码中通过该名称来访问Grid。现在我们来看看如何使用该Grid来定义一个RenderTargetBitmap。

用UIElement来定义一个RenderTargetBitmap

你可以通过调用RenderAsync这个方法来定义一个RenderTargetBitmap，该方法的输入参数是一个UIElement，下面的代码是通过将名为elementToRender的Grid来作为该方法的输入参数从而来定义一个RenderTargetBitmap对象：

var bitmap = new RenderTargetBitmap();

 await bitmap.RenderAsync(elementToRender);

通过上述两行代码你可以将UIElement以RenderTargetBitmap的方式呈现。现在你可以像前面章节提到的那样可以通过Imagesource的方法使用RenderTargetBitmap或者可以对其Pixel属性进行访问。

以Imagesource的方式来使用RenderTargetBitmap

由于RenderTargetBitmap类继承自ImageSource，所以您可以直接将其赋值到您定义的任何一个Image-Element的Source-Property上。假设你已经定义了这样一个Image-Element：

<Image x:Name="image" Width="200" Height="200".../>

现在你可以直接将该Image-Element的Source-Property赋值为一个RenderTargetBitmap对象，可以参考以下代码：

private async void ButtonRender_Click(object sender, RoutedEventArgs e)

{

  var bitmap = new RenderTargetBitmap();

  await bitmap.RenderAsync(elementToRender);

  image.Source = bitmap;

}

使用RenderTargetBitmap的Pixels值：

如果你想访问RenderTargetBitmap的Pixels数据，你需要在用RenderAsync这个方法将UIElement定义为RenderTargetBitmap后，再调用RenderTargetBitmap的GetPixelsAsync方法来获得其Pixels数据。该方法返回的是一个IBuffer类型，里面存储的是二进制的位图数。这个IBuffer可以转换为一个Byte数组，数组里面的数据是以BGRA8格式存储的。

以下代码示例如何从一个RenderTargetBitmap对象中获得以byte数组类型存储的像素数。需要特别注意的是IBuffer实例调用的ToArray方法是一个扩展方法，你需要在您的项目中加入System.Runtime.InteropServices.WindowsRuntime这个命名空间。

var bitmap = new RenderTargetBitmap();

await bitmap.RenderAsync(elementToRender);

  // Get the pixels

  IBuffer pixelBuffer = await bitmap.GetPixelsAsync();

  byte[] pixels = pixelBuffer.ToArray();

通过获取的Pixels数据，你可以将您的 RenderTargetBitmap里的内容保存到硬盘，你也可以通过Pixels数据来创建一个WriteableBitmap对象，然后对该对象的内容做某些修改，或者您可以通过share-contract来将该bitmap对象分享给其他的app。下面的代码示例如何通过share-contract来分享bitmap对象。其中在DataRequested事件处理程序中先是获得Pixels数据，然后将其转化为InMemoryRandomAccessStream来向其他的app进行数据分享：

  public sealed partial class MainPage : Page

     {

    ...

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

        base.OnNavigatedTo(e);

        DataTransferManager.GetForCurrentView().DataRequested+= MainPage_DataRequested;

    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)

    {

        base.OnNavigatedFrom(e);

        DataTransferManager.GetForCurrentView().DataRequested -= MainPage_DataRequested;

    }

    private async void MainPage_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)

    {

        var deferral = args.Request.GetDeferral();

        var bitmap = new RenderTargetBitmap();

        await bitmap.RenderAsync(elementToRender);

        // 1. Get the pixels

        IBuffer pixelBuffer = await bitmap.GetPixelsAsync();

        byte[] pixels = pixelBuffer.ToArray();

        // 2. Write the pixels to aInMemoryRandomAccessStream

        var stream = new InMemoryRandomAccessStream();

        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);

        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, (uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight, 96, 96,

            pixels);

        await encoder.FlushAsync();

        stream.Seek(0);

        // 3. Share it

        args.Request.Data.SetBitmap(RandomAccessStreamReference.CreateFromStream(stream));

        args.Request.Data.Properties.Description = "RenderTargetBitmap-Sample";

        args.Request.Data.Properties.Title = "Wow, here the shared Bitmap :-)";

        deferral.Complete();

    }

   ...

}

需要注意的一点是，调用GetPixelsAsync这个方法需要额外的开销，因为pixels数据是从显存里获取的。如果你仅仅是调用RenderAsync这个方法，并将RenderTargetBitmap赋值为ImageSource，那么pixels数据还是在显存中且并没有从显存中获得。

RenderTargetBitmap的局限：

如前所述，通过使用 RenderTargetBitmap，你可以将任意的UIElement以bitmap的形式呈现，但并不完全是这样，它还有一些限制。比如说RenderTargetBitmap 不能捕获MediaElement所显示的视频内容, 并且有些存在于可视化树中但不在屏幕内的UIElment你也无法捕获。你可以在MSDN的文档中看到详细的关于RenderTargetBitmap局限性的描述：http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.imaging.rendertargetbitmap.aspx

大小调整的问题以及解决方案：

假如你是WPF的开发者，当你在windows store app中使用RenderTargetBitmap 时，将会发现一些意想不到的问题。本部分会首先提出这些问题然后再提出相应的解决方案。

问题描述

当一个Elememt包含跨越其边界的子元素时，在windows store app中，当该Element转化为RenderTargetBitmap显示时，该RenderTargetBitmap对象的大小会比原来的Element要大。而在WPF中，该RenderTargetBitmap对象大小不会变，但是子元素会被剪裁。下面的示例说明了这个问题。

该例子显示的是一个Grid Element, 通过对子元素transformed属性的定义可以使子元素跨越Grid的边界：

<Grid x:Name="elementToRender" Height="100" Width="500" Background="Red">

            <Rectangle Fill="Yellow" Width="100" Height="100">

                <Rectangle.RenderTransform>

                    <TranslateTransform Y="50"/>

                </Rectangle.RenderTransform>

                </Rectangle>

 </Grid>

输出结果如下，你可以看到黄色的矩形框超出了Grid的边界：

在windows store app中，当我们将Grid以RenderTargetBitmap的形式呈现时，该RenderTargetBitmap对象的大小是500×150，而原始的Grid大小是500×100，下图显示的是该RenderTargetBitmap的大小，其中灰色部分是超出原始Grid的范围，即使我们在转换的时候强制设置RenderTargetBitmap的大小为500×100，其结果还是不变，如下所示：

在WPF中,该RenderTargetBitmap的大小为500×100，与Grid大小一致，但是Grid里面的子元素被剪裁了，其结果如下：

对使用Clip-property这个解决办法的探索

为了在windows store app得到WPF一样的结果，我的第一想法是使用Clip-property来剪裁原来的Grid，代码如下：

<Grid x:Name="elementToRender" Height="100" Width="500" Background="Red">

            <Grid.Clip>

                <RectangleGeometry Rect="0 0 500 100"/>

            </Grid.Clip>

            <Rectangle Fill="Yellow" Width="100" Height="100">

                <Rectangle.RenderTransform>

                    <TranslateTransform Y="50"/>

                </Rectangle.RenderTransform>

            </Rectangle>

</Grid>

这段代码得到的结果如下，黄色的子元素部分被剪裁，这与我想要显示的RenderTargetBitmap对象的样式是一致的：

但是你将上面剪裁过后的Grid以RenderTargetBitmap对象显示的时候，结果并不是我们所期盼的500 x 100的大小，它的大小仍然是500 x 150。其结果如下图所示，其中超出Grid的大小部分被标记为灰色：

这意味着RenderTargetBitmap所显示的大小是原总的UI元素所占空间的大小（这其中包括黄色的矩形框超出Grid边界的大小），所以不管我们有没有对原来的Grid有没有进行剪裁，RenderTargetBitmap的大小总是500 x 150而不是我们所期盼的500 x 100。

最终有效的解决方案

综上所讨论的，使用Clip-property并不是一个有效的解决方案。这个RenderTargetBitmap的大小仍然超过原来Grid的大小。但是使用Clip-property是最终有效解决方案的第一步。第二步时你需要定义一个新的Grid Element，该Grid在可视化树中，且该Grid的子元素包含第一步剪裁后的Grid。你只需要将该Grid以RenderTargetBitmap的形式呈现就会得到我们想要的结果。

在前一部分，我们已经得到了剪裁后的Grid：

<Grid x:Name="elementToRender" Height="100" Width="500" Background="Red">

            <Grid.Clip>

                <RectangleGeometry Rect="0 0 500 100"/>

            </Grid.Clip>

            <Rectangle Fill="Yellow" Width="100" Height="100">

                <Rectangle.RenderTransform>

                    <TranslateTransform Y="50"/>

                </Rectangle.RenderTransform>

            </Rectangle>

</Grid>

第二步我们在可视化树种加入一个新的Grid元素，该Grid子元素包含上述剪裁后的Grid，代码如下：

<Grid x:Name="elementToRender" Height="100" Width="500">

            <Grid x:Name="oldElementToRender" Height="100" Width="500" Background="Red">

                <Grid.Clip>

                    <RectangleGeometry Rect="0 0 500 100"/>

                </Grid.Clip>

                <Rectangle Fill="Yellow" Width="100" Height="100">

                    <Rectangle.RenderTransform>

                        <TranslateTransform Y="50"/>

                    </Rectangle.RenderTransform>

                </Rectangle>

            </Grid>

  </Grid>

如果你将新加入的Grid以RenderTargetBitmap的形式呈现，你会发现该RenderTargetBitmap大小是我们所期盼的500x100，而不再是500x150.这样我们就会得到与WPF相同的结果。该RenderTargetBitmap最后的结果如下：

最后希望该博客能对大家在使用RenderTargetBitmap时有更多的帮助，同时希望大家能更多的用到windows 8.1里面新的内容。

Now, let us see more useful new features in this blog.

 The Hub Control

Hub control is a new feature introduced in windows 8.1 and can display different categories of content,

each of which maps to the section pages in your app. In windows 8.1,

Hub control provides elements to help you more easily implement  the hub design,

which reflects the proper design guidelines and behaviors pattern of your app.

Mission：display data from different sources

For example, in our app, customers want to display different data sources to a page like News
app, one section of page displays sports news and another section displays
music news. In the past, we may add two or more GridView or ListView controls
in a page and set different data sources to different controls. For now, using
each hub section, we can use only one hub control to display data from
different sources. And any XAML content can be used to create a visually rich hub page.

Mission: provide each group with different DataTemplates

If you try to make a hub page by ListView or GridView, you should group the
GridView and make different groups have different DataTemplates. In the past, we
used DataTemplateSelector to achieve this. You should make a ViewModel to get
either some data, or class subtype that differentiates one group from another. And
you should create your own custom DataTemplateSelector that can make the
determination for each group of what type it is.

Below is what we have done: 

public sealed class ItemGroupTemplateSelector : DataTemplateSelector

{

            public DataTemplate InventoryItemTemplate { get; set; }

            public DataTemplate RoomItemTemplate { get; set; }           

            protected override DataTemplate SelectTemplateCore( object item, DependencyObject container )

            {

                        if( item != null )

                        {

                                    if( item is ViewModelRoomItem )

                                    {

                                                return this.RoomItemTemplate;

                                    }

                                    else if( item is ViewModelInventoryItem )

                                    {

                                                return this.InventoryItemTemplate;

                                    }

                        } 

                        return null; 

            }

}

Make a Hub Page:

As we have discussed above, making a hub page is so complicated and time-consuming
in windows 8. Now with New hub control in windows 8.1, we can easily achieve
it. We only need to create some hub sections in hub control and define each hub
sections with different DataTemplate.

Hub section:

Basically, the Hub control is a collection of HubSections. You do not add content directly
to a hub section; instead, you define the content of your HubSection in a
DataTemplate object. Content can either be defined inline or be bound to a data
source. Any valid XAML can be used in a hub section. And Each HubSection has two important properties:

                ●Header: used to get or set the section header

                ●ContentTemplate:  used to get or set the section content

What we’ve done:

What we’ve done is only to make different hub section in hub control with different DataTemplates:

XAML：

<Hub Header="Hub control" x:Name="Hubsample">

            <HubSection  Width="700">

                <HubSection.Background>

                    <ImageBrush ImageSource="Assets/windows 8.1.png" Stretch="UniformToFill" />

                </HubSection.Background>

            </HubSection> 

            <HubSection Header="News" Width="400" >

               
             <HubSection.ContentTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding Text}"  TextWrapping="Wrap" />          

                    </DataTemplate>

               
            </HubSection.ContentTemplate>

            </HubSection>

           <HubSection x:Name="ImagesSection" Header="Images" IsHeaderInteractive="True" MinWidth="620">

               
           <HubSection.ContentTemplate>

                    <DataTemplate>

                        <GridView ItemsSource="{Binding }">

                           <GridView.ItemTemplate>

                               
                              <DataTemplate>

                                <Image Source="{Binding Image}"/>

                               
                              </DataTemplate>

                           
                          </GridView.ItemTemplate>

                         <GridView.ItemsPanel>

                               
                            <ItemsPanelTemplate>

                                   
                                <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="200" ItemWidth="200" MaximumRowsOrColumns="3">

                                </VariableSizedWrapGrid>

                               
                            </ItemsPanelTemplate>

                           
                        </GridView.ItemsPanel>

                        </GridView>

                   </DataTemplate>

               
               </HubSection.ContentTemplate>

            </HubSection>

</Hub> 

Result：

Navigate by headers

If you want to make customers navigate to a specific page of your app when they click
the header in each HubSection. You can implement this by set
IsHeaderInteractive HubSection property to true and hander SectionHeaderClick
event in hub control: 

<Hub Header="Hub control" x:Name="Hubsample" SectionHeaderClick="Hubsample_SectionHeaderClick">

            <HubSection  Width="700" Name="MainSection" IsHeaderInteractive="True">

                <HubSection.Background>

                    <ImageBrush ImageSource="Assets/windows 8.1.png" Stretch="UniformToFill" />

                </HubSection.Background>

            </HubSection>

            <HubSection Header="News" Width="400" IsHeaderInteractive="True" Name="NewsSection"> 

              <HubSection.ContentTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding Text}"  TextWrapping="Wrap" />             

                    </DataTemplate>

                </HubSection.ContentTemplate>

            </HubSection>

…….

</Hub>

  private void Hubsample_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)

        {

            switch(e.Section.Name)

            {

                case "NewsSection":

                    this.Frame.Navigate(NewsPage);                  

                  break;

                case "MainSection":                 
                  this.Frame.Navigate(InforPage);

                  break;

                   .......

             }

        }

Flyout & MenuFlyout

Flyout and MenuFlyout are new controls which introduced in windows 8.1. A Flyout
displays lightweight UI that either is informational or requires user
interaction. You can use it to collect input from the user, show more details
about an item, or ask the user to confirm an action. And a Flyout should show
only in response to a tap or a click, as well as always dismiss when you taps
outside it. Like Flyout, MenuFlyout let the user choose from a contextual list
of simple commands or options. 

Creat a Flyout & MenuFlyout

In windows 8, the flyout and Menuflyout are actually accomplished with the popup
control. Unlike the flyout in JavaScript, the XAML popup must be manually
implemented for placement, dismissal, animations, etc. So making a flyout in
windows 8 is not very easy.

What we’ve done

As new feathers in windows 8.1, we can easily implement flyout or menuflyout,what
we’ve done as below:

Flyout:

In windows 8.1, Button control has a new Flyout property that can simplify
attaching and opening a Flyout control. For another control, you can also
attach a Flyout control to it by using the FlyoutBase.AttachedFlyout attached property.

In XAML page we can code like below: 

<Button Content="Empty cart">

    <Button.Flyout>

        <Flyout>

            <StackPanel>

                <TextBlock Style="{StaticResource BasicTextStyle}">

                     All items will be removed. Do you want to continue?

               </TextBlock>

                <Button Click="DeleteConfirmation_Click">Yes, empty my cart</Button>

            </StackPanel>

        </Flyout>

    </Button.Flyout>

</Button> 

In code-behind, we also can easily add a Flyout to a control. You can use some

code below to add a flyout to TextBlock control: 

           TextBlock textOption = new TextBlock();

            textOption.Margin = new Thickness(266, 306, 0, 0);

            textOption.Text = "My option";

            Flyout Myflyout=new Flyout();

            TextBlock MytextBlock=new TextBlock();

            MytextBlock.Text="You can edit this text by tapping it.";

            Myflyout.Content=MytextBlock;

           
            textOption.SetValue(FlyoutBase.AttachedFlyoutProperty, Myflyout);

            grid.Children.Add(textOption);

           
           textOption.SetValue(Grid.ColumnProperty, 2);

To open this Flyout, handle the Tapped event and call the FlyoutBase.ShowAttachedFlyout method 

       private void textOption_Tapped(object sender, TappedRoutedEventArgs e)

        {

            FrameworkElement element = sender as FrameworkElement;

            if (element != null)

            {               
                 FlyoutBase.ShowAttachedFlyout(element);

            }

        }

MeunFlyout:

Similar to Menuflyout, you can define the contents of the menu by adding MenuFlyoutItem, ToggleMenuFlyoutItem, and MenuFlyoutSeparator
objects to the MenuFlyout.These objects are for:

              ●MenuFlyoutItem—Performing an immediate action.

              ●ToggleMenuFlyoutItem—Switching an option on or off.

              ●MenuFlyoutSeparator—Visually separating menu items.

What we’ve done like below: 

<Button Content="Options">

    <Button.Flyout>

        <MenuFlyout>

            <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>

            <MenuFlyoutSeparator/>

            <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled,
Mode=TwoWay}"/>

            <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled,
Mode=TwoWay}"/>

        </MenuFlyout>

    </Button.Flyout>

</Button> 

For ToggleMenuFlyoutItem, if you wondering to update the icon when it was checked.
You can right click the ToggleMenuFlyoutItem, and select “Edit Template”, “Edit
a Copy”, then you will see a dialog asking for create style resource, click“OK”.

Try to find the following code within the Style: 

<Path x:Name="CheckGlyph" Data="F1 M 0,58 L 2,56 L 6,60 L 13,51 L
15,53 L 6,64 z" Fill="{TemplateBinding Foreground}"
FlowDirection="LeftToRight" Height="14"
Margin="0,0,10,0" Opacity="0" Stretch="Fill" Width="16"/> 

Replace it with following code: 

<Ellipse x:Name="CheckGlyph" Fill="{TemplateBinding Foreground}"
FlowDirection="LeftToRight" Height="14"
Margin="0,0,10,0" Opacity="0" Stretch="Fill" Width="16"/> 

When you select a ToggleMenuFlyoutItem,the check icon like below:

误区：Background Task不是很有用，因为微软对他做了很多的限制。

很多刚接触商店应用的开发者都会有类似的想法，但其实是因为在编写桌面应用程序的时候可以把程序运行在后台并且带少量甚至不带限制。当台式机插入电源的时候这种方式的编程是非常理想的，但并不适用于移动设备或者外置设备。Windows 8 以及8.1都是为了移动设备而定制的，运行在移动设备中的商店应用程序需要关注电池的使用量以及用户的选择，在这样的前提之下，很多的Background
Task API都做了限制。但是微软对此相当关注，并且有很多关于Background Task方案的内部讨论，这样做的目的是为了满足开发者最基本的移动编程的需求。移动设备未来将会对Background Task进行扩展，敬请期待。

误区：我有一个运行时间足够长的代码，如果我的应用是处于挂起状态并且我想运行完这段代码，我可以把这段代码放在后台执行，它会自动执行完成。

这个取决于你的代码运行多长时间，请时刻记住为了节约电池，我们对后台线程做了限制，包括可以运行多少后台任务，每个后台任务运行多久，多少时间触发一次。举个例子在Background Task中你是不可能花3个多小时去下载一个高清版的指环王，但是你可以使用Background Downloader来实现。请记住，Background Task仅仅为小数据量的下载更新而被使用，比如说更新磁贴，更新锁屏图标等，他们并非为下载大量数据而设计的。一般来说，你可以间隔的让你的Background Task触发，执行代码，显示必要的数据，然后继续休息。

误区：当应用处于不活跃状态时，你可以用一个标准的Background Task来播放音频视频。

播放背景音乐可以通过使用MediaElement的背景音乐属性或者可以使用<audio/video>的标签。如果想让你的商店应用正常播放背景音乐你需要实现 SystemMediaTransportControls这个类，这个类是替换MediaControl的存在。他们俩做同样的事，都允许用户在锁屏的时候通过硬件按钮或者在锁屏上的控制条来控制音乐的播放。

误区：当我有权限在锁屏时运行带有计时功能的Background Task的时候我可以无限时运行。

答案可以说正确也可以说错误。当你的程序被用户赋予在锁屏运行的权利时，你的应用可以正常运行。但如果用户把你的应用从锁屏中删除的话，你的Background Task将不会在锁屏状态下运行。这样的设计是为了最大化保证电池的续航时间。

误区：如果我的Background Task仅仅耗时1秒，我就不需要注册一个取消的处理事件

我们必须为Background Task取消做好准备，即使它仅仅耗时1秒乃至更少，Background Task可能因为多种原因而被取消。当你拥有一个长时间运行的Background Task但是你忽略了取消，可能会因此导致数据丢失或者程序错误。为此我们应该在Task运行的时候检查取消请求以确保程序正常运行。我们建议在Background Task代码中多设定检查取消的判定以保证取消事件得以及时传递。虽然这个看起来很麻烦，但的确是一个良好的代码习惯。

误区：不要把后台任务和异步操作混淆使用

不当心的话还是很容易把他俩混淆的。假设有这么一种情况，在后台任务中使用了异步操作，但后台任务还没来得及申请挂起之前的短暂停就因为系统锁定而挂起，这样很容易造成异步无法执行完成，导致内存泄漏。

误区：我需要使用WNS来推送所有的消息，我不可以创建我自己的推送服务。

这个理解是错误的，我们为此添加了很多网络Trigger API来确保用户可以使用自己的推送服务，但是为了使这些api能正常工作，我们需要维护一个后台的数据连接传输的功能。WNS本身就有很多优点比如说节省开支，节约代码，并且是独立于语言。一般WNS被诟病的问题就在于推送不及时。当我们在鼓励用户使用WNS的时候，也同时鼓励为了确保推送质量的开发者使用网络检测的api，谨记当使用自己的网络监测api的时候也需要为锁屏注册相应事件。

相应的链接可供参考

Supporting your app with background tasks (Windows Store apps using JavaScript and HTML

Being productive in the background – background tasks

Guidelines for background tasks (Windows Store apps)

Quickstart: Create and register a background task (Windows Store apps using C#/VB/C++ and XAML)

How to debug a background task (Windows Store apps)

Before developing an app, you should know which tools can be used
to help with design and layout. As Windows 8.1 released on Oct.18^th,
some new features are introduced accordingly. Within this article, we will
share our experience on using these new controls and try to “hack” these
controls from layout and design.

DatePicker allows a user to pick a date value. The
DatePicker control use three Combobox controls which are month, day and year
picker. In our app, we used it as the “start date” and the “end date” of the
financial product. We also use the TimePicker while setting an alert. Both of
them are easy to use and both are new incoming for win8.1, otherwise to drag
and drop several Combobox controls are not easy.

 
  Cultural Settings

Our app is serving for different country products and used
by different culture customers, to adjust the DataPicker style to fit the local
culture is quite necessary. By the help of Windows.Globalization namespace, we
can set CalenderIdentifier to meet the varieties of the culture.

For instance our client is a Japanese user, we’d like to set
the CalenderIdentifier as “JapansesCalender” which has a different layout:
Year-Month-Date, unlike the default “GregorianCalendar” Month-Date-Year format,
Japanese clients must have a feeling: a local app is better than an
international app.

In TimePicker we could set ClockIdentifier as “12hour” and
“24hour”, 24 hour clock is often used in documentation of care as it prevent
the ambiguity of the time, and used as the Military time or Astronomical time
in US and Canada, we can say if the client lives in US or Canada, we use 12
hour clock otherwise 24 hour clock is used.

“Header” is a new feature introduced in Win8.1 and can be
used as a short description text (label) of a control, in win8 we have to add
the TextBlock before the input control to tell our user: Hey, Do something here! But now, our hero “Header” helps us save
our time and shorten our code.

Mission: Add a Header

For instance, in our app, our customer has been asked to type
in their profile name, we simply drag a TextBox into the page and set the
header text “What’s the profile name?”

The XAML code is quite simple:

<TextBox Header="What's the profile name?"/>

But you may say: Well, it’s good, but I want to customize
the text, for instance the header should be a highlighted color instead of
white and the font size should be bigger, is it possible? We notice the same
issue while developing, the original style cannot fit our requirement, and we
shall customize it. Let’s do it step by step.

Mission: Style a Header

Do you remember how to style a control in Win8 app? Yes,
it’s a same action, right click the control, and select “Edit Template”, “Edit
a Copy”, then you will see a dialog asking for create style resource, click
“OK”.

Try to find the following code within the Style:

<ContentPresenter
x:Name="HeaderContentPresenter" Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding
Header}" Foreground="{ThemeResource
TextBoxForegroundHeaderThemeBrush}" FontWeight="Semilight"
Margin="0,4,0,4" Grid.Row="0"/>

This is the container of the header text, change the
foreground color or modify the font size, you could do whatever you want to
style the ContentPresenter, furthermore, VisualState can also help to style the
header, for instance when the mouse hover the control, change the font size by
adding an DoubleAnimation to the VisualState “PointOver” section.

To customize the header style is a piece of cake. 

Header Template

We can use a HeaderTemplate if we need more than a simple
text header. A HeaderTemplate can host any valid XAML, including elements that
can be hit-tested (The default Header does not accept focus and can’t be
hit-test), such as a Button, the XAML code as below:

<TextBox.HeaderTemplate>

   <DataTemplate>

        <Button Content="Click Me"
Click="Button_Click"/>

   </DataTemplate>

</TextBox.HeaderTemplate>

Header for Control

Well, we can apply the header to some controls, they are:
ComboBox, Slider, DatePicker, TimePicker, TextBox, PasswordBox and RichEditBox.
Even the HubSection control do have the header but it is not only a text label
but also a user interaction element, we will talk it later in Hub Control
section. 

What we’ve done

In our App, customize the header is also necessary for a
space saving purpose, we will put the header label on the left instead of on
the top.

What we’ve done is to modify the Style of TextBox as below
(some detail setting XAML are omitted):

<Grid.ColumnDefinitions>

    <ColumnDefinition
Width="auto"/>

    <ColumnDefinition
Width="*"/>

</Grid.ColumnDefinitions>

<ContentPresenter
x:Name="HeaderContentPresenter" />

<Grid
Grid.Column="1">

    <Border
x:Name="BackgroundElement" />

    <Border x:Name="BorderElement"
/>

    <ScrollViewer
x:Name="ContentElement" />

    <ContentControl
x:Name="PlaceholderTextContentPresenter" />

    <Button x:Name="DeleteButton"
/>

    <ScrollViewer />

</Grid>

Unlike Header, Placeholder seems to be a notification to a
user, for instance in our app, PasswordBox is used, the grey text in the
PasswordBox is a hint for the user to pay attention, while typing something,
then placeholder text will disappear.

Mission: Add & Style the PlaceholderText

To use the PlaceholderText the following XAML code is used:

<PasswordBox Header="PasswordBox"
PlaceholderText="Password should be longer than 8 character "/>

To Style the PlaceholderText, it is quite same as styling
the header, the only difference is header container is <ContentPresenter x:Name="HeaderContentPresenter" ...
/> while PlaceholderText container is <ContentControl x:Name="PlaceholderTextContentPresenter"
.../>. 

Placeholder for Control

Currently only text based control has this new feature, they
are ComboBox, PasswordBox, RichEditBox, SearchBox, TextBox. On Combobox,
PlaceholderText can be treated as SelectedIndex = -1 or SelectionItem = null,
the text-based control will display the PlaceholderText while its content is
empty. 

More Controls will be introduced in the next article such as
the usage of hub control.

On the other hand, how to create a common component used for both Desktop App and Windows Store App is also a headache. . NET is okay, but C++ calls for creating two different versions of the component.

This post will introduce a method about how to use Free-COM dll in Windows Store App. By this way, we can make the migrating components in the form of COM, which can directly be used in Windows Store App. Meanwhile, it succeeds in solving the problem of sharing DLLs between Desktop App and Windows Store App. However, this method is not available for .NET Windows Store app, because the NET project does not support the import of COM components.

The first part describes how to create an ATL COM Server, if you are experienced in it, you can skip it. Or directly download a COM component sample from In-process C++ COM server (CppDllCOMServer).

First of all, run Visual Studio as an administrator. The COM by default is required to be registered at compile time. In the menu of New Project, please select ATL project template (this template is only supported by Visual Studio professional or higher version) under Visual C++ .

We name the solution CppDllCOMServer. Then in the popup wizard, please select Dynamic-Link Library (DLL), which only supports process within the COM not for process without the COM or remote COM component in Windows Store. Click Finish.
We can see Visual Studio has automatically generated two projects, CppDllComServer and CppDllComServerPS. Right-click CppDllComServer project -> Add -> class. In the pop-up list, select ATL under Visual C++, select ATL Simple Object. Click Add.
in the ATL Simple Object wizard, we only need to enter SimpleObject for Short Name, Visual Studio will automatically help to fill in for others, as shown in Figure
 
Click Next, here we do not choose, and then the next step, we can use the default, here must select Apartment for Thread model
 
Click Finish
Visual Studio will automatically create the required code inside the COM class.
Then we go to class view, we add a method to this class.
Right-click ISimpleObject -> Add -> method
 
In the next wizard, we add a HelloWorld method,
 
We choose retval for the parameter’s property, this property is different from out, with it we not only get the result from pointer passed into the function, but also can result from the function's return, while out only change the result by modifying the pointer passed to result. Click Add, and then click Finish.

Visual Studio will automatically generate codes, we only need to modify HelloWorld function in SimpleObject.cpp file.
We add the following code
STDMETHODIMP CSimpleObject::HelloWorld(BSTR* pRet)

{

       // Allocate memory for the string.

    *pRet = ::SysAllocString(L"HelloWorld");

    if (pRet == NULL)

    {

        return E_OUTOFMEMORY;

    }

       return S_OK;

}

The result outputs HelloWorld

Then compile the project.

The second part, we need to generate manifest file which applies to the COM dll.
In the last section, we have successfully compiled a COM dll component, or compiled directly from the download sample. We also need to confirm a few file locations. CppDllCOMServer.dll, which is generated by the COM, the default output file of the project, it should be in solution file folder \ Debug \
CppDllCOMServer.tlb, which we need to generate manifest, by default it should be in solution folder \ CppDllCOMServer \ Debug.

After confirming these two files, we can use Developer Command Prompt command line to generate the manifest file.
Position to the project output folder, enter the following command

C:\Lab\CppDllCOMServer\C++\Debug>mt.exe -tlb:CppDllCOMServer.tlb -dll:CppDllCOMServer.dll -identity:"CppCOMServerDLL, version=1.0.0.0, processorArchitecture=x86" -out:Application.manifest

For -Tlb: CppDllCOMServer.tlb parameter, it requires tlb file’s specific location, we can copy the file to the folder in the same level of CppDllCOMServer.dll, or use
..\ CppDllCOMServer\Debug\CppDllCOMServer.tlb to specific location. If the tlb file in wrong position, it will popup error: Unable to process the .tlb file.

-Out parameter is to set the file name.
In this way, Manifest file named Application.manifest has been generated in the preset folder.

If you do not like the way of command line, we can also set the project configuration to generate the manifest .

Right-click CppDllComServer->Properties->Linker->Manifest File ->Enable User Account Control(UAC) -> No(/MANIFESTUAC:NO) disabling UAC aims to remove the UAC information inside manifest.

Manifest Tool-> General -> Assembly Identity fill in
” CppCOMServerDLL, version=1.0.0.0, processorArchitecture=x86”

Manifest Tool-> Input and Output ->Embed Manifest -> No

Manifest Tool-> Input and Output -> Output Manifest File -> fill in the name of Manifest, for example,Application.Manifest
Manifest Tool-> Isolated COM -> Type Library File -> fill in TLB file path, for example
To $ (ProjectDir) \ Debug \ CppDllCOMServer.tlb,
Manifest Tool-> Isolated COM -> Component File Name-> fill in the name of DLL CppDllCOMServer.dll

We can check the Manifest Tool-> Command Line, in which the command basically consistent with last method’s
Then compile.

The File generated from two ways above cannot use directly, we have to make a bit modify for it.

Find Application.manifest file in the project's folder. Use Notepad to open, the content are same whichever way you generate it.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">

  <assemblyIdentity name="CppCOMServerDLL" version="1.0.0.0" processorArchitecture="x86"></assemblyIdentity>

  <file name="CppDllCOMServer.dll" hashalg="SHA1">

    <comClass clsid="{09C969C2-969F-4029-A630-BF81E5177893}" tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}"></comClass>

    <typelib tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}" version="1.0" helpdir="" flags="HASDISKIMAGE"></typelib>

  </file>

  <comInterfaceExternalProxyStub name="ISimpleObject" iid="{810356FC-23AA-4DAD-8A4C-CDF0CB768AE6}" tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}" proxyStubClsid32="{00020424-0000-0000-C000-000000000046}"></comInterfaceExternalProxyStub>

</assembly>

Here is a critical step, we need to add ThreadingModel = "Apartment" attribute inside comclass node. The last code looks like:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">

  <assemblyIdentity name="CppCOMServerDLL" version="1.0.0.0" processorArchitecture="x86"></assemblyIdentity>

  <file name="CppDllCOMServer.dll" hashalg="SHA1">

    <comClass threadingModel="Apartment" clsid="{09C969C2-969F-4029-A630-BF81E5177893}" tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}"></comClass>

    <typelib tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}" version="1.0" helpdir="" flags="HASDISKIMAGE"></typelib>

  </file>

  <comInterfaceExternalProxyStub name="ISimpleObject" iid="{810356FC-23AA-4DAD-8A4C-CDF0CB768AE6}" tlbid="{EE9C4909-407C-48DC-B58A-09B68B4A79BC}" proxyStubClsid32="{00020424-0000-0000-C000-000000000046}"></comInterfaceExternalProxyStub>

</assembly>

The third part, we reference this COM component into our Windows Store App.
First, create a C++ project (Blank App template) of Windows Store App, and then drag a TextBlock named tb1 into the MainPage.

Open containing folder of the App project. Copy the following files from ATL project and then paste into the project folder
CppDllCOMServer.dll
Application.manifest
CppDllCOMServer_i.h (CppDllCOMServer_h.h If you directly use CppDllCOMServer sample, please add this header file)
SimpleObject.h

Clicking on Show All Files button in project view, we can see red icon in front of the coped files, which means they have not been compiled in this project.
 

We need to deploy CppDllCOMServer.dll and Application.manifest together to the installation directory of the project.
Right-click CppDllCOMServer.dll-> added to the project
Right-click again CppDllCOMServer.dll -> Properties
 
select the Content property to True, select File Type property to Document.
Application.manifest file requires the same operation. Please note that the default value of Application.manifest’s File Type property is not Document, if it were not be changed, it would participated in Visual Studio compiler and caused saying Application configuration error.

Next, we are going to call Free-COM's method in ManiPage.xaml.cpp, first of all, to reference the header file
#include "SimpleObject.h"

For this header file, we have to modify several points to note,
1 cannot exist ATL’s method or namespace.
2 all inside methods must be public, other protected or private member variables and functions can delete.
(This header file cannot use the macro and class ATL provided, user need to manually implement interface methods, for details please see next example code)
The main purpose of adding this header file is to explain the source of the classes and interfaces in Free-COM in compile time.

The class implements in the sample either downloaded or built with ATL can change to the following code, which removes the ATL template, and private or protected functions and members.
class SimpleObject : public ISimpleObject

{

public:

    // IUnknown

    IFACEMETHODIMP QueryInterface(REFIID riid, void **ppv);

    IFACEMETHODIMP_(ULONG) AddRef();

    IFACEMETHODIMP_(ULONG) Release();

    // IDispatch

    IFACEMETHODIMP GetTypeInfoCount(UINT *pctinfo);

    IFACEMETHODIMP GetTypeInfo(UINT itinfo, LCID lcid, ITypeInfo **pptinfo);

    IFACEMETHODIMP GetIDsOfNames(REFIID riid, LPOLESTR *rgszNames, UINT cNames, LCID lcid, DISPID* rgdispid);

    IFACEMETHODIMP Invoke(DISPID dispidMember, REFIID riid, LCID lcid, WORD wFlags, DISPPARAMS *pdispParams, VARIANT *pvarResult, EXCEPINFO *pExcepInfo, UINT *puArgErr);

    // ISimpleObject

   // IFACEMETHODIMP get_FloatProperty(FLOAT *pVal);

       //IFACEMETHODIMP put_FloatProperty(FLOAT newVal);

       IFACEMETHODIMP HelloWorld(BSTR *pRet);

       //IFACEMETHODIMP GetProcessThreadID(LONG *pdwProcessId, LONG *pdwThreadId);

    SimpleObject();

};

Finally, we call this COM in OnNavigatedTo method of MainPage.xaml.cpp, and then modify content inside tb1, please add the following code. And note to check if the following CLSID and IID matches COM dll project (consistent with CppDllCOMServer.idl).

void MainPage::OnNavigatedTo(NavigationEventArgs^ e)

{

       //Create an instance of the component

       //Interface for ISimpleObject: {810356FC-23AA-4DAD-8A4C-CDF0CB768AE6}

       //CLSID for SimpleObject is {09C969C2-969F-4029-A630-BF81E5177893}

       const GUID CLSID_SimpleObj = { 0x09C969C2, 0x969F, 0x4029, {0xA6,0x30,0xBF,0x81,0xE5,0x17,0x78,0x93} };

       const IID ISimpleIID = {0x810356FC,0x23AA,0x4DAD, {0x8A,0x4C,0xCD,0xF0,0xCB,0x76,0x8A,0xE6} };

       HRESULT hr;

       MULTI_QI arrMultiQI [1] = {&ISimpleIID, NULL, 0};

       //Use the new CCI API

       hr = CoCreateInstanceFromApp(CLSID_SimpleObj,NULL,CLSCTX_ALL,NULL,1,arrMultiQI);

       OutputDebugString(L"Just Called CCIFromApp");

       ISimpleObject *pSimpleObj = reinterpret_cast<ISimpleObject*>(arrMultiQI[0].pItf);

       BSTR myBSTR = nullptr;

       //Call the COM component to get a BSTR

       hr = pSimpleObj->HelloWorld(&myBSTR);

       OutputDebugString(L"I should have a BSTR now");

       size_t nlen;

       //figure out the size so we can make a local copy

       nlen = (wcslen(myBSTR))+1;

       wchar_t* sMyString = new wchar_t[nlen];

       //Make a local copy of the string

       wcscpy_s(sMyString,nlen,myBSTR);

       //next call SysFreeString but oleaut32.lib

       //needs added as a linker additional dependency first

       //::SysFreeString(myBSTR);

       OutputDebugString(L"The BSTR should be gone now and I have the string");

       //create a string XAML can display

       String^ s = ref new String(myBSTR,nlen);

       //display the string

       tb1->Text=s;

}

Finally, compile and then execute it.
The realization of COM in this doc mainly includes how to manually create a COM object, but does not cover how to create the corresponding COM factory.

A: Here is the list to show the different stream types conversion.

Conversion between Stream and IRandomAccessStream

Conversion between IBuffer and Stream

Conversion between IRandomAccessStream and FileInputStream/FileOutputStream

Related MSDN Forum Threads

http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/4cda684d-77bf-4a0f-b3bd-a6b6a895bfff

http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/4b2d1889-d4dd-4980-adef-540db2836239/

http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/5d76bbc4-caed-43dc-8d68-6edc47cffd3b/

Q: How to convert IBuffer and COM IStream in C++/CX?

A: Conversion between IBuffer and COM IStream

Related MSDN Forum Threads

http://social.msdn.microsoft.com/Forums/en-US/winappswithnativecode/thread/dc39d796-1a3a-48e1-a095-2609600d01b7/

http://social.msdn.microsoft.com/Forums/en-US/winappswithnativecode/thread/5e70aba9-1eb4-4960-88ba-8851bb9df365

http://social.msdn.microsoft.com/Forums/br/winappswithnativecode/thread/3acd59e7-389d-4147-95fa-15a9b1ad765c

Q: How to convert native char* and String^ in C++/CX?

A: Conversion between String^ and Char*

Related MSDN Forum Threads

http://social.msdn.microsoft.com/Forums/en-US/winappswithnativecode/thread/c39b3060-0c2d-40b7-aa8c-035f1fad441c

http://social.msdn.microsoft.com/Forums/en-US/winappswithnativecode/thread/48794f27-0db7-4335-bdfe-dca664ca28a9 

Introduction

There are lots of discussions about using database in Windows Store apps in MSDN forum. These discussions mainly focus on the usage of SQL database. Based on this scenario, we developed a series of articles along with sample code and demos used to demonstrate how to access both local database and remote database.

This topic consists of four categories as below.

1. Overview of main approaches to access database in Windows Store apps.
2. How to access local database:
   1. How to use SQLite for Windows Runtime and how to use sqlite-net library to manipulate SQLite database.
   2. How to use Extensible Storage Engine (ESE) or known as JET APIs.
3. How to use WCF to access database in Windows Store apps.
4. How to access remote database.

First, we talk about how to access local database in Windows Store apps. SQLite would be a good choice.

What is SQLite?

SQLite is a relational database management system contained in a small Cprogramming library. In contrast to other database management systems, SQLite is not a separate process that is accessed from the client application, but an integral part of it. SQLite's functionality through simple function calls, which reduce latency in database access. SQLite stores the entire database as a single cross-platform file on a host machine.[1] These features make SQLite to be efficient and easy to backup.

Please note: SQLite doesn’t support all the SQL features. The following features are not supported in SQLite.[2]

1. RIGHT JOIN and FULL JOIN
2. Complete ALTER TABLE support
3. Complete trigger support
4. Writing to VIEWs
5. GRANT and REVOKE

[1].SQLite Wikipedia:http://en.wikipedia.org/wiki/Sqlite

[2].SQL features that SQLite do not implement:http://www.sqlite.org/omitted.html

Including SQLite in the app

SQLite team has made a VS extension called SQLite for Windows Runtime.

Please refer to:

http://www.sqlite.org/download.html

Then we will get a VSIX file which is a extension of Visual Studio. After installing the VSIX file, right click on our application and select Add reference:

We will see SQLite for Windows Runtime. Please select both C++ runtime package and SQLite package. SQLite need a runtime environment so that it can pass WACK.

After finishing the step, the SQLite will exist in a sqlite3.dll file. If we want to use it in C# we have to use P/Invoke to get the methods in dll. That’s a lot of works. We recommend using sqlite-net. This is a open source, light-weighted library which makes .Net platform to manipulate SQLite database. We can get sqlite-net via Nuget.

In Tools menu, select as follows:

Then, input in the console:

We will get these two files:

The files call dll methods using P/Invoke and package them into asynchronous methods. We will give some samples to show how to use the async methods.

Usage of SQLite-net

Create table:

I prepare to create 2 tables as the following charts show:

Persons table：

Orders table：

XAML：

<common:LayoutAwarePage

    x:Name="pageRoot"

    x:Class="App1.BasicPage1"

    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

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

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

    xmlns:local="using:App1"

    xmlns:common="using:App1.Common"

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

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

    mc:Ignorable="d"

    >

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="*" />

            <RowDefinition Height="100" />

            <RowDefinition Height="200" />

        </Grid.RowDefinitions>

        <ListView Name="lv1" Grid.Row="0" Grid.Column="0">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <StackPanel.Resources>

                            <Style TargetType="TextBlock">

                                <Setter Property="Width" Value="150" />

                                <Setter Property="TextAlignment" Value="Left" />

                            </Style>

                        </StackPanel.Resources>

                        <TextBlock Width="50" Text="{Binding ID_P}" />

                        <TextBlock Text="{Binding FirstName}" />

                        <TextBlock Text="{Binding LastName}" />

                        <TextBlock Text="{Binding Address}" />

                        <TextBlock Text="{Binding City}" />

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

        <ListView Name="lv2" Grid.Row="0" Grid.Column="1">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <StackPanel.Resources>

                            <Style TargetType="TextBlock">

                                <Setter Property="Width" Value="150" />

                                <Setter Property="TextAlignment" Value="Left" />

                            </Style>

                        </StackPanel.Resources>

                        <TextBlock Width="50" Text="{Binding ID_O}" />

                        <TextBlock Text="{Binding OrderNo}" />

                        <TextBlock Text="{Binding ID_P}" />

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Left">

            <Button Content="Add 1 line" Click="Button_Click_1" />

            <Button Content="Update" Click="Button_Click_2" />

            <Button Content="SQL query" Click="Button_Click_3" />

        </StackPanel>

        <ListView Grid.Row="2" Grid.Column="0" Name="lv3">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <StackPanel.Resources>

                            <Style TargetType="TextBlock">

                                <Setter Property="Width" Value="150" />

                                <Setter Property="TextAlignment" Value="Left" />

                            </Style>

                        </StackPanel.Resources>

                        <TextBlock Width="50" Text="{Binding ID_P}" />

                        <TextBlock Text="{Binding FirstName}" />

                        <TextBlock Text="{Binding LastName}" />

                        <TextBlock Text="{Binding Address}" />

                        <TextBlock Text="{Binding City}" />

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

        <ListView Grid.Row="2" Grid.Column="1" Name="lv4">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <StackPanel.Resources>

                            <Style TargetType="TextBlock">

                                <Setter Property="Width" Value="150" />

                                <Setter Property="TextAlignment" Value="Left" />

                            </Style>

                        </StackPanel.Resources>

                        <TextBlock Text="{Binding FirstName}" />

                        <TextBlock Text="{Binding LastName}" />

                        <TextBlock Text="{Binding OrderNo}" />

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </Grid>

</common:LayoutAwarePage>

Here are 4 ListView controls, lv1 is used for showing Persons table, lv2 is used for showing Orders table, lv3 is used for showing result1, lv4 is used for showing result2.

C#:

SQLiteAsyncConnection conn;

        List<Persons> re1;

        List<Orders> re2;

        public BasicPage1()

        {

            this.InitializeComponent();

            ConnData();

            InitData();

        }

        private void ConnData()

        {

            var dbPath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "db.sqlite");

            conn = new SQLite.SQLiteAsyncConnection(dbPath);

        }

        private async void InitData()

        {

            var result = await conn.CreateTablesAsync<Persons, Orders>();

            List<Persons> persons = new List<Persons>()

            {

                new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},

                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},

                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"}

            };

            List<Orders> orders = new List<Orders>()

            {

                new Orders(){OrderNo="77895",ID_P=3},

                new Orders(){OrderNo="44678",ID_P=3},

                new Orders(){OrderNo="22456",ID_P=1},

                new Orders(){OrderNo="24562",ID_P=1},

                new Orders(){OrderNo="34764",ID_P=65}

            };

            await conn.InsertAllAsync(persons);

            await conn.InsertAllAsync(orders);

            var qu1 = conn.Table<Persons>();

            re1 = await qu1.ToListAsync();

            this.lv1.ItemsSource = re1;

            var qu2 = conn.Table<Orders>();

            re2 = await qu2.ToListAsync();

            this.lv2.ItemsSource = re2;

        }

If the database does not exist, SQLite will create a new one.

Please note:

Why should the database be located in the Application data locations?

Windows Store app is running in a sandbox, there are restrict of reading and writing files.  If you’re going through the Task Manager, you will find a process named RuntimeBroker. This process is responsible for checking if Windows Store app behaves as it declares. We can access files from Application data locations directly. So, if you want to create a database, it should be located in AppData folder.

We are using the method SQLiteAsyncConnection. InsertAllAsync(). The method can insert a collection which contains some customized class into related table. It will check the class of the object and decide which table should be inserted into.

We use SQLiteAsyncConnection.Table<T>() to get the whole table and the data in table. T is the class of table. Then using AsyncQueryTable.ToListAsync() to convert the result into List<T> to display the data.

Result:

Insert one record:

We call InsertAsync() method:

private async void Button_Click_1(object sender, RoutedEventArgs e)

        {

            await conn.InsertAsync(new Persons() { FirstName = "Aaron", LastName = "Xue", Address = "MinHang", City = "Shanghai" });

            var qu = conn.Table<Persons>();

            var re = await qu.ToListAsync();

            this.lv3.ItemsSource = re;

        }

Result:

Update data in table:

We use ExcuteAsync() method. The method will return a integer which means the rows affected by the SQL statement.

private async void Button_Click_2(object sender, RoutedEventArgs e)

        {

            string city="Shanghai";

            int i = await conn.ExecuteAsync("UPDATE Persons SET City=? WHERE FirstName='Bush'", city);

            var qu = conn.Table<Persons>();

            var re = await qu.ToListAsync();

            this.lv3.ItemsSource = re;

        }

Result:

Now, let’s try to use a little complex SQL statement.

For example:

SELECT Persons.FirstName,Persons.LastName,Orders.OrderNo FROM Persons LEFT JOIN Orders ON Persons.ID_P=Orders.ID_P ORDER BY Persons.FirstName

Code:

  private async void Button_Click_3(object sender, RoutedEventArgs e)

        {

            List<Result> re = await conn.QueryAsync<Result>("SELECT Persons.FirstName,Persons.LastName,Orders.OrderNo FROM Persons LEFT JOIN Orders ON Persons.ID_P=Orders.ID_P ORDER BY Persons.FirstName");

            this.lv4.ItemsSource = re;

        }

Please note:

Here we are using QueryAsync instead ExcuteAsync() or ExcuteScalarAsync(). Because ExcuteAsync() do not return result and ExcuteScalarAsync() can only return scalar result such as “int”,”string” etc. 

QueryAsync<T> will pass a class using T and the return is List<T>. That’s a great help for us to use or to display the result.

Result:

Package application

We have already added SQLite for Windows Runtime and C++ Runtime. So the application can’t be architecture neutral(We can’t select Any CPU). We have to create 3 version of application (x86,x64,ARM), VS will help us to finish the job.

 Just select 3 version, then we will get:

WACK(Windows App Cert Kit) result

The result is Pass.

You could download the sourcode via SkyDrive

https://skydrive.live.com/redir?resid=AF599C8D7F814B07!272&authkey=!AIR_ivlJjBHGCW8

Finally, thanks for the great help of Tim Heuer’s blog.

Windows Store app offers lots of methods for data access and storage. And this article will only focus on HTML5/JavaScript programming.

In this tutorial, we’ll go over Application Data, File API , HTML5 Web Storage, Indexed Database API and remote data access. With these you can store more data – and store it more efficiently.

Handle Large Data

Generally, we can store data with IndexedDB in Windows Store app (Html5/JavaScript). Indexed Database, each app has a quota of 250MB. Among all apps on the device, the limit is 4% of the disk size or 20GB, whichever is smaller. For hard drives that are less than 30GB, the limit among all apps on the device is 375MB. Because of the overall quota among all apps, test your app to ensure its functions properly when it can store very little or even no data because other apps consume the overall quota.

And if you want to upload or download large resources, we recommend Background Transfer. Background Transfer is primarily designed for long-term transfer operations for resources like video, music and large images. For short-term operations involving transfers of smaller resources (i.e. a couple KB), the use of provided HTTP APIs (XHR in JavaScript) is recommended.

Indexed Database

To demonstrate how to use IndexedDB in a real project, I make a simple application “Creating a List with ListView and IndexedDB”.

This application stores all of its data in an IndexedDB database named ListDB. This database is opened/created with the following code:

        var db;

        var req = window.msIndexedDB.open("ListDB", 1);

        req.onerror = function () {

            console.log("Could not open database");

        };

        req.onupgradeneeded = function (event) {

            var newDB = event.target.result;

            newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement: true });

        };

The msIndexedDB.open() method accepts two parameters: the name of the database to open and the version of the database to open. If a database with a matching version already exists, then calling the msIndexedDB.open() method opens a connection to the existing database. If the database does not exist then the upgradeneeded event is raised. You handle the upgradeneeded event to create a new database. In the code above, the upgradeneeded event handler creates an object store named “tasks” (An object store roughly corresponds to a database table). When you add items to the tasks object store then each item gets an id property with an auto-incremented value automatically. The code above also includes an error event handler. If the IndexedDB database cannot be opened or created, for whatever reason, an error message is written to the Visual Studio 2012 JavaScript Console window.

You can bind the datasource and edit the listview as follow:

    // Create the data source

    var tasks = new WinJS.Binding.List();

    // Open the database

    var db;

    var req = window.msIndexedDB.open("ListDB", 1);

    req.onerror = function () {

        console.log("Could not open database");

    };

    req.onupgradeneeded = function (event) {

        var newDB = event.target.result;

        newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement: true });

    };

    // Load the data source with data from the database

    req.onsuccess = function () {

        db = req.result;

        var tran = db.transaction("tasks");

        tran.objectStore("tasks").openCursor().onsuccess = function (event) {

            var cursor = event.target.result;

            if (cursor) {

                tasks.dataSource.insertAtEnd(null, cursor.value);

                cursor.continue();

            };

        };

    };

    // Add a new task

    function addTask(taskToAdd) {

        var transaction = db.transaction("tasks", "readwrite");

        var addRequest = transaction.objectStore("tasks").add(taskToAdd);

        addRequest.onsuccess = function (evt) {

            taskToAdd.id = evt.target.result;

            tasks.dataSource.insertAtEnd(null, taskToAdd);

        }

    }

    // Delete an existing task

    function deleteTask(listViewItem) {

        // Database key != ListView key

        var dbKey = listViewItem.data.id;

        var listViewKey = listViewItem.key;

        // Remove item from db and, if success, remove item from ListView

        var transaction = db.transaction("tasks", "readwrite");

        var deleteRequest = transaction.objectStore("tasks").delete(dbKey);

        deleteRequest.onsuccess = function () {

            tasks.dataSource.remove(listViewKey);

        }

    }

    // Expose the data source and functions

    WinJS.Namespace.define("TaskList", {

        tasks: tasks,

        addTask: addTask,

        deleteTask: deleteTask

    });

And you can download the complete code in attachment.

Background Transfer

There are two main classes, BackgroundDownloader and BackgroundUploader. BackgroundDownloader is used to configure downloads prior to the actual creation of the download operation using CreateDownload. BackgroundUploader is used to configure upload prior to the actual creation of the upload operation using CreateUpload.

For example, you can configure and begin a basic download operation as follow:

        var download = null;

        var promise = null;

        function DownloadFile(uriString, fileName) {

            try {

                // Asynchronously create the file in the pictures folder.

                Windows.Storage.KnownFolders.picturesLibrary.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.generateUniqueName).done(function (newFile) {

                    var uri = Windows.Foundation.Uri(uriString);

                    var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();

                    // Create a new download operation.

                    download = downloader.createDownload(uri, newFile);

                    // Start the download and persist the promise to be able to cancel the download.

                    promise = download.startAsync().then(complete, error, progress);

                }, error);

            } catch (err) {

                displayException(err);

            }

        };

You can configure and begin a basic upload operation as follow:

        var upload = null;

        var promise = null;

        function UploadFile(uriString, file) {

            try {

                var uri = Windows.Foundation.Uri(uriString);

                var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

                // Set a header, so the server can save the file (this is specific to the sample server).

                uploader.setRequestHeader("Filename", file.name);

                // Create a new upload operation.

                upload = uploader.createUpload(uri, file);

                // Start the upload and persist the promise to be able to cancel the upload.

                promise = upload.startAsync().then(complete, error, progress);

            } catch (err) {

                displayError(err);

            }

        };

And there has an example demonstrating how to use Background Transfer.

List.zip