TextBlock内のテキストに垂直方向の中央揃えを割り当てるにはどうすればよいですか?TextAlignmentプロパティが見つかりましたが、これは水平方向のテキスト配置用です。テキストの垂直方向の配置を行うにはどうすればよいですか?
16 に答える
テキストブロック自体は垂直方向の配置を行うことができません
私が見つけたこれを行うための最良の方法は、テキストブロックを境界線の内側に配置することです。これにより、境界線が自動的に位置合わせを行います。
<Border BorderBrush="{x:Null}" Height="50">
<TextBlock TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Center"/>
</Border>
注:これは、グリッドを使用することと機能的に同等です。どちらがより適切かについて、コントロールをレイアウトの残りの部分にどのように適合させるかによって異なります。
Orion Edwards Answerはどのような状況でも機能しますが、これを行うたびに境界線を追加して境界線のプロパティを設定するのは面倒な場合があります。もう1つの簡単な方法は、テキストブロックのパディングを設定することです。
<TextBlock Height="22" Padding="3" />
TextBlockは、垂直方向のテキスト配置をサポートしていません。
これを回避するには、テキストブロックをグリッドでラップし、HorizontalAlignment="Stretch"とVerticalAlignment="Center"を設定します。
このような:
<Grid>
<TextBlock
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Text="Your text" />
</Grid>
textblockの代わりにlabelを使用できます。
<Label Content="Hello, World!">
<Label.LayoutTransform>
<RotateTransform Angle="270"/>
</Label.LayoutTransform>
</Label>
TextBlock
コンテンツの垂直方向の配置はサポートされていません。使用する必要がある場合はTextBlock
、親に対して位置合わせする必要があります。
ただし、代わりに使用できる場合Label
(および、非常に類似した機能を備えている場合)、テキストコンテンツを配置できます。
<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
I am centred text!
</Label>
はLabel
デフォルトで境界を埋めるために伸びます。つまり、ラベルのテキストは中央に配置されます。
テキストを折り返すことなく実行できる場合は、TextBlockをLabelに置き換えることがこれを行う最も簡潔な方法だと思います。それ以外の場合は、他の有効な回答の1つに従ってください。
<Label Content="Some Text" VerticalAlignment="Center"/>
私にとっては、VerticalAlignment="Center"
この問題を修正します。
これはTextBlock
、がグリッドにラップされていることが原因である可能性がありますが、実際にはすべてがwpfに含まれています。
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"
テキストボックスのスタイル(例:)を変更してからcontroltemplate
、PART_ContentHost
垂直方向の配置を中央に変更すると、うまくいくことがわかりました。
笑いのためだけに、このXAMLに旋風を巻き起こしてください。「配置」ではないため、完全ではありませんが、段落内のテキストの配置を調整できます。
<TextBlock>
<TextBlock BaselineOffset="30">One</TextBlock>
<TextBlock BaselineOffset="20">Two</TextBlock>
<Run>Three</Run>
<Run BaselineAlignment="Subscript">Four</Run>
</TextBlock>
TextBlockの高さを見落とすことができる場合は、これを使用することをお勧めします。
<TextBlock Height="{Binding}" Text="Your text"
TextWrapping="Wrap" VerticalAlignment="Center" Width="28"/>
私はそれを少し違うやり方でやらなければならなかったことがわかりました。私の問題は、フォントサイズを変更すると、テキストが下に留まらず、テキストボックス内で上に移動し、残りのテキストボックスがその行に表示されることでした。頂点の配置を上から下に変更することで、プログラムでフォントをサイズ20からサイズ14に変更し、テキストの重力を下に保ち、物事をきれいに保つことができました。方法は次のとおりです。
@Orion Edwardsによって提供された答えを拡張するために、これは、コードビハインド(スタイルが設定されていない)から完全に行う方法です。基本的に、子がTextBoxに設定されているBorderから継承するカスタムクラスを作成します。以下の例では、1行だけが必要であり、境界線がCanvasの子であると想定しています。また、境界線の幅に基づいて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;
}
}
}
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>
中央揃えのテキストブロックに到達するための簡単で迅速な方法として、境界線と背景のないテキストボックスを使用するのが賢明だと思います
<TextBox
TextWrapping="Wrap"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="{x:Null}"
BorderBrush="{x:Null}"
/>
<TextBox AcceptsReturn="True"
TextWrapping="Wrap"
VerticalContentAlignment="Top" >
</TextBox>