WPF文本框和标签重叠

问题描述：

我正在学习Visual Studio 2013上的WPF（Windows Presentation Foundation）。我有一个元素布局的问题。我正在使用堆叠面板和网格用于元素布局。这里是我所创建的简单布局：WPF文本框和标签重叠

... 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>

的问题是，所有元素（标签，文本框..）彼此重叠，为什么它们不是定位像堆栈（一个接一个）？

因为你的网格没有行，你依靠你的高度，边距和路线来放置你的元素，如果你想要“堆栈”元素将它们放入一个'StackPanel'而不是'Grid' – 2014-09-04 23:53:06

答

如果您正在使用网格布局，则需要定义行和列。如果你没有定义它们，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>

这将是这样的：

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

还要记住枚举是基于零的（第一行实际上是0）。

WPF文本框和标签重叠

相关推荐