空白space文字コード教えてください

Question

VisualStudio2015、ストアアプリ、xamlでデザイン中なのですが、
textboxとtextboxの間に22ptの半角文字1つが入るスペースを空けたいです。

どうするのが最適でしょうか？
イラレで書かれたデザイン通りに仕上げたいので、
その通りに、textblockで空白spaceを入れようと思いました。
下記がコードサンプルです。
なぜ、同じテキストブロック内で、間に空白を入れないのかというと、
片側だけ、後でプログラムで値を変動させるために名前を割り振りたいからです。

<Grid >
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
       <TextBlock x:Name="1" Text="左" />
       <TextBlock x:Name="2" Text=" " />
       <TextBlock x:Name="3" Text="中  央" />
       <TextBlock x:Name="4" xml:space="preserve"></TextBlock>
       <TextBlock x:Name="5" Text="右&emsp;右" />
   </StackPanel>
</Grid>

下記すべて試しましたがダメでした↓
ノーブレークスペース
フォントサイズの半分のスペース
フォントサイズのスペース
xml:space="preserve"
\t

参考にしようと思ったサイト
http://akabeko.me/blog/2009/11/xaml-%E3%81%A7%E8%A4%87%E6%95%B0%E8%A1%8C%E3%81%AE%E6%96%87%E5%AD%97%E5%88%97%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
このサイトは正解でしょうか？

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
 
    <sys:String x:Key="Text.Description">Line 1.
Line 2.</sys:String>
</ResourceDictionary>

と書いてあるのですが、テキストブロックとは違いますか？

Dictionary使ったことがなくて、、すみません。

結果的に、22pt半角1文字分が、はさんでいる文字ときれいに並べば大丈夫ですので、絶対textblockでないといけないわけではありません。

宜しくお願い致します。

回答を受けて、試したコードを追記します。

Answer 1

こんにちは。

スペース文字コードの回答ではありませんが、
StackPanelの中にTextBlockを配置して文字列を構築するのではなく、
TextBlockの中のRun要素を使うことで１つのTextBlockを構築してみてはどうでしょうか。

<TextBlock>
    <Run x:Name="1" Text="左" />
    <Run x:Name="2" Text=" " />
    <Run x:Name="3" Text="中  央" />
    <Run x:Name="4" xml:space="preserve"></Run>
    <Run x:Name="5" Text="右 右" />
</TextBlock>

スペースの表現はできてそうですが、やりたいことと違ってたらすみません。

Comments

[b1ackc0ffee]

おー、さすがです。
期待通りの結果が得られました＾＾
しかも、Runにもx:Name=指定できるんですね。

質問のところで、
なぜ、同じテキストブロック内で、間に空白を入れないのかというと、
片側だけ、後でプログラムで値を変動させるために名前を割り振りたいからです。
とかいているように、Runをきちんと試さずできないと思い込んでいました。
有難うございます！

[b1ackc0ffee]

<Run x:Name="4" xml:space="preserve"></Run>の部分だけ、半角スペースは無理でしたが(全角はいけた)、
<Run x:Name="2" Text=" " />は使えました！！＊。

Answer 2

こんにちは。

XAMLは詳しくないのですが、試してみました。
比較のために上段に一括で「左 中央 右」、下段に文字を分解した形でTextBlockを配置しています。
スクリーンショットのデザイン青枠部分が" "(半角スペース)のTextBlockです。

「左」と「中央」の間に、フォントサイズ22px相当の空間が出来ているのではないかと思えます。

デザイン画面を800%の表示にしていますが、微妙にずれているのは少々気になります・・・

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <TextBlock x:Name="tb1" FontSize="22px" Text="左 中央 右" Margin="0,0,0,0"/>
        </StackPanel>
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,25,0,0">
            <TextBlock x:Name="tb21" FontSize="22px" Text="左"/>
            <TextBlock x:Name="tb22" FontSize="22px" Text=" "/>
            <TextBlock x:Name="tb23" FontSize="22px" Text="中央"/>
            <TextBlock x:Name="tb24" FontSize="22px" Text=" "/>
            <TextBlock x:Name="tb25" FontSize="22px" Text="右"/>
        </StackPanel>

スクリーンショット

Comments

[b1ackc0ffee]

回答有難うございます。
詳しくないのにすぐ理解できてすごいですね。
トライしてみましたが、私の画面では差が大きく開いて見えます。
質問欄に写真追加しました。

さらに比較するために、
<!--1-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock x:Name="tb1" FontSize="22px" Text="左 中央 右" Margin="0,0,0,0"/>
</StackPanel>
<!--2-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,15,0,0">
<TextBlock x:Name="tb21" FontSize="22px" Text="左"/>
<TextBlock x:Name="tb22" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb23" FontSize="22px" Text="中央"/>
<TextBlock x:Name="tb24" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb25" FontSize="22px" Text="右"/>
</StackPanel>
<!--3-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,30,0,0">
<TextBlock x:Name="tb321" FontSize="22px" Text="左"/>
<TextBlock x:Name="tb322" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb323" FontSize="22px" Text="中央"/>
<TextBlock x:Name="tb324" FontSize="22px" Text="　　　　　　　　　　　　　　　　　　　　"/>
<TextBlock x:Name="tb325" FontSize="22px" Text="右"/>
</StackPanel>
<!--4-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,45,0,0">
<TextBlock x:Name="tb4321" FontSize="22px" Text="左"/>
<TextBlock x:Name="tb4322" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb4342" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb4432" FontSize="22px" Text=" "/>
<TextBlock x:Name="tb4323" FontSize="22px" Text="中央"/>
<TextBlock x:Name="tb4324" FontSize="22px" Text="　　　　　　　　　　　　　　　　　　　　"/>
<TextBlock x:Name="tb4424" FontSize="22px" Text="　　　　　　　　　　　　　　　　　　　　"/>
<TextBlock x:Name="t4b324" FontSize="22px" Text="　　　　　　　　　　　　　　　　　　　　"/>
<TextBlock x:Name="t44324" FontSize="22px" Text="　"/>
<TextBlock x:Name="tb4325" FontSize="22px" Text="右"/>
</StackPanel>

で試してみましたがやはりだめでした。
# デザイン画面をは400%の表示です＾＾

[sgr-2]

すいません。確認(スクリーンショット)をストアアプリでないプロジェクトでしてしまいました。

今度は、きちんとストアアプリで確認しましたがFontSizeに単位"pt"や"px"を付けると波線で怒られますね。数値で指示しないといけないようです。
Visual StudioのGUIからFontSizeに22ptを指示すると、コードでは
「FontSize="29.333"」が入りました。この値の指定で正しいのではと思えます。

また、" "(半角スペース)のみのTextBlockを同様に配置したところ間隔が詰まりました。

完全な答えになっていなくて申し訳ないのですが、以下で多少の改善がみられました。
-----
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock x:Name="tb1" FontSize="29.333" Text="左 中央 右" Margin="0,0,0,0"/>
</StackPanel>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,25,0,0">
<TextBlock x:Name="tb21" FontSize="29.333" Text="左"/>
<TextBlock x:Name="tb22" FontSize="29.333" Text="_" Opacity="0"/>
<TextBlock x:Name="tb23" FontSize="29.333" Text="中央"/>
<TextBlock x:Name="tb24" FontSize="29.333" Text="_" Opacity="0"/>
<TextBlock x:Name="tb25" FontSize="29.333" Text="右"/>
</StackPanel>
-----
" "(半角スペース)では、詰められてしまうので"_"(アンダーバー)を指定してOpacityで見えなくする。

こうすると、下段(文字を分解)した方が上段よりも幅が広がってしまいます。
広がる原因はきっと、TextBlockコントロールの縁だと思います。

期待するような配置を実現するには
TextBlockのWidthに直接、「半角スペースの幅ーTextBlockの縁の幅×2」を指示する必要があるのだろうと思えました。

今の知識だと即答ができないのですが
(1)FontSizeが22ptの"_"が入ったTextBlockを透明にして配置(ダミー)
(2)Formがロードされた時にダミーの幅を取得
(3)取得した幅からTextBlockの縁を引いて、対象のTextBlockのWidthに値を設定
のような流れを取ると、きれいに配置できそうです。
# きれいな方法ではないかも知れませんが。。

[sgr-2]

レイアウト上、「半角スペース部分のFontSizeは変わる事がない」と決められるなら

<TextBlock x:Name="tb" FontSize="29.333" Text=" " Width="9.5"/>

のように、あらかじめ幅を求めておいて直接指示するのはアリだと思います。
# もろもろの小細工が不要になるので

[b1ackc0ffee]

sgr-2さん

たくさん、アイディアを出して下さり有難うございます！
Visibility="Collapsed"は知っていましたが、Opacity="0"は知らなかったので勉強になりました★
あと、 Width="数字"でも感覚を空けることができました！正確な幅がわかっているときは、こちらを使おうと思います！！
有難うございました(^^♪！！

Answer 3

こんにちは。

試していないのですが、以下はどうでしょうか？

<Grid >
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
       <TextBlock x:Name="1" Text="左" />
       <TextBlock x:Name="2" Text=" " FontSize="22pt" />
       <TextBlock x:Name="3" Text="中  央" />
   </StackPanel>
</Grid>

Comments

[b1ackc0ffee]

コメントありがとうございます。

トライしてみましたが、
Input string was not in a correct format
という波線エラーがでております。

[daichan]

ストアアプリだと、ピクセルサイズしか指定できないみたいですね。
失礼しました。

コンバータを使って、ポイントからピクセルサイズに変換すればよさそうです。
以下のサイトを参考にしてみてください。
http://d.hatena.ne.jp/Yamaki/20091215/1260947088

[b1ackc0ffee]

初回答だったんですね、感謝です★

そうなんですよ。
波線エラー出てますが、表示は正確にされていますね。
ビルドはできないかと思いますが；
プロパティボックスでは、ptで表示されてますが、xamlではpxで認識されていますね＞＜、ややこしい。

私、ストアアプリ以外にどんな種類があるか知らないレベルですが、使いこなしていきたいです。
リンク有難うございます。

[daichan]

xml:space="preserve"を入れたら変わりますか？

<TextBlock x:Name="tb324" xml:space="preserve" FontSize="22px" Text="　　　　　　　　　　　　　　　　　　　　"/>

[b1ackc0ffee]

変化なしでした＞＜、