« 【#Xamarin.Forms】【#UWP】 「DEP0700 : アプリケーションの登録に失敗しました。エラー 0x80070057」 | トップページ | 【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています »

2017年2月 5日 (日)

【#Xamarin.Forms】【#UWP】 「游ゴシックを指定するには?」 あるいは 「三点リーダー『…』を中央に配置するには?」

UWP では日本語の文字の既定のフォントが Yu Gothic UI になっているため、 (Xamarin.Forms に限らず) UWP アプリで表示する日本語の文字は Yu Gothic UI になります。

そのため、

  • 平仮名・カタカナの背は高く (漢字と同じ高さ)、 幅は狭く、 異様に縦長の字形になっていて読み難い
  • 三点リーダー「…」が中央ではなく、 下端に表示される

※ どっちも、 Win10 のプレビュー時代に文句を言ったんだけど、 直りませんでした… orz

◆ 確かめてみる

Xamarin.Forms の PCL ソリューションを作り、 MainPage.xaml に次のような XAML を書く。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:XamarinForms20190203"
        x:Class="XamarinForms20190203.MainPage">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           FontSize="36"
           LineBreakMode="WordWrap" BackgroundColor="Yellow">
      既定のフォントは Yu Gothic UI なので…、 片仮名や平仮名が漢字と同じ高さだし、 三点リーダーが下に行ってしまう…… orz
游ゴシックだと漢字よりカナは小振りだし、 三点リーダー「…」もちゃんと真ん中に来る♪
あと、 Office の ff とかも連続してくれる。
Win8.xと違って、游ゴシックの既定でもトンドルは㌧㌦にならないし♫
    </Label>

    <Button Text="ボタンの三点リーダー「…」は……?"
            FontSize="36" BackgroundColor="Yellow"
            HorizontalOptions="Center" />

    <Editor Text="TexBoxの三点リーダー「…」は……?"
            FontSize="36" BackgroundColor="Yellow" />

  </StackLayout>
</ContentPage>

…で、 実行してみる。

20170205_xamarinforms01

Label (UWP の TextBlock) も Button も Editor (UWP の TextBox) も、 みんな Yu Gothic UI で表示されています。 三点リーダー 「…」 が下に表示されちゃってます。

ちなみに、 Yu Gothic UI は、 既定では 「ff」 などを ligature (合字) にしてくれません。 次の画像で 「f」 と 「f」 の間が少し空いているのが分かります。

20170205_xamarinforms02


◆ 游ゴシックを指定する (Xamarin.Forms 正統派)

Xamarin.Forms の UWP アプリで Windows 専用フォントを指定するには、 PCL / Shared プロジェクトの App.xaml で、 OnPlatform を利用してスタイルを指定します (個別のコントロールごとに指定しても、 もちろん構いません)。

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinForms20190203.App">
  <Application.Resources>
    <!-- Application resource dictionary -->
    <ResourceDictionary>
      <Style TargetType="Label">
        <Setter Property="FontFamily">
          <OnPlatform x:TypeArguments="x:String">
            <OnPlatform.Android>monospace</OnPlatform.Android>
            <OnPlatform.iOS>Courier New</OnPlatform.iOS>
            <OnPlatform.WinPhone>Yu Gothic</OnPlatform.WinPhone>
          </OnPlatform>
        </Setter>
      </Style>
      <Style TargetType="Button">
        <Setter Property="FontFamily">
          <OnPlatform x:TypeArguments="x:String">
            <OnPlatform.Android>monospace</OnPlatform.Android>
            <OnPlatform.iOS>Courier New</OnPlatform.iOS>
            <OnPlatform.WinPhone>Yu Gothic</OnPlatform.WinPhone>
          </OnPlatform>
        </Setter>
      </Style>
      <Style TargetType="Editor">
        <Setter Property="FontFamily">
          <OnPlatform x:TypeArguments="x:String">
            <OnPlatform.Android>monospace</OnPlatform.Android>
            <OnPlatform.iOS>Courier New</OnPlatform.iOS>
            <OnPlatform.WinPhone>Yu Gothic</OnPlatform.WinPhone>
          </OnPlatform>
        </Setter>
      </Style>
    </ResourceDictionary>
  </Application.Resources>
</Application>

…ただ、 このやり方だと、 全部のコントロールについて書かなきゃならないんですよねぇ。

ともあれ、 これで次の画像のように游ゴシックで表示されます。 三点リーダー「…」が中央に来てるし、 「ff」 は合字になっています。

20170205_xamarinforms03

20170205_xamarinforms04

◆ 游ゴシックを指定する (UWP アプリ開発派)

UWP アプリの既定のフォントは、 generic.xaml で指定されています。

これを、 UWP プロジェクトの App.xaml でオーバーライドしてやれば、 楽ができる (かもしれない) のです。 コントロールのフォントなら、 次の指定だけでだいたい設定できます。

※ PCL / Shared プロジェクトの App.xaml じゃありませんよ。 気をつけて!

<Application
    x:Class="XamarinForms20190203.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamarinForms20190203.UWP"
    RequestedTheme="Light">
  <Application.Resources>
    <ResourceDictionary>
      <!-- 一般的なコントロールの文字 -->
      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
          <FontFamily x:Key="ContentControlThemeFontFamily">Yu Gothic</FontFamily>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
          <FontFamily x:Key="ContentControlThemeFontFamily">Yu Gothic</FontFamily>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Light">
          <FontFamily x:Key="ContentControlThemeFontFamily">Yu Gothic</FontFamily>
        </ResourceDictionary>
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

※ コントロールによっては、 generic.xaml からスタイル定義をごっそりコピペして書き直さなきゃいけないものもあります。

20170205_xamarinforms05

実行結果は、 先の 「正統派」 と同じになります。

◆ 游ゴシックや游明朝は㌧㌦!?

Win8.x のときは、 Typography.DiscretionaryLigatures が既定で True にされていたため、 「トンドル」 が 「㌧㌦」 に、 「ファミリー」 が 「ファ㍉ー」 などに、 「文字化け」 するという問題がありました。

⇒ @IT 「WinRT/Metro TIPS:游ゴシック/游明朝を正しく使うには?[Windows 8.1ストア・アプリ開発]

Win10 UWP では、 この設定が既定では False に変わったため、 安心して游ゴシックを使えます。

もちろん、 Typography.DiscretionaryLigatures="True" を指定すれば↓、 ㌧㌦ 文字になります f(^^;
20170205_xamarinforms06

|

« 【#Xamarin.Forms】【#UWP】 「DEP0700 : アプリケーションの登録に失敗しました。エラー 0x80070057」 | トップページ | 【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています »

プログラミング」カテゴリの記事

* プログラミング ( Metro スタイル )」カテゴリの記事

* プログラミング ( Xamarin )」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: 【#Xamarin.Forms】【#UWP】 「游ゴシックを指定するには?」 あるいは 「三点リーダー『…』を中央に配置するには?」:

« 【#Xamarin.Forms】【#UWP】 「DEP0700 : アプリケーションの登録に失敗しました。エラー 0x80070057」 | トップページ | 【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています »