添加第二个TextBox后,TextBox会更改其位置

时间:2017-04-23 03:33:14

标签: c# wpf xaml

我的Xaml代码:

 <Grid>
    <Grid.Background>
        <ImageBrush ImageSource="background.jpg"/>
    </Grid.Background>

    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="52" Margin="10,10,0,0" TextWrapping="Wrap" Text="Welcome to University Portal" VerticalAlignment="Top" Width="456" FontSize="24" FontWeight="Bold" FontStyle="Italic" FontFamily="SimSun" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Height="17" Margin="10,62,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="456"  FontWeight="Bold" FontStyle="Italic" FontFamily="SimSun"><Run Text=" * Select your Domain."/></TextBlock>
    <Button x:Name="teacher_btn" Content="Teacher" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="50" Margin="10,89,0,0"  FontFamily="SimSun" FontSize="22" FontWeight="Bold" FontStyle="Italic" Click="teacher_btn_Click">
        <Button.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Button.BorderBrush>
        <Button.Background>
            <ImageBrush/>
        </Button.Background>
    </Button>
    <Button x:Name="student_btn" Content="Student" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="165,89,0,0" Height="50" FontFamily="SimSun" FontSize="22" FontWeight="Bold" FontStyle="Italic" Click="student_btn_Click">
        <Button.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Button.BorderBrush>
        <Button.Background>
            <ImageBrush/>
        </Button.Background>
    </Button>

    <Button x:Name="exit_btn" Content="Exit" VerticalAlignment="Top" Margin="320,89,0,0" Height="50" FontWeight="Bold" FontStyle="Italic" FontSize="22" FontFamily="SimSun" HorizontalAlignment="Left" Width="150" Click="exit_btn_Click">
        <Button.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Button.BorderBrush>
        <Button.Background>
            <ImageBrush/>
        </Button.Background>
    </Button>


    <Grid Name="container" Margin="10,144,0,0" Height="auto" Width="auto" VerticalAlignment="Top" HorizontalAlignment="Left" />

</Grid>

我有一个Grid控件,我必须动态添加几个TextBox。它适用于单个TextBox,但是当我添加第二个TextBox时,首先改变它的位置。并且在添加Button之后,TextBox都改变了他们的位置。这是我的代码。

            TextBlock name_block = new TextBlock();
            name_block.Text = "Enter your ID : ";
            name_block.Margin = new Thickness(5, 8, 0, 0);
            container.Children.Add(name_block);

            TextBox name_box = new TextBox();
            name_box.Width = 200;
            name_box.Height = 25;
            name_box.Margin = new Thickness(150, 5, 1, 1);
            container.Children.Add(name_box);


            TextBlock pass_block = new TextBlock();
            pass_block.Text = "Enter your password : ";
            pass_block.Margin = new Thickness(5, 78, 0, 0);
            container.Children.Add(pass_block);

            PasswordBox pass_box = new PasswordBox();
            pass_box.Width = 200;
            pass_box.Height = 25;
            pass_box.Margin = new Thickness(150, 75, 0, 0);
            container.Children.Add(pass_box);

            Button login_btn = new Button();
            login_btn.Content = "Login";
            login_btn.Height = 25;
            login_btn.Margin = new Thickness(150, 150, 0, 0);
            container.Children.Add(login_btn);

            login_btn.Click += Teacher_Login_btn_Click;

附上输出图片:name_box should be in the front of name_block

1 个答案:

答案 0 :(得分:1)

更新的答案:

好的,您需要在文本块中添加3个元素,并在密码框中调整边距。

需要将宽度分配给文本块,但您可能会遇到默认文本块行为设置水平对齐可能是中心,因此您还需要将其设置为.Left。

然后在您的密码框中调整您的保证金,这样它就不会被推到另一条线上,您应该做得很好,因为我已经通过上述更新进行了测试以确认。

这就是为什么以下示例更容易使用,在更新背后的代码上设置边距是一个巨大的麻烦。

通过根据需要设置列和行以及可见性来改进设计器中的布局选项:

使用列和行设置网格,并使用大小调整来处理布局。然后你的边距可以在你需要的时候保持差距。

然后,您可以使用列和行放置容器网格并布置XAML并将网格设置为折叠或隐藏(根据您的需要)。然后在按钮上单击,您可以更改可见性,而不是以编程方式添加元素。

以下是经过编辑的版本:(顶部网格确实不需要分配的列,但要遵循流程)

<Grid> <!--Notice I added columns and rows to set layout instead of relaying on your margins-->
        <Grid.Background>
            <ImageBrush ImageSource="background.jpg" Opacity="75"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="75"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="textBlock" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left"  Height="52" Margin="10,10,0,0" TextWrapping="Wrap" Text="Welcome to University Portal" VerticalAlignment="Top" Width="456" FontSize="24" FontWeight="Bold" FontStyle="Italic" FontFamily="SimSun" TextAlignment="Center"/>
        <TextBlock x:Name="textBlock_Copy"  Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Height="17" Margin="5,5,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="456"  FontWeight="Bold" FontStyle="Italic" FontFamily="SimSun"><Run Text=" * Select your Domain."/></TextBlock>
        <Button x:Name="teacher_btn" Grid.Column="0" Grid.Row="2" Content="Teacher" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="50" Margin="10,9,0,0"  FontFamily="SimSun" FontSize="22" FontWeight="Bold" FontStyle="Italic" Click="teacher_btn_Click">
            <Button.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Button.BorderBrush>
            <Button.Background>
                <ImageBrush/>
            </Button.Background>
        </Button>
        <Button x:Name="student_btn" Grid.Column="0" Grid.Row="2" Content="Student" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="165,9,0,0" Height="50" FontFamily="SimSun" FontSize="22" FontWeight="Bold" FontStyle="Italic" Click="student_btn_Click">
            <Button.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Button.BorderBrush>
            <Button.Background>
                <ImageBrush/>
            </Button.Background>
        </Button>
        <Button x:Name="exit_btn" Grid.Column="0" Grid.Row="2" Content="Exit" VerticalAlignment="Top" Margin="320,9,0,0" Height="50" FontWeight="Bold" FontStyle="Italic" FontSize="22" FontFamily="SimSun" HorizontalAlignment="Left" Width="150" Click="exit_btn_Click">
            <Button.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Button.BorderBrush>
            <Button.Background>
                <ImageBrush/>
            </Button.Background>
        </Button>
        <!--Build out the grid and set it to collapsed to give back the space or Hidden if you want to keep the space-->
        <Grid Name="container" Grid.Column="0" Grid.Row="3"  Height="auto" Width="auto" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="75*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Label x:Name="lblID" Content="Enter your ID: " Grid.Column="0" Grid.Row="0" Margin="5,25,45,4"/>
            <Label x:Name="lblPW" Content="Enter your Password: " Grid.Column="0" Grid.Row="1" Margin="5,4,45,25"/>
            <TextBox x:Name="txtbxUserID" Grid.Column="1" Grid.Row="0" Width="200" Height="25" Margin="25,25,25,4"/>
            <PasswordBox x:Name="txtbxPW" Grid.Column="1" Grid.Row="1" Width="200" Height="25" Margin="25,4,25,25"/>
        </Grid>
    </Grid>