web-dev-qa-db-ja.com

WPF：ラベルとそのTextBoxのベースラインを揃える

ラベルの横に単純なTextBoxがあるとします。

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label Margin="3">MyLabel</Label>
        <TextBox Margin="3" Width="100">MyText</TextBox>
    </StackPanel>
    ...
</StackPanel>

これにより、次の結果が得られます。

result

ご覧のとおり、MyLabelとMyTextのベースラインが揃っていないため、見苦しく見えます。もちろん、マージンが一致するまでマージンを試してみることができますが、これは非常に一般的な要件であるため、WPFがはるかに簡単でエレガントなソリューションを提供することを確信しています。

wpflayoutalignmentbaseline
32
Heinzi

この動作は、TextBoxがデフォルトでStretchの垂直方向の配置に設定されているために発生すると考えられます。 。代わりにこれを使用する場合：

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label >MyLabel</Label>
        <TextBox VerticalAlignment="Center" Width="100">MyText</TextBox>
    </StackPanel>
</StackPanel>

...よりクリーンな結果が表示されます。

34
Dan Puzey

どう思いますか？

alt text

<StackPanel Orientation="Horizontal">
        <Label Margin="3" VerticalContentAlignment="Center">MyLabel</Label>
        <TextBox Margin="3" VerticalContentAlignment="Center" Width="100">MyText</TextBox>
 </StackPanel>
20
Marcote

私はKaxamlでその外観を達成しました：

<StackPanel Orientation="Horizontal">
  <Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
  <TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>
4
user7116

これは古い答えであることはわかっていますが、固定テキストボックスの幅に依存する必要がない、別の方法を求める人のための例を次に示します。

StackPanelの代わりに、DockPanelと.Dockを使用します。

これはグリッド内で使用すると非常に便利です。

<DockPanel Grid.Column="2" Grid.Row="2">
     <Label Content="SomeTitle:" DockPanel.Dock="Left"></Label>
     <TextBox x:Name="SomeValueTextBox" VerticalAlignment="Center" DockPanel.Dock="Right"></TextBox>
</DockPanel>

Result

2
Kristian