Question

我正在学习Visual Studio 2013上的WPF（Windows Presentation Foundation）。我遇到了元素布局的问题。我正在使用 stackpanel 和 grid 进行元素布局。这是我创建的简单布局：

... code omitted....

    <StackPanel Style="{StaticResource ersStackPanel}">
        <Grid Style="{StaticResource ersGrid}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="497*"/>
            </Grid.ColumnDefinitions>
            <Label Content="Elector's record scrapper" Style="{StaticResource ersHeadLabel}" />
        </Grid>
        <Grid Style="{StaticResource ersGrid}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150*"/>
                <ColumnDefinition Width="347*"/>
            </Grid.ColumnDefinitions>
            <Label Content="VS" Style="{StaticResource ersLabel}"/>
            <TextBox x:Name="VS" Grid.Column="1" Style="{StaticResource ersTextBox}" />
            <Label Content="EV" Grid.Row="1" Style="{StaticResource ersLabel}"/>
            <TextBox x:Name="EV" Grid.Row="1" Grid.Column="1" Style="{StaticResource ersTextBox}" />
            <Label Content="ENo." Grid.Row="2" Style="{StaticResource ersLabel}"/>
            <TextBox x:Name="ENo" Grid.Row="2" Grid.Column="1" Style="{StaticResource ersTextBox}" />
            <Label Content="Select" Grid.Row="3" Style="{StaticResource ersLabel}"/>
            <ComboBox Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" FontFamily="Verdana" FontSize="10" Background="White"/>
        </Grid>
    </StackPanel>

... code omitted...

样式资源

<Window.Resources>
    <Style x:Key="ersTextBox" BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
        <Setter Property="FontSize" Value="10"></Setter>
        <Setter Property="FontFamily" Value="Verdana"></Setter>
        <Setter Property="FontWeight" Value="Medium"></Setter>
        <Setter Property="Width" Value="250"></Setter>
        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="Height" Value="23"></Setter>
        <Setter Property="TextWrapping" Value="Wrap"></Setter>
    </Style>
    <Style x:Key="ersLabel" BasedOn="{StaticResource {x:Type Label}}" TargetType="{x:Type Label}">
        <Setter Property="FontFamily" Value="Verdana"></Setter>
        <Setter Property="FontSize" Value="10"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"></Setter>
        <Setter Property="HorizontalAlignment" Value="Right"></Setter>
        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="Width" Value="auto"></Setter>
    </Style>
    <Style x:Key="ersHeadLabel" BasedOn="{StaticResource ResourceKey=ersLabel}" TargetType="{x:Type Label}">
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    </Style>
    <Style x:Key="ersStackPanel" TargetType="{x:Type StackPanel}">
        <Setter Property="Width" Value="497"></Setter>
        <Setter Property="Height" Value="44"></Setter>
        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="Margin" Value="0,10,0,0"></Setter>
    </Style>
    <Style x:Key="ersGrid" TargetType="{x:Type Grid}">
        <Setter Property="Height" Value="44"></Setter>
    </Style>
</Window.Resources>

问题是所有元素（Label，TextBox ..）都是相互重叠的，为什么它们不像堆栈那样定位（一个接一个）??

Answer 1

如果使用网格布局，则需要定义行和列。如果你没有定义它们，XAML会将它们叠加在另一个上面。定义的最后一个元素将是可见元素。

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <TextBlock Text="A"/> // The first is assumed that it is Grid.Row="0" Grid.Column="0"
  <TextBlock Grid.Row="0" Grid.Column="1" Text="B"/>
  <TextBlock Grid.Row="1" Grid.Column="0" Text="C"/>
  <TextBlock Grid.Row="1" Grid.Column="1" Text="D"/>
</Grid>

这将是这样的：

A B

C D

在您的代码中，问题是您要将元素设置为第二行，第三行和第四行，但您没有首先定义行。

还要记住，枚举是从零开始的（第一行实际上是0）。

WPF文本框和标签重叠

1 个答案: