XAML和C＃代码之间的UI区别

Question

I have built a UI block in XAML that will represent a customizable web page test automation. No problem so far. I'm now trying to translate these UI elements from XAML to the C# code behind, so I can generate the UI blocks dynamically, and there are differences I can't explain: several element are not displayed when generated from the code behind.

Screenshot for comparison:

XAML code:

<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# code behind:

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);
    }
}

Thanks

Answer 1

I second the suggestion that you should create a User Control and reuse that. However, to answer the question directly, you need to set the Column and Row Width and Height properties to 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

The problem is you arent setting the height or the rows and width of the columns inside your layout grid. The default height/width isnt auto but * size.

So this code:

        // 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());

Should be :

// 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 });