【#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>
…で、 実行してみる。
Label (UWP の TextBlock) も Button も Editor (UWP の TextBox) も、 みんな Yu Gothic UI で表示されています。 三点リーダー 「…」 が下に表示されちゃってます。
ちなみに、 Yu Gothic UI は、 既定では 「ff」 などを ligature (合字) にしてくれません。 次の画像で 「f」 と 「f」 の間が少し空いているのが分かります。
◆ 游ゴシックを指定する (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」 は合字になっています。
◆ 游ゴシックを指定する (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 からスタイル定義をごっそりコピペして書き直さなきゃいけないものもあります。
実行結果は、 先の 「正統派」 と同じになります。
◆ 游ゴシックや游明朝は㌧㌦!?
Win8.x のときは、 Typography.DiscretionaryLigatures が既定で True にされていたため、 「トンドル」 が 「㌧㌦」 に、 「ファミリー」 が 「ファ㍉ー」 などに、 「文字化け」 するという問題がありました。
⇒ @IT 「WinRT/Metro TIPS:游ゴシック/游明朝を正しく使うには?[Windows 8.1ストア・アプリ開発]」
Win10 UWP では、 この設定が既定では False に変わったため、 安心して游ゴシックを使えます。
もちろん、 Typography.DiscretionaryLigatures="True" を指定すれば↓、 ㌧㌦ 文字になります f(^^;
| 固定リンク
« 【#Xamarin.Forms】【#UWP】 「DEP0700 : アプリケーションの登録に失敗しました。エラー 0x80070057」 | トップページ | 【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています »
「プログラミング」カテゴリの記事
- 【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには(2018.06.17)
- 【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた(2018.03.28)
- 【.NET Core】 プロジェクトを作ると 「project.assets.json が見つかりません」 エラー(2018.02.10)
- 【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)(2017.08.23)
- 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る(2017.08.16)
「* プログラミング ( Metro スタイル )」カテゴリの記事
- 【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには(2018.06.17)
- 【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた(2018.03.28)
- 【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)(2017.08.23)
- 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る(2017.08.16)
- 【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる(2017.08.05)
「* プログラミング ( Xamarin )」カテゴリの記事
- 【#UWP】入門書 「UWP アプリ開発 101」 第2版 (VS2017 対応) 好評発売中です(2017.07.01)
- 【#UWP】プロモーション コードを使ってアプリを宣伝する / βテストする(2017.02.23)
- 【#UWP】アプリに、 ユーザーからのフィードバック機能を付けよう(2017.02.10)
- 【#UWP】入門書 「UWP アプリ開発 101」 を無料配布しています(2017.02.06)
- 【#Xamarin.Forms】【#UWP】 「游ゴシックを指定するには?」 あるいは 「三点リーダー『…』を中央に配置するには?」(2017.02.05)
この記事へのコメントは終了しました。
コメント