XAML 文本框和文本块无法对齐

zxlwwiss 于 11个月前发布在其他

关注(0)|答案(2)|浏览(108)

我现在正在练习xaml，我打算用textbox和textblock做一个简单的菜单。
当我把textblock或textbox拖到画布上时，它看起来很好。但是在我运行程序后，它就不好了。我以为是因为边距部分，但是两个小时后，事实证明不是。
我错过了什么？editing view after run view

<Page
    x:Class="newPrac.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:newPrac"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <ComboBox x:Name="comboBox" Margin="218,56,0,0" Width="111" Height="42">
            <ComboBoxItem Content="Noodle"/>
            <ComboBoxItem Content="Rice"/>
            <ComboBoxItem Content="Burger"/>
            <ComboBoxItem Content="Pizza"/>
        </ComboBox>
        <TextBlock x:Name="textCompany" Margin="57,110,1114,571" TextWrapping="Wrap" Text="2" FontSize="18"/>
        <TextBlock x:Name="textFrom" Margin="57,190,1127,486" TextWrapping="Wrap" Text="4" FontSize="18" />
        <TextBlock x:Name="textBlock" Margin="58,290,1136,388" TextWrapping="Wrap" Text="6" FontSize="18"/>
        
        <TextBox x:Name="textBox" Margin="41,55,1139,622" TextWrapping="Wrap" Text="1" Width="100"/>
        <TextBox x:Name="textBox1" Margin="229,129,951,547" TextWrapping="Wrap" Text="3" Width="100"/>
        <TextBox x:Name="txt" Margin="229,190,951,485" TextWrapping="Wrap" Text="5" Width="100"/>
        
        <TextBox x:Name="txtWho" Margin="217,290,963,385" TextWrapping="Wrap" Text="TextBox" Width="100"/>
    </Grid>
</Page>

字符串

xaml

来源：https://stackoverflow.com/questions/77377894/textbox-and-textblock-wont-line-up

2条答案

按热度按时间

vnzz0bqm1#

尝试定义你的grid columns and rows，并将单个控件类对象放入其中，而不是松散地拖动它们-它们的对齐可能会受到它们的宽度和位置的阻碍。索引从0开始，看起来像这样：

<Grid>
    <Grid.ColumnDefinitions>
        <!--COLUMN DEFINITIONS (SET SIZE FOR EACH WITH = VALUE, AUTO OR *-->
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <!--ROW DEFINITIONS (SET SIZE FOR EACH WITH = VALUE, AUTO OR *-->
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

字符串
行和列可以适合特定的宽度和/或或者高度，或者可以简单地用Auto表示，以根据包含的控件对象自动调整大小，或者用*填充与程序窗口和定义相比的剩余空间。每个控件对象的行和列可以用Grid.Row="x"或Grid.Column="x"设置，其中x将是行或列编号（同样，索引从0开始）。
此外，您可以将对象 Package 在WrapPanel或StackPanel中，以便将它们集中处理而不是单独处理。

赞(0）回复(0）举报 11个月前

y4ekin9u2#

使用Margin s进行绝对定位是一些所见即所得的设计师在您通过拖放移动控件时所做的事情，这确实是一个坏习惯，破坏了所有合理的布局（我认为Blend和VS-XAML设计器“Cider”也是如此。这就是为什么大多数XAML“作者”更喜欢手动编写标记的原因）。
您正在寻找的似乎是使用Grid.RowDefinitions和Grid.ColumnDefinitions，沿着使用HorizontalAlignment和VerticalAlignment在WPF网格中进行有序和干净的定位，以便在控件的逻辑矩形内进行更崇高的对齐，和Margin精确和像素-精确调整相邻元素在和所有4个ltrb方向上的相对距离。在你的第一张截图中。

<Page x:Class="newPrac.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:newPrac"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.Resources>
            <Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="TextBlock">
                <Setter Property="TextWrapping" Value="Wrap" />
                <Setter Property="FontSize" Value="18" />
                <Setter Property="MinHeight" Value="22" />
                <Setter Property="Margin" Value="8,2,2,2" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="TextBox">
                <Setter Property="TextWrapping" Value="Wrap" />
                <Setter Property="Width" Value="100" />
                <Setter Property="MinHeight" Value="22" />
                <Setter Property="Margin" Value="8,2,2,2" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <Style BasedOn="{StaticResource {x:Type ComboBox}}" TargetType="ComboBox">
                <Setter Property="Width" Value="111" />
                <Setter Property="MinHeight" Value="22" />
                <Setter Property="Margin" Value="8,2,2,2" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBox x:Name="textBox" Grid.Row="0" Grid.Column="0" Text="1" />
        <ComboBox x:Name="comboBox" Grid.Row="0" Grid.Column="1">
            <ComboBoxItem Content="Noodle" />
            <ComboBoxItem Content="Rice" />
            <ComboBoxItem Content="Burger" />
            <ComboBoxItem Content="Pizza" />
        </ComboBox>
        <TextBlock x:Name="textCompany" Grid.Row="1" Grid.Column="0" Text="2" />
        <TextBox x:Name="textBox1" Grid.Row="1" Grid.Column="1" Text="3" />
        <TextBlock x:Name="textFrom" Grid.Row="2" Grid.Column="0" Text="4" />
        <TextBox x:Name="txt" Grid.Row="2" Grid.Column="1" Text="5" />
        <TextBlock x:Name="textBlock" Grid.Row="3" Grid.Column="0" Text="6" />
        <TextBox x:Name="txtWho" Grid.Row="3" Grid.Column="1" Text="7" />
    </Grid>
</Page>

字符串
注意，我把所有TextBox、TextBlock和ComboBox元素的通用样式都放到了un-keyed样式中。这样你只需要调整一个setter，它就可以应用到该类型的所有控件。

赞(0）回复(0）举报 11个月前

我来回答

XAML 文本框和文本块无法对齐

2条答案

相关问题

热门标签

最新问答