WPF TextBlockのテキストの垂直方向の配置


228

TextBlock内のテキストに垂直方向の中央揃えを割り当てるにはどうすればよいですか?TextAlignmentプロパティを見つけましたが、それは水平方向のテキスト配置用です。垂直方向のテキストの配置を行うにはどうすればよいですか?


@shrおよびその他:TextAlignment水平方向の配置にのみ影響し、垂直方向の配置には影響しないことに注意してください(質問が言及するとおり)。
Drew Noakes、2015

回答:


284

Textblock自体は垂直方向の配置を行うことができません

私が見つけたこれを行う最良の方法は、テキストブロックを境界線の内側に置くことです。そうすることで、境界線が配置されます。

<Border BorderBrush="{x:Null}" Height="50">
    <TextBlock TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Center"/>
</Border>

注:これはグリッドを使用することと機能的に同等です。どのコントロールがより適切であるかについて、コントロールをレイアウトの他の部分とどのように合わせるかによって異なります。


22
+1垂直方向の配置を有効にするには、境界線の高さを設定する必要があります。
Tim Lloyd

21
また、TextBlockには高さを指定できません。または、垂直に中央揃えされません。
pearcewg 2010

20
@gav-TextAlignmentは水平方向の配置のみを行います...質問は垂直方向の配置に関するものです
Orion Edwards

@TimLloyd-それが常に正しいかどうかはわかりません。私はこの設定を取得しました。境界線の高さは「自動」で、正常に機能しています。スター付きの行の高さ(および行内の他のもの)を持つグリッドセルにあります。
Bob Sammers

97

一方でオリオンエドワーズの回答がどのような状況のために働く、境界線を追加し、境界線の性質にあなたがこれをしたいすべての時間を設定するには、痛みかもしれません。別の簡単な方法は、テキストブロックのパディングを設定することです。

<TextBlock Height="22" Padding="3" />

11
これが最も素晴らしい答えだと思います。
Boppity Bop 2011

1
これは、フォントのサイズが16pxの場合にのみ機能します!?
C4d

1
受け入れられた回答は、TextBoxの実際の境界線を正しく垂直方向に揃えますが、内部の実際のテキストに影響を与えるようには見えません...これはOPの意図はかなり確かです。このソリューションは、適切なTextVerticalAlignmentプロパティの代わりに機能し、私の賛成票を取得します。:)
Trekkie、

ブロック内の動的コンテンツはどうですか、2行または5行は異なるパディングを必要としません。また、10pt対24ptフォント
Reahreic

57

TextBlockは、垂直方向のテキスト配置をサポートしていません。

この問題を回避するには、テキストブロックをグリッドで囲み、Horizo​​ntalAlignment = "Stretch"およびVerticalAlignment = "Center"を設定します。

このような:

<Grid>
    <TextBlock 
        HorizontalAlignment="Stretch"
        VerticalAlignment="Center"
        Text="Your text" />
</Grid>

+1ボーダーベースのアプローチのように、グリッドの高さを設定する必要すらありません。
エフランコビシ

このアプローチが私にとって最も効果的であることがわかりました。内にオーバーレイTextBlockして動的インジケーターライトを作成しEllipseていGridます。幅と高さのプロパティをバインドしたり、トリッキーなことをしたりする必要はありません。
水田

17

テキストブロックの代わりにラベルを使用できます。

<Label Content="Hello, World!">
    <Label.LayoutTransform>
        <RotateTransform Angle="270"/>
    </Label.LayoutTransform>
</Label>

3
いいですね、LabelにはVerticalContentAlignmentがあります。グリート。+1
イグナシオソレルガルシア

3
OPがTextBlockを使用する必要があるかどうか、またはラベルを回避できるかどうかは不明です。ラベルの使用は私が必要とするもののために働きました。+1
Steve Kalemkiewicz

19
これは、垂直方向の配置を適用する方法ではなく、垂直方向のテキストを生成する方法の質問に答えます!
Sebastian Negraszus

26
この質問は、メタ上で議論されている:meta.stackoverflow.com/questions/305572/...
NathanOliver

6

テキストの折り返しなしで実行できる場合は、TextBlockをLabelに置き換えるのが最も簡単な方法だと思います。それ以外の場合は、他の有効な回答のいずれかに従ってください。

<Label Content="Some Text" VerticalAlignment="Center"/>

6

TextBlockコンテンツの垂直方向の配置はサポートされていません。使用する必要がある場合はTextBlock、親に対して配置する必要があります。

ただし、Label代わりに使用できる場合(および機能が非常に似ている場合)、テキストコンテンツを配置できます。

<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
   I am centred text!
</Label>

Labelラベルのテキストが中央に表示されますつまり、デフォルトではその境界を埋めるためにストレッチします。


3

私にとって、VerticalAlignment="Center"この問題は修正されました。
これはTextBlockグリッドがグリッドでラップされていることが原因である可能性がありますが、実際にはすべてがwpfでラップされています。


1

テキストボックスのスタイル(例:)controltemplateを変更し、PART_ContentHost垂直方向の配置を中央に変更すると、うまくいくことがわかりました


OPはTextBlocksについて質問しています。彼らはControlTemplatesを持っていません。
ANeves

1

ちょっと笑って、このXAMLを試してみてください。「配置」ではないため、完全ではありませんが、段落内のテキストの配置を調整できます。

<TextBlock>
    <TextBlock BaselineOffset="30">One</TextBlock>
    <TextBlock BaselineOffset="20">Two</TextBlock>  
    <Run>Three</Run>            
    <Run BaselineAlignment="Subscript">Four</Run>   
</TextBlock>

1

TextBlockの高さを見落とす可能性がある場合は、これを使用することをお勧めします。

<TextBlock Height="{Binding}" Text="Your text"
TextWrapping="Wrap" VerticalAlignment="Center" Width="28"/>

1

私の場合、これはTextBlock表示をより良くするために行いました。

<Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2"
    HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="150">
        <TextBlock FontSize="20" Height="23" HorizontalAlignment="Left" Margin="0,0,0,-5" Text="" VerticalAlignment="Top" Width="141" Background="White" />
</Border>

下からテキストを作成するコツは設定することです

Margin="0,0,0,-5"


0

少し違う方法でやらなければならないことがわかりました。私の問題は、フォントサイズを変更した場合、テキストが下部に留まり、残りのテキストボックスが行に表示されるのではなく、テキストボックス内で上に移動することでした。vertの配置を上から下に変更することで、フォントをプログラムでサイズ20からサイズ14に変更し、テキストの重力を下に保ち、物事をきれいに保つことができました。方法は次のとおりです。

ここに画像の説明を入力してください


0

垂直に配置された単一行のTextBox。

@Orion Edwardsによって提供された答えを拡張するには、これは分離コード(スタイルセットなし)から完全に実行する方法です。基本的に、子がTextBoxに設定されているBorderから継承するカスタムクラスを作成します。以下の例では、1つの線のみが必要であり、ボーダーはCanvasの子であると想定しています。また、Borderの幅に基づいてTextBoxのMaxLengthプロパティを調整する必要があると想定しています。以下の例では、境界線のカーソルをタイプ 'IBeam'に設定して、テキストボックスを模倣するように設定しています。TextBoxが境界線の左側に完全に揃わないように、マージン「3」が設定されています。

double __dX = 20;
double __dY = 180;
double __dW = 500;
double __dH = 40;
int __iMaxLen = 100;

this.m_Z3r0_TextBox_Description = new CZ3r0_TextBox(__dX, __dY, __dW, __dH, __iMaxLen, TextAlignment.Left);
this.Children.Add(this.m_Z3r0_TextBox_Description);

クラス:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;


namespace ifn0tz3r0Exp
{
    class CZ3r0_TextBox : Border
    {
        private TextBox m_TextBox;

        private SolidColorBrush m_Brush_Green = new SolidColorBrush(Colors.MediumSpringGreen);
        private SolidColorBrush m_Brush_Black = new SolidColorBrush(Colors.Black);
        private SolidColorBrush m_Brush_Transparent = new SolidColorBrush(Colors.Transparent);

        public CZ3r0_TextBox(double _dX, double _dY, double _dW, double _dH, int _iMaxLen, TextAlignment _Align)
        {

            /////////////////////////////////////////////////////////////
            //TEXTBOX
            this.m_TextBox = new TextBox();
            this.m_TextBox.Text = "This is a vertically centered one-line textbox embedded in a border...";
            Canvas.SetLeft(this, _dX);
            Canvas.SetTop(this, _dY);
            this.m_TextBox.FontFamily = new FontFamily("Consolas");
            this.m_TextBox.FontSize = 11;
            this.m_TextBox.Background = this.m_Brush_Black;
            this.m_TextBox.Foreground = this.m_Brush_Green;
            this.m_TextBox.BorderBrush = this.m_Brush_Transparent;
            this.m_TextBox.BorderThickness = new Thickness(0.0);
            this.m_TextBox.Width = _dW;
            this.m_TextBox.MaxLength = _iMaxLen;
            this.m_TextBox.TextAlignment = _Align;
            this.m_TextBox.VerticalAlignment = System.Windows.VerticalAlignment.Center;
            this.m_TextBox.FocusVisualStyle = null;
            this.m_TextBox.Margin = new Thickness(3.0);
            this.m_TextBox.CaretBrush = this.m_Brush_Green;
            this.m_TextBox.SelectionBrush = this.m_Brush_Green;
            this.m_TextBox.SelectionOpacity = 0.3;

            this.m_TextBox.GotFocus += this.CZ3r0_TextBox_GotFocus;
            this.m_TextBox.LostFocus += this.CZ3r0_TextBox_LostFocus;
            /////////////////////////////////////////////////////////////
            //BORDER

            this.BorderBrush = this.m_Brush_Transparent;
            this.BorderThickness = new Thickness(1.0);
            this.Background = this.m_Brush_Black;            
            this.Height = _dH;
            this.Child = this.m_TextBox;
            this.FocusVisualStyle = null;
            this.MouseDown += this.CZ3r0_TextBox_MouseDown;
            this.Cursor = Cursors.IBeam;
            /////////////////////////////////////////////////////////////
        }
        private void CZ3r0_TextBox_MouseDown(object _Sender, MouseEventArgs e)
        {
            this.m_TextBox.Focus();
        }
        private void CZ3r0_TextBox_GotFocus(object _Sender, RoutedEventArgs e)
        {
            this.BorderBrush = this.m_Brush_Green;
        }
        private void CZ3r0_TextBox_LostFocus(object _Sender, RoutedEventArgs e)
        {
            this.BorderBrush = this.m_Brush_Transparent;
        }
    }
}

0

Label(またはTextBlock)をLabelに使用する方が良いと思います。ボーダーコントロールに直接マウスイベントをアタッチすることはできません。最終的にはTextBlockにアタッチされます。これが私の推奨事項です。

<Label 
    Height="32"
    VerticalContentAlignment="Center"
    HorizontalContentAlignment="Stretch"
    MouseLeftButtonUp="MenuItem_MouseLeftButtonUp">
    <TextBlock Padding="32 0 10 0">
        Label with click event
    </TextBlock>
</Label>

0

中央揃えのテキストブロックに到達する簡単かつ迅速な方法として、境界線と背景のないテキストボックスを使用するのが賢明だと思います

<TextBox
TextWrapping="Wrap"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="{x:Null}"
BorderBrush="{x:Null}"
/>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.