質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • C#

    7066questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • Visual Studio

    1822questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • teratail

    415questions

    teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

  • Visual Studio 2013

    307questions

    Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

  • XAML

    249questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,460

b1ackc0ffee

score 197

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>


下記すべて試しましたがダメでした↓
&nbsp;    ノーブレークスペース
&ensp;    フォントサイズの半分のスペース
&emsp;    フォントサイズのスペース
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でないといけないわけではありません。

宜しくお願い致します。
------------------------------
回答を受けて、試したコードを追記します。
イメージ説明
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+4

こんにちは。

スペース文字コードの回答ではありませんが、
StackPanelの中にTextBlockを配置して文字列を構築するのではなく、
TextBlockの中のRun要素を使うことで1つの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>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/07 13:26

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

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

    キャンセル

  • 2015/09/07 14:01

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

    キャンセル

+1

こんにちは。

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

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/04 17:42

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

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

    キャンセル

  • 2015/09/04 18:01

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

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

    キャンセル

  • 2015/09/04 18:23

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

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

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

    キャンセル

  • 2015/09/04 18:49

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

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

    キャンセル

  • 2015/09/04 19:11

    変化なしでした><、

    キャンセル

+1

こんにちは。

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>

スクリーンショット
イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/04 18:18

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

    さらに比較するために、
    <!--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%の表示です^^

    キャンセル

  • 2015/09/04 19:23

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

    今度は、きちんとストアアプリで確認しましたが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に値を設定
    のような流れを取ると、きれいに配置できそうです。
    # きれいな方法ではないかも知れませんが。。

    キャンセル

  • 2015/09/04 19:44

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

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

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

    キャンセル

  • 2015/09/07 13:38

    sgr-2さん

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


    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    7066questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • Visual Studio

    1822questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • teratail

    415questions

    teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

  • Visual Studio 2013

    307questions

    Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

  • XAML

    249questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。