回复信息的效果

34-StackPanel布局-回复信息的效果

我们的这个 StackPanel 是一个流水型的布局，它只能是一条线的排列，要么垂直排，要么水平排列。我们做一个信息回复的效果，然后在下面的文本框输入文本后，按回车就回复到上面的 TextBlock 里面。

堆放布局StackPanel

堆放布局 StackPanel 的方式是将子元素排列成一行，可以沿着水平或者垂直方向。通过设置 Orientation 属性来设置水平或者竖着方向。

• Orientation=”Horizontal” 表示水平方向排放
• Orientation=”Vertical” 表示沿着垂直方向放置里面的子元素

默认是 Vertical。

1. 垂直布局

设置 Orientation=”Vertical” 或者默认不设置 Orientation 属性。

练一练

<StackPanel Orientation="Vertical" Background="Black">
    <TextBlock
        x:Name="textblock"
        Height="200"
        Margin="30"
        FontSize="30"
        Foreground="#FFFCFCFC"
        Text=""/>
    <TextBox
        Name="textbox"
        Height="60"
        Margin="30"
        KeyDown="TextBox_KeyDown"/>
</StackPanel>Code language: HTML, XML (xml)

private void TextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
    this.textblock.Text = this.textbox.Text;
}Code language: JavaScript (javascript)