8/27/2012

Windows8のMediaCaptureでHRESULT : 0xC00DABE0のExceptionが出る場合の対処

かなり限定的な内容で申し訳ないのですが、同じ現象が出ている人が多いと思い書きます。このExceptionはSimulatorで動作させた場合やRemote Desktopで接続している場合にだけExceptionが出るので、バグかなーって思ってしまうのですが、カメラアプリやCameraCaptureUIを使用した場合はExceptionが出ないですし、気になりますよね。

デバイスの設定する

試した結果なので正確な情報じゃないかもしれませんが、デバイスの設定をすると問題なく動作するようです。デフォルトだとExceptionが出てしまいます。MediaCaptureInitializationSettingsのStreamingCaptureModeを設定するとでなくなりました。以下のようなコードです。

m_devInfoCollection = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);
if (m_devInfoCollection.Count > 0)
{
    devCurrentNo = 0;
    devInfoName = m_devInfoCollection[devCurrentNo].Name;
    var settings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    var chosenDevInfo = m_devInfoCollection[devCurrentNo];
    settings.VideoDeviceId = chosenDevInfo.Id;
    settings.StreamingCaptureMode = StreamingCaptureMode.Video;
    m_mediaCaptureMgr = new Windows.Media.Capture.MediaCapture();
    await m_mediaCaptureMgr.InitializeAsync(settings);
}

StreamingCaptureModeには、AudioかAudioAndVideoかVideoをどれかを設定します。


皆さんのもうまくいくとイイですね。

8/24/2012

Windows8設定チャームのフライアウト実装について

Windows8のC#で設定チャーム(Settings charm)の実装をし調べたのでメモです。Windows Phoneのように画面全体のPageで作ると思っていたのですが、チャーム(Charm)で表現する必要があるようですね。でも、標準で用意されているチャームのコントロールが見つからないのです。。。

では、どうしたらよいのかと思い探していると、自作のユーザコントロールで設定チャームを実装している例がありました。基本はこのような実装になるんですね。

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx

更に調べてみるとチャームをCharmFlyoutライブラリのコントロールで実装している例もありました。今回はこのCharmFlyoutを使用して設定チャームをアプリに実装してみます。

http://code.msdn.microsoft.com/windowsapps/CharmFlyout-A-Metro-Flyout-25fe53b6

http://w8isms.blogspot.jp/2012/08/charmflyout-supporting-sub-flyouts.html

VisualStudioでProjectを作成

今回は簡単にサンプルとして作成しますので、Blank Appを選びます。

Capture

VisualStudioのNuGetでCharmFlyoutをインストール

VisualStudioの「Project」メニューから「Manage NuGet Packages」を選択します。

Capture02

左上から「Online」を選択し、右上の検索ボックスから「CharmFlyout」を入力して、CharmFlyoutライブラリを探します。ライブラリが見つかったら「Install」をクリックしてインストールします。

Capture04

Blendでチャーム作成

インストールが完了したら、MainPage.xamlをBlendで編集します。Blendが起動したら、左上の検索ボックスから「CharmFlyout」を見つけて「[Grid]」の中にCharmFlyoutを持っていきます。

CharmFlyoutコントロールの名前を「OptionsCharm」に変えて、右上の「HeadingBackgroundBrush」でチャームの色を決めます。「Width」「Height」はAuto、「HorizontalAlignment」「VerticalAlignment」は一番右を選択。

Capture07

右下の「Heading」にはチャームのタイトル名「Options」を設定します。

Capture08

CharmFlyoutにStackPanelを入れてTextBlockとかを入れてみます。

Capture09

MainPage.xamlは以下のような感じになりました。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CharmFlyoutSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:CharmFlyoutLibrary="using:CharmFlyoutLibrary"
    x:Class="CharmFlyoutSample.MainPage"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <CharmFlyoutLibrary:CharmFlyout x:Name="OptionsCharm" Heading="Options" HeadingBackgroundBrush="#FFFF8000">
            <StackPanel>
                <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
                <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
            </StackPanel>
        </CharmFlyoutLibrary:CharmFlyout>
    </Grid>
</Page>

 


VisualStudioでチャームの動作を書く


設定チャームへの登録や、チャームのフライアウトを行うMainPage.xaml.csは以下のようになります。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.ApplicationSettings;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace CharmFlyoutSample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
        }
        void MainPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand("options", "Options", (p) => { OptionsCharm.IsOpen = true; }));
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

 


動作確認


Optionsが登録さてていることを確認します。


Capture10


Optionsを選択すると今回作成したチャームが表示されます。


Capture11


CharmFlyoutを使うと簡単にチャームを作ることができますね。

8/21/2012

Windows 8 のアップバーのボタンアイコン

Windows 8のアプリでは、アイコンを含む丸い形のボタンが多くのアプリケーションで利用されていますが、このアイコンはどのように作成したらよいのか迷うと思います。Windows Phoneの場合は、自分で作成したPng形式の画像ファイルを利用したりするのですが、Windows 8では事情が違うようです。

で、とりあえずmsdnを探したのですが、JSのAppBarIconはあるのですが、XAMLの情報が見つからないので、調べてみました。ですので、間違っているところもあると思いますが、自分へのメモとして書き残そうと思います。

JSのAppBarIconを列挙しているページは以下参照。

http://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx

XAMLでAppBarIconの定義は、プロジェクトファイル内に存在する StandardStyles.xaml で行っているみたい。Windows 8では、アイコンがPngではなく、Segoe UI Symbolのフォントを利用しているようなので「文字コード表」アプリでアイコンを確認してみます。

char

カメラのアイコンとかを見つけることができますね。左下に文字コードが表示されているので、このコードを使って StandardStyles.xaml にアイコンを定義してみます。以下のようなXMLを追加します。

<Style x:Key="RotateCameraAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="RotateCameraAppBarButton" />
    <Setter Property="AutomationProperties.Name" Value="Rotate Camera" />
    <Setter Property="Content" Value="&#xE124;" />
</Style>

ボタンとして使う場合は、アプリケーションのXAMLに以下のように指定してみます。

<Button x:Name="rotatecameraButton" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource RotateCameraAppBarButtonStyle}" BorderThickness="0,0,1,1" Margin="0" Click="rotatecameraButton_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/>
<Button x:Name="clockButton" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource ClockAppBarButtonStyle}" BorderThickness="0,0,1,1" Margin="0" Click="clockButton_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2"/>
<Button x:Name="cameraButton" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource CameraAppBarButtonStyle}" BorderThickness="0,2,2,0" Margin="0" Click="cameraButton_Click" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="3"/>

以下のように表示されました!


charimage


文字として登録されているアイコンは使えるけど、自作のアイコンを使う場合はどうしたらよいのかな?ご存知の方がいたら教えてください!


もしかして、Fontを作成しないといけない!?