wpf xaml to c# isn't the same

Question

I I converted xaml code to C# code because I need to generate the lay-out dynamically... The Xaml code looks like this;

<StackPanel Grid.Row="2" Margin="0,30" x:Name="print_content">
    <TextBlock x:Name="txt_selected_class" Text="KLASSE HIER" />
    <!--Here will the result come-->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{Binding ElementName=pos, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=Nr, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=pilot, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=pilot_club, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=pilot_license, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=navigator, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=navigator_club, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=navigator_license, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_1_tot_gtk, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_1_tot_timecontrol, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_1_tot_control, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_1_distance, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_2_tot_gtk, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_2_tot_timecontrol, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_2_tot_control, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=part_2_distance, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=end_tot_gtk, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=end_tot_dist, Path=ActualWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="{Binding ElementName=end_tot_points, Path=ActualWidth, Mode=OneWay}"/>
        </Grid.ColumnDefinitions>
        <Label Grid.ColumnSpan="5" Grid.Column="8" Content="Deel 1" Style="{StaticResource DGHeaderStyle}" />
        <Label Grid.ColumnSpan="5" Grid.Column="12" Content="Deel 2" Style="{StaticResource DGHeaderStyle}" BorderThickness="1,0,0,0" BorderBrush="AliceBlue" />
        <Label Grid.ColumnSpan="3" Grid.Column="16" Content="Eind" Style="{StaticResource DGHeaderStyle}" BorderThickness="1,0,0,0" BorderBrush="AliceBlue" />
    </Grid>
    <DataGrid x:Name="list_results" IsReadOnly="True" Grid.Row="1" ColumnHeaderStyle="{StaticResource HeaderStyle}" ColumnWidth="Auto" RowBackground="Transparent" Foreground="#fafafa" AlternatingRowBackground="#555a62" Background="Transparent" BorderThickness="0" AutoGenerateColumns="False" RowHeaderWidth="0" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <DataGrid.Columns>
            <DataGridTextColumn x:Name="pos" Header="Pos" />
            <DataGridTextColumn x:Name="Nr" Header="Nr" Binding="{Binding team_number}" />
            <DataGridTextColumn x:Name="pilot" Header="Naam piloot" Binding="{Binding team_data.pilot.firstname}" />
            <DataGridTextColumn x:Name="pilot_club" Header="Club" Binding="{Binding team_data.pilot.club}" />
            <DataGridTextColumn x:Name="pilot_license" Header="Licentie" Binding="{Binding team_data.pilot.license}" />
            <DataGridTextColumn x:Name="navigator" Header="Naam copiloot" Binding="{Binding team_data.navigator.firstname}" />
            <DataGridTextColumn x:Name="navigator_club" Header="Club" Binding="{Binding team_data.navigator.club}" />
            <DataGridTextColumn x:Name="navigator_license" Header="Licentie" Binding="{Binding team_data.navigator.license}" />
            <DataGridTextColumn x:Name="part_1_tot_gtk" Header="Totaal GTK's" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_1_tot_timecontrol" Header="Totaal tijdscontroles" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_1_tot_control" Header="Totaal controles" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_1_distance" Header="Afstand" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_2_tot_gtk" Header="Totaal GTK's" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_2_tot_timecontrol" Header="Totaal tijdscontroles" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_2_tot_control" Header="Totaal controles" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="part_2_distance" Header="Afstand" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="end_tot_gtk" Header="Totaal GTK" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="end_tot_dist" Header="Totaal Afstand" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
            <DataGridTextColumn x:Name="end_tot_points" Header="Totaal" Binding="{Binding team_data.navigator.license}" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
        </DataGrid.Columns>
    </DataGrid>
</StackPanel>

This code gives me the following result:

Now, when I converted that code to c#, it doesn't really look that way...

The C# code that I'm using is the following:

private void LayoutTotal(string klasse)
{
    // Add the class name to the document
    TextBlock txt_selected_class = new TextBlock()
    {
        Text = klasse + " (" + inp_tour_part.SelectedItem.ToString() + ")"
    };
    print_content.Children.Add(txt_selected_class);

    // Initiate the new grid
    Grid grid = new Grid();

    // make all the column defenitions
    ColumnDefinition pos = new ColumnDefinition();
    BindingOperations.SetBinding(pos, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = pos, Mode = BindingMode.OneWay });
    ColumnDefinition nr = new ColumnDefinition();
    BindingOperations.SetBinding(nr, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = nr, Mode = BindingMode.OneWay });

    ColumnDefinition pilot = new ColumnDefinition();
    BindingOperations.SetBinding(pilot, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = pilot, Mode = BindingMode.OneWay });
    ColumnDefinition pilot_club = new ColumnDefinition();
    BindingOperations.SetBinding(pilot_club, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = pilot_club, Mode = BindingMode.OneWay });
    ColumnDefinition pilot_license = new ColumnDefinition();
    BindingOperations.SetBinding(pilot_license, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = pilot_license, Mode = BindingMode.OneWay });

    ColumnDefinition navigator = new ColumnDefinition();
    BindingOperations.SetBinding(navigator, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = navigator, Mode = BindingMode.OneWay });
    ColumnDefinition navigator_club = new ColumnDefinition();
    BindingOperations.SetBinding(navigator_club, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = navigator_club, Mode = BindingMode.OneWay });
    ColumnDefinition navigator_license = new ColumnDefinition();
    BindingOperations.SetBinding(navigator_license, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = navigator_license, Mode = BindingMode.OneWay });

    ColumnDefinition part_1_points = new ColumnDefinition();
    BindingOperations.SetBinding(part_1_points, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_1_points, Mode = BindingMode.OneWay });
    ColumnDefinition part_1_distance = new ColumnDefinition();
    BindingOperations.SetBinding(part_1_distance, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_1_distance, Mode = BindingMode.OneWay });

    ColumnDefinition part_2_tot_gtks = new ColumnDefinition();
    BindingOperations.SetBinding(part_2_tot_gtks, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_2_tot_gtks, Mode = BindingMode.OneWay });
    ColumnDefinition part_2_tot_time = new ColumnDefinition();
    BindingOperations.SetBinding(part_2_tot_time, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_2_tot_time, Mode = BindingMode.OneWay });
    ColumnDefinition part_2_tot_controls = new ColumnDefinition();
    BindingOperations.SetBinding(part_2_tot_controls, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_2_tot_controls, Mode = BindingMode.OneWay });
    ColumnDefinition part_2_distance = new ColumnDefinition();
    BindingOperations.SetBinding(part_2_distance, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = part_2_distance, Mode = BindingMode.OneWay });

    ColumnDefinition total_gtk = new ColumnDefinition();
    BindingOperations.SetBinding(total_gtk, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = total_gtk, Mode = BindingMode.OneWay });
    ColumnDefinition total_distance = new ColumnDefinition();
    BindingOperations.SetBinding(total_distance, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = total_distance, Mode = BindingMode.OneWay });
    ColumnDefinition total = new ColumnDefinition();
    BindingOperations.SetBinding(total, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = total, Mode = BindingMode.OneWay });

    // add all the column defenitions to the grid
    grid.ColumnDefinitions.Add(pos);
    grid.ColumnDefinitions.Add(nr);
    grid.ColumnDefinitions.Add(pilot);
    grid.ColumnDefinitions.Add(pilot_club);
    grid.ColumnDefinitions.Add(pilot_license);
    grid.ColumnDefinitions.Add(navigator);
    grid.ColumnDefinitions.Add(navigator_club);
    grid.ColumnDefinitions.Add(navigator_license);
    grid.ColumnDefinitions.Add(part_1_points);
    grid.ColumnDefinitions.Add(part_1_distance);
    grid.ColumnDefinitions.Add(part_2_tot_gtks);
    grid.ColumnDefinitions.Add(part_2_tot_time);
    grid.ColumnDefinitions.Add(part_2_tot_controls);
    grid.ColumnDefinitions.Add(part_2_distance);
    grid.ColumnDefinitions.Add(total_gtk);
    grid.ColumnDefinitions.Add(total_distance);
    grid.ColumnDefinitions.Add(total);

    // Add the grid to the layout
    print_content.Children.Add(grid);

    // Add the 3 upper headers (labels)
    Label partone = new Label()
    {
        Content = "Deel 1",
        Style = (Style)(Application.Current.Resources["DGHeaderStyle"])
    };
    partone.SetValue(Grid.ColumnSpanProperty, 5);
    partone.SetValue(Grid.ColumnProperty, 8);

    Label parttwo = new Label()
    {
        Content = "Deel 2",
        Style = (Style)(Application.Current.Resources["DGHeaderStyle"])
    };
    parttwo.SetValue(Grid.ColumnSpanProperty, 5);
    parttwo.SetValue(Grid.ColumnProperty, 12);

    Label total_result = new Label()
    {
        Content = "Eind",
        Style = (Style)(Application.Current.Resources["DGHeaderStyle"])
    };
    total_result.SetValue(Grid.ColumnSpanProperty, 5);
    total_result.SetValue(Grid.ColumnProperty, 12);

    // Add the labels
    print_content.Children.Add(partone);
    print_content.Children.Add(parttwo);
    print_content.Children.Add(total_result);

    //Generate the DataGrid
    DataGrid list_results = new DataGrid()
    {
        IsReadOnly = true,
        ColumnHeaderStyle = (Style)(Application.Current.Resources["HeaderStyle"]),
        ColumnWidth = DataGridLength.Auto,
        RowBackground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0)),    // Transparent color
        Foreground = new SolidColorBrush(Color.FromRgb(250, 250, 250)),
        AlternatingRowBackground = new SolidColorBrush(Color.FromRgb(85, 90, 98)),
        Background = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0)),
        BorderThickness = new Thickness(0),
        AutoGenerateColumns = false,
        RowHeaderWidth = 0
    };

    // Set the result list to grid row 1
    list_results.SetValue(Grid.RowProperty, 1);

    // Generate the headers
    DataGridTextColumn h_pos = new DataGridTextColumn()
    {
        Header = "Pos"
    };
    DataGridTextColumn h_nr = new DataGridTextColumn()
    {
        Header = "Nr"
    };
    DataGridTextColumn h_pilot = new DataGridTextColumn()
    {
        Header = "Naam piloot"
    };
    DataGridTextColumn h_pilot_club = new DataGridTextColumn()
    {
        Header = "Club"
    };
    DataGridTextColumn h_pilot_license = new DataGridTextColumn()
    {
        Header = "Licentie"
    };
    DataGridTextColumn h_navigator = new DataGridTextColumn()
    {
        Header = "Naam copiloot"
    };
    DataGridTextColumn h_navigator_club = new DataGridTextColumn()
    {
        Header = "Club"
    };
    DataGridTextColumn h_navigator_license = new DataGridTextColumn()
    {
        Header = "Licentie"
    };

    DataGridTextColumn h_part_1_points = new DataGridTextColumn()
    {
        Header = "Deel 1",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_part_1_distance = new DataGridTextColumn()
    {
        Header = "Afstand",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };

    DataGridTextColumn h_part_2_tot_gtks = new DataGridTextColumn()
    {
        Header = "Totaal GTK's",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_part_2_tot_time = new DataGridTextColumn()
    {
        Header = "Totaal tijdscontroles",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_part_2_controls = new DataGridTextColumn()
    {
        Header = "Totaal controles",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_part_2_distance = new DataGridTextColumn()
    {
        Header = "Totaal controles",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };

    DataGridTextColumn h_total_gtk = new DataGridTextColumn()
    {
        Header = "Totaal GTK",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_total_distance = new DataGridTextColumn()
    {
        Header = "Totaal afstand",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };
    DataGridTextColumn h_total_total = new DataGridTextColumn()
    {
        Header = "Totaal controles",
        HeaderStyle = (Style)(Application.Current.Resources["ColumnHeaderRotateStyle"])
    };

    // Add the headers
    list_results.Columns.Add(h_pos);
    list_results.Columns.Add(h_nr);
    list_results.Columns.Add(h_pilot);
    list_results.Columns.Add(h_pilot_club);
    list_results.Columns.Add(h_pilot_license);
    list_results.Columns.Add(h_navigator);
    list_results.Columns.Add(h_navigator_club);
    list_results.Columns.Add(h_navigator_license);
    list_results.Columns.Add(h_part_1_points);
    list_results.Columns.Add(h_part_1_distance);
    list_results.Columns.Add(h_part_2_tot_gtks);
    list_results.Columns.Add(h_part_2_tot_time);
    list_results.Columns.Add(h_part_2_controls);
    list_results.Columns.Add(h_part_2_distance);
    list_results.Columns.Add(h_total_gtk);
    list_results.Columns.Add(h_total_distance);
    list_results.Columns.Add(h_total_total);

    // Add the grid to the lay-out
    print_content.Children.Add(list_results);
}

I don't know exactly what I'm doing wrong here or if this contains enough information...

It might be something really small, but I can't figure out what is wrong.

`converted xaml code to C# code because I need to generate the lay-out dynamically` if you just need to generate the layout dynamically this can help you: https://stackoverflow.com/a/9007442/366064 — Bizhan, Aug 11 '18 at 11:43
BTW: consider using string interpolation for your textblock: Text = $"{klasse} ({inp_tour_part.SelectedItem.ToString()})" — Evertude, Aug 11 '18 at 12:40
Nothing wrong here; you just need to rethink the layout code first if you're going that route. In XAML you visualize the layout outer to inner content but I've learned that with code you should visualize it inner content to outer. — Michael Puckett II, Aug 11 '18 at 13:56

Evertude · Accepted Answer · 2018-08-11T12:41:42.390

Issue 1: You added the labels partone, parttwo and total_result to your StackPanel instead of your Grid where they should be.

Issue 2: You bound the Width of the ColumnDefinitions to themselves not to the DataGridHeaders like you wanted (like new Binding("ActualWidth") { Source = h_pos, Mode = BindingMode.OneWay }).

Try:

        // Add the class name to the document
        TextBlock txt_selected_class = new TextBlock()
        {
            Text = $"{klasse} ({inp_tour_part.SelectedItem.ToString()})"
        };
        print_content.Children.Add(txt_selected_class);


        // Generate the headers
        DataGridTextColumn h_pos = new DataGridTextColumn()
        {
            Header = "Pos"
        };
        ...

        // Initiate the new grid
        Grid grid = new Grid();

        // make all the column defenitions
        ColumnDefinition pos = new ColumnDefinition();
        BindingOperations.SetBinding(pos, ColumnDefinition.WidthProperty, new Binding("ActualWidth") { Source = h_pos, Mode = BindingMode.OneWay });
        ...

        // Add the 3 upper headers (labels)
        Label partone = new Label()
        {
            Content = "Deel 1",
            Style = (Style)(Application.Current.Resources["DGHeaderStyle"])
        };
        partone.SetValue(Grid.ColumnSpanProperty, 5);
        partone.SetValue(Grid.ColumnProperty, 8);
        ...

        // Add the labels
        grid.Children.Add(partone);
        grid.Children.Add(parttwo);
        grid.Children.Add(total_result);

        // Add the grid to the layout
        print_content.Children.Add(grid);

        //Generate the DataGrid
        ...

That the binding of your column widths now points to the DataGridTextColumn headers like h_pos instead of pos — Evertude, Aug 11 '18 at 12:30
Oh, okay, seen that, the only thing now is that I don't see the `parttwo` label anymore https://i.imgur.com/f7YyL6Z.png — Robin, Aug 11 '18 at 12:47
Because they are overlapping. Set the column property of Eind to 16 — Evertude, Aug 11 '18 at 12:48

wpf xaml to c# isn't the same

1 Answers1