Archive for 2012年4月

TextBlock も2000px を超える範囲は描画が極端に遅くなるという制限があります

2012年4月27日

Windows Phone 7  の TextBlock は縦 2000px を超える範囲は描画が極端に遅くなるという制限があるようですね。

http://social.msdn.microsoft.com/Forums/ja/wpdevja/thread/c80359fd-9187-4697-8d0e-fc41db2627b7

これって、仕様?どこに書いてあるの? と書いたら、kkamegawaさんから、”Windows Phone 用アプリケーションのパフォーマンスに関する考慮事項”に書いてあるよと教えてくれました。

http://msdn.microsoft.com/ja-jp/library/ff967560(VS.92).aspx

これによると、「イメージのサイズが 2000 x 2000 ピクセルを超えると、画面に現れるのが極端に遅くなります。」 ということですが、TextBlock でも同様に2000 px を超えると急に描画が遅くなる制限があるようです。

ということは、TextBlockも内部的に画像として処理しているってことですね。

広告

XAML のTextBlock のRun のLineBreak をC#で書くには

2012年4月27日

TextBlock 内のRun を C# で書く場合、LineBreak は、Unicode line separator character (U+2028) 、10進数で8232になります。

<TextBlock x:Name=”textBlock1″ >
           <Run Text=”0″ /><LineBreak />
           <Run Text=”1″ /><LineBreak />
           <Run Text=”2″ /><LineBreak />
           <Run Text=”3″ /><LineBreak />
           <Run Text=”4″ /><LineBreak />
           <Run Text=”5″ /><LineBreak />
</TextBlock>

は、次のようになります。

this.textBlock1.Text = “0”+ “\u2028” + “1”+ “\u2028” +…;

ジェスチャーでスクロール

2012年4月25日

// 事前に Translate インスタンスを作成しておきます。
this.textBlock1.RenderTransform = new TranslateTransform();

あるいは、XAMLで、TranslateTransform を定義しておきます。
    <TextBlock FontSize=”72″ x:Name=”textBlock1″  ManipulationDelta=”textBlock1_ManipulationDelta”>
        <TextBlock.RenderTransform>
            <TranslateTransform>  </TranslateTransform>
        </TextBlock.RenderTransform>
<Run Text=”0″/><LineBreak/><Run Text=”1″/><LineBreak/>…<Run Text=”9″/><LineBreak/><Run Text=”0″/>
    </TextBlock>

そして、ManipulationDelta で変更します。

private void textBlock1_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    ((TranslateTransform)this.textBlock1.RenderTransform).X += e.DeltaManipulation.Translation.X;
    ((TranslateTransform)this.textBlock1.RenderTransform).Y += e.DeltaManipulation.Translation.Y;
}

スケーリング、ローテーションも同様です。

Windows Phone Icons Maker

2012年4月23日

Windows Phone 7 Application を作成するに当たり、次の5種類のアイコンを作成する必要があります。この Windows Phone Icons Maker を使用するとすごく楽にアイコン一式を作成できます。

マーケットプレース用

  • 200×200: AppName200.png
  • 173×173: AppName173.png
  • 99×99: AppName99.png

アプリケーション用

  • 173×173: Background.png
  • 62×62: ApplicationIcon.png

ダウンロードはこちら。

Windows Phone Icons Maker

  1. PowerPointなどで、デザインする。
    image
  2. Paint で、png フォーマットでセーブする。
    image
  3. WP_IconMaker を起動し、アイコン一式を作成する。
    image
  4. Gimp2 で、ApplicationIcon.png、Background.png の透明色を設定する。
    image
  5. これで、アイコン一式が作成できます。
    image

Windows Phone 7 のメニューバー: ApplicationBar

2012年4月18日

Windows Phone 7 SDK の標準アイコンは、次の場所にあります。

%PROGRAMFILES(x86)%\Microsoft SDKs\Windows Phone\v7.1\Icons

image

アプリケーションバーの例

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>
        <shell:ApplicationBarIconButton IconUri=”/Images/appbar_button1.png” Text=”Button 1″/>
        <shell:ApplicationBarIconButton IconUri=”/Images/appbar_button2.png” Text=”Button 2″/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text=”MenuItem 1″/>
            <shell:ApplicationBarMenuItem Text=”MenuItem 2″/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

/Images/appbar_button1.png のように、ファイルを追加し、ビルドアクションをコンテンツにします。

Windows Phone 7 で、ストーリーボードを手書き

2012年4月15日

Canvas のTranslateY をストーリーボードでアニメーションする際の注意です。


<Canvas Name=”canvas” >
    <Canvas.RenderTransform>
        <CompositeTransform>
            <CompositeTransform.TranslateY>100

            </CompositeTransform.TranslateY>
        </CompositeTransform>
    </Canvas.RenderTransform>
・・・とRenderTransform を定義しておくか、コードで
canvas.RenderTransform = new CompositeTransform();
のように、RenderTransform を追加しておかないと、ターゲットが存在しないため、

ArgumentException “パラメータが正しくありません” というわけのわからない例外になります。


それから、SetTarget で、canvas を指定しただけだと、ターゲットの指定が不十分でアニメーションが動きません。次のように、canvas.RenderTransform まで指定する必要があります。

Storyboard.SetTarget(daukf1, canvas.RenderTransform);


Storyboard sb1 = new Storyboard();

canvas.RenderTransform = new CompositeTransform();

DoubleAnimationUsingKeyFrames daukf1 = new DoubleAnimationUsingKeyFrames();

LinearDoubleKeyFrame ldkf1 = new LinearDoubleKeyFrame();
ldkf1.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0));
ldkf1.Value = 0;

LinearDoubleKeyFrame ldkf2 = new LinearDoubleKeyFrame();
ldkf2.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 10));
ldkf2.Value = -1300;

daukf1.KeyFrames.Add(ldkf1);
daukf1.KeyFrames.Add(ldkf2);

Storyboard.SetTarget(daukf1, canvas.RenderTransform);
Storyboard.SetTargetProperty(daukf1, new PropertyPath(CompositeTransform.TranslateYProperty));

sb1.Children.Add(daukf1);
sb1.RepeatBehavior = RepeatBehavior.Forever;
sb1.Begin();

画面のローカライズ

2012年4月15日

アプリケーションをローカライズするには

UX-TV: 3/7放送分 の大西さんの放送を見るのがわかりやすいです。

  1. プロジェクトにアセンブリ リソース ファイルを追加する
    image
    日本語リソース AppResources.resx を追加
    image
    同様に英語リソース AppResources.en-US.resx を追加
    image
    同様にスペイン語リソース AppResources.es-ES.resx を追加

    [アクセス修飾子] を "Public" に設定すること。この設定を忘れると、次のコンパイルエラーになります。

    アクセシビリティに一貫性がありません。プロパティの型 ‘Timer.AppResources’ のアクセシビリティはプロパティ ‘….LocalizedStrings.LocalizedResources’ よりも低く設定されています。 

  2. ニュートラル言語の確認
    プロジェクトのプロパティ→[アプリケーション]→[アセンブリ情報]より、ニュートラル言語が日本語になっていることを確認する
    image
  3. プロジェクトにリソースを追加する
    [プロジェクト]→[プロジェクトのアンロード]
    image
    [ソリューションエクスプローラ]→[プロジェクト]を右クリック→[編集]
    image

    SupportedCulturesに、サポート言語を追加する。
    <SupportedCultures>
        en-US;es-ES;
    </SupportedCultures>
    image
    [ソリューションエクスプローラ]→[プロジェクト]を右クリック→[プロジェクトの再読み込み]
    image

  4. クラスの追加より、LocalizedStrings.cs を追加
    image
    次のコードを追加。

    namespace PhoneApp123
    {
        public class LocalizedStrings
        {
            private AppResources localizedresources = new AppResources();
            public AppResources LocalizedResources { get { return localizedresources; } }

        }
    }

  5. ローカライズのファイルが多い場合
    Resources というフォルダーを作成して、その下にまとめるとすっきりします。その場合、LocalizedStrings.cs に、using で次のように名前空間を指定するだけで、対応することができます。

    using PhoneApp123.Resources;

  6. App.xaml
    xmlns:local=”PhoneApp123” 参照を追加する。
    image
    App.xaml のApplication.Resources に次のリソースを追加する。

    <Application.Resources>
         <local:LocalizedStrings x:Key="LocalizedStrings" />
    </Application.Resources>

  7. 画面要素にデータバインドする

    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Name="textBlock1" Text="{Binding Path=LocalizedResources.Greeting, Source={StaticResource LocalizedStrings}}" FontSize="40" />
        <TextBlock Name="textBlock2" Text="{Binding Path=LocalizedResources.Farewell, Source={StaticResource LocalizedStrings}}" FontSize="40" />
    </StackPanel>

  8. ApplicationMenu のローカライズ
    ApplicationMenu, ApplicationBar のローカライズで、データバインドを行うと、XamlParseException 例外が発生し、次のようなエラーメッセージが表示されます。
    Set property ‘Microsoft.Phone.Shell. ApplicationBarIconButton. Text’ threw an exception.

    これは、ApplicationMenu, ApplicationBar がデータバインドに対応していないためです。

    対応としては、たとえば次のように、動的に追加することにより、ローカライズすることができます。

    public MainPage()
    {
        InitializeComponent();
        LocalizeApplicationBar();
    }

    private void LocalizeApplicationBar()
    {
        ApplicationBarMenuItem appBarMenuItemHTP = new ApplicationBarMenuItem(AppResources.HowToMenu);
        appBarMenuItemHTP.Click += new EventHandler(ApplicationBarMenuItemHowTo_Click);
        ApplicationBar.MenuItems.Add(appBarMenuItemHTP);
    }

    private void ApplicationBarMenuItemHowTo_Click(object sender, EventArgs e)
    {
        var res = MessageBox.Show(AppResources.HowToPlay, AppResources.Title,
            MessageBoxButton.OK);
    }

Windows Phone ローカリゼーションのベスト プラクティス

  • 文字列の長さが、英語に必要な長さよりも約 40% 長いのが目安です。
  • 文字列 "The {0} could not be synchronized" のようなパラメータは使用しない。
  • 文字列を再使用しない

    など、一度目を通しておいたほうが良いです。

方法: Windows Phone のアプリケーション タイトルをローカライズする 

この方法だと VC++ が必要になってしまいますが、http://bit.ly/wploctool を使用すると、簡単にタイルのローカライズができます。

  1. リソースの作成
    image
  2. リソースを組み込む
    ツールで作成した AppResLib.dll.* をプロジェクトへコピー
  3. *.mui のビルドアクションを[コンテンツ]に変更
  4. WMAppManifest.xml の変更
    <App …中略… Title="@AppResLib.dll,-100" …後略
    <Title>@AppResLib.dll,-200</Title>
  5. ビルドして完成

imageAppTile

imageAppTileString

C# のコードから使用するには、AppResources.Designer.cs に実装されているAppResources クラスに文字列が定義されており、例えばAppResources.Greetings でアクセスできます。

画面ロックを回避

2012年4月14日

UserIdleDetectionMode

画面ロックを回避するには、UserIdleDetectionMode をDisabledにします。しかし、ユーザーが電話を使用していない場合でもアプリケーションの実行を継続するため、バッテリの電力を消費し続けるので、注意が必要です。

これを Disabled にする場合、必ず前もってユーザーに本当にDisabled にしてもよいかどうかを確認することが推奨されています。

using Microsoft.Phone.Shell;

try
{
    PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;
}
catch (Exception)
{
    // This exception is expected in the current release.
}

try/catch を入れておかないと、デザインモードで次の例外が発生してしまいます。

image

System.NullReferenceException
オブジェクト参照がオブジェクト インスタンスに設定されていません。
   場所 PhoneClassLibrary1.TimerControl.UserControl_Loaded(Object sender, RoutedEventArgs e) 場所 C:\Users\uchukamen\Desktop\Windows Phone\Timer\PhoneClassLibrary1\TimerControl.xaml.cs:行 27
   場所 MS.Internal.CoreInvokeHandler.InvokeEventHandler(UInt32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
   場所 MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)

 


似たようなプロパティで、ApplicationIdleDetectionMode がありますが、このプロパティは、もっと注意が必要です。これをDisabled にすると、Windows Phone がIdle となって、ロック状態になっても、アプリケーションはそれを検知しません。このため、アプリケーションは実行を継続するため、バッテリの電力を消費し続けるので、注意が必要です。さらに、一度 Disabled になると、Enabled に戻すことができません。Enabled に戻すには、PhoneApplicationFrame オブジェクトの初期化が必要です。この機能を実装するには、「Windows Phone 7 アプリケーションの認定要件」を満たす必要があります。また、ロック画面になっている間のアプリケーションの電力消費を抑えるために、Obscured イベント ハンドラーで、各種設定を行う必要があります。

詳細は、MSDN Windows Phone のアイドル検出 を参照してください。

ApplicationIdleDetectionMode

Windows Phone 7 では、BlurEffect と DropShadowEffect はサポートされていない

2012年4月6日

http://msdn.microsoft.com/en-us/library/ff602285(v=vs.95).aspx 

BlurEffect と DropShadowEffect はサポートされていないんですね。まあ、それ自体は驚きでもないのだけれど、その仕様がどこに書かれているのか探してしまいました。

Windows Phone のハードウェア仕様

2012年4月5日

http://msdn.microsoft.com/ja-jp/library/ff637514(v=vs.92).aspx より。

標準ハードウェア

  • [スタート]、[検索]、および [戻る] ボタンを含む共通のハードウェア コントロールとボタン
  • WVGA (800 x 480) ディスプレイ
  • 静電式 4 点マルチタッチ スクリーン
  • 携帯ネットワークと Wi-Fi データ接続
  • 256 MB 以上 の RAM と 8 GB以上のフラッシュ ストレージ
  • A-GPS
  • 加速度センサー

オプションのハードウェア

  • コンパス
  • ジャイロ
  • プライマリ カメラ
  • 前向きカメラ

注:

  • 端末には近接センサーや照度センサーなどの追加のセンサーがありますが、まだ開発者が操作することはできません。
  • Windows Phone OS 7.1 では、[検索] ボタンは常に Bing 検索を呼び出します。