XAML 和 C# 代码背后的 UI 区别

Question

我在 XAML 中构建了一个 UI 块，它将代表可自定义的网页测试自动化。到目前为止没有问题。 我现在正在尝试将这些 UI 元素从 XAML 转换为后面的 C# 代码，这样我就可以动态生成 UI 块，并且有一些我无法解释的差异：从后面的代码生成时没有显示几个元素。

对比截图：

XAML 代码：

<StackPanel x:Name="TestPanel" Orientation="Vertical" Grid.RowSpan="2">
    <Grid Margin="0,20,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <CheckBox Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="10,0,0,0">Page link here</CheckBox>
        <TextBlock Grid.Column="2" Grid.Row="0" Margin="0,0,10,0">Status here</TextBlock>
        <CheckBox Grid.Column="0" Grid.Row="1" Margin="30,8,0,0">Url to check:</CheckBox>
        <TextBox Grid.Column="1" Grid.Row="1" Margin="5,5,5,0">Url here</TextBox>
        <TextBlock Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" Margin="0,0,10,0">Status here</TextBlock>
        <CheckBox Grid.Column="0" Grid.Row="2" Margin="30,8,0,0">Text to check:</CheckBox>
        <TextBox Grid.Column="1" Grid.Row="2" Margin="5,5,5,0">Text here</TextBox>
        <TextBlock Grid.Column="2" Grid.Row="2" VerticalAlignment="Center" Margin="0,0,10,0">Status here</TextBlock>
    </Grid>
</StackPanel>

后面的C#代码：

public partial class MainWindow : Window
{        
    public MainWindow()
    {
        InitializeComponent();
        new Test(this);
    }
}

public class Test
{
    public MainWindow Window { get; set; }

    public Grid Grid { get; set; }

    public CheckBox PageCB { get; set; }
    public TextBlock PageStatus { get; set; }

    public CheckBox UrlCB { get; set; }
    public TextBox UrlTB { get; set; }
    public TextBlock UrlStatus { get; set; }

    public CheckBox TextCB { get; set; }
    public TextBox TextTB { get; set; }
    public TextBlock TextStatus { get; set; }

    public Test(MainWindow window)
    {
        this.Window = window;

        this.Grid = new Grid();
        this.Grid.Margin = new Thickness(0, 20, 0, 0);

        // Columns
        this.Grid.ColumnDefinitions.Add(new ColumnDefinition());

        ColumnDefinition col = new ColumnDefinition();
        col.Width = new GridLength(100, GridUnitType.Star);
        this.Grid.ColumnDefinitions.Add(col);

        this.Grid.ColumnDefinitions.Add(new ColumnDefinition());

        // Rows
        this.Grid.RowDefinitions.Add(new RowDefinition());
        this.Grid.RowDefinitions.Add(new RowDefinition());
        this.Grid.RowDefinitions.Add(new RowDefinition());

        // Elements
        this.PageCB = new CheckBox();
        this.PageCB.Margin = new Thickness(10, 0, 0, 0);
        this.PageCB.Content = "Page link here";
        Grid.SetColumn(this.PageCB, 0);
        Grid.SetRow(this.PageCB, 0);
        Grid.SetColumnSpan(this.PageCB, 2);
        this.Grid.Children.Add(this.PageCB);

        this.PageStatus = new TextBlock();
        this.PageStatus.Margin = new Thickness(0, 0, 10, 0);
        this.PageStatus.Text = "Status here";
        Grid.SetColumn(this.PageStatus, 2);
        Grid.SetRow(this.PageStatus, 0);
        this.Grid.Children.Add(this.PageStatus);

        this.UrlCB = new CheckBox();
        this.UrlCB.Margin = new Thickness(30, 8, 0, 0);
        this.UrlCB.Content = "Url to check:";
        Grid.SetColumn(this.UrlCB, 0);
        Grid.SetRow(this.UrlCB, 1);
        this.Grid.Children.Add(this.UrlCB);

        this.UrlTB = new TextBox();
        this.UrlTB.Margin = new Thickness(5, 5, 5, 0);
        this.UrlTB.Text = "Url here";
        Grid.SetColumn(this.UrlTB, 1);
        Grid.SetRow(this.UrlTB, 1);
        this.Grid.Children.Add(this.UrlTB);

        this.UrlStatus = new TextBlock();
        this.UrlStatus.Margin = new Thickness(0, 0, 10, 0);
        this.UrlStatus.Text = "Status here";
        Grid.SetColumn(this.UrlStatus, 2);
        Grid.SetRow(this.UrlStatus, 1);
        this.Grid.Children.Add(this.UrlStatus);

        this.TextCB = new CheckBox();
        this.TextCB.Margin = new Thickness(30, 8, 0, 0);
        this.TextCB.Content = "Text to check:";
        Grid.SetColumn(this.TextCB, 0);
        Grid.SetRow(this.TextCB, 2);
        this.Grid.Children.Add(this.TextCB);

        this.TextTB = new TextBox();
        this.TextTB.Margin = new Thickness(5, 5, 5, 0);
        this.TextTB.Text = "Text here";
        Grid.SetColumn(this.TextTB, 1);
        Grid.SetRow(this.TextTB, 2);
        this.Grid.Children.Add(this.TextTB);

        this.TextStatus = new TextBlock();
        this.TextStatus.Margin = new Thickness(0, 0, 10, 0);
        this.TextStatus.Text = "Status here";
        Grid.SetColumn(this.TextStatus, 2);
        Grid.SetRow(this.TextStatus, 2);
        this.Grid.Children.Add(this.TextStatus);

        this.Window.TestPanel.Children.Add(this.Grid);
    }
}

谢谢

Answer 1

我赞同您应该创建一个用户控件并重用它的建议。但是，要直接回答问题，您需要将 Column 和 Row Width 和 Height 属性设置为 Auto。

// Columns
this.Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });

ColumnDefinition col = new ColumnDefinition();
col.Width = new GridLength(100, GridUnitType.Star);
this.Grid.ColumnDefinitions.Add(col);

this.Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });

// Rows
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

Answer 2

问题是您没有设置布局网格内列的高度或行和宽度。默认高度/宽度不是自动的，而是 * 大小。

所以这段代码：

        // Columns
    this.Grid.ColumnDefinitions.Add(new ColumnDefinition());

    ColumnDefinition col = new ColumnDefinition();
    col.Width = new GridLength(100, GridUnitType.Star);
    this.Grid.ColumnDefinitions.Add(col);

    this.Grid.ColumnDefinitions.Add(new ColumnDefinition());

    // Rows
    this.Grid.RowDefinitions.Add(new RowDefinition());
    this.Grid.RowDefinitions.Add(new RowDefinition());
    this.Grid.RowDefinitions.Add(new RowDefinition());

应该是：

// Columns
this.Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
this.Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100, GridUnitType.Star) });
this.Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });

// Rows
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
this.Grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });