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

我建議你應該創建一個用戶控件並重用它。 但是，要直接回答問題，需要將“列”和“行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 });