C# WPF - 控制 DataGrid ItemsSource 项目的列宽

Question

the issue is hard to explain but I will try my best. This code is part of a proof-of-concept for a webscraping application I am working on - only recently started.

I am attempting to display 2 columns of data using a DataGrid. I am able to display the data by assigning an ObservableCollection<> to the DataGrid.ItemsSource (see image below), the issue I am getting is that I have no control over column properties. I am very new to WPF and have tried to 'sort of' adopt MVVM.

In the picture it shows 4 columns, both the 'Title' and 'Price' from the ItemsSource are the 2 large ones.

private void ScrapeProductButton_OnClick(object sender, RoutedEventArgs e)
{
    string url = this.ProductToScrapeUrlTextBox.Text;
    scraper.ScrapeData(url);
    
    var entries = scraper.Entries;
    WebScrapedItems.ItemsSource = entries;
    
    WebScrapedItems.Columns.Add(new DataGridTextColumn(){Header = "Title",
        Width = new DataGridLength(0.8, DataGridLengthUnitType.Star)});
    WebScrapedItems.Columns.Add(new DataGridTextColumn(){Header = "Price",
        Width = new DataGridLength(0.2, DataGridLengthUnitType.Star)});
}

As seen in the code behind above, I tried to add 2 columns of the correct formatting assuming the contents of the ItemsSource would just do the same (obviously it isn't). Turning AutoGeneratedColumns off in the XAML doesn't display the ItemsSource but does display the other columns correctly.

<StackPanel>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Button Name="ScrapeProductButton" Grid.Column="0"
            Margin="10 10 10 10" Background="AntiqueWhite"
            Content="Scrape Website" FontWeight="Bold"
            Click="ScrapeProductButton_OnClick"/>
        <TextBox Name="ProductToScrapeUrlTextBox" Grid.Column="1"
            Margin="10" Padding="2"/>
    </Grid>

    <DataGrid Height="350" Width="740" Margin="10" Name="WebScrapedItems"
        VerticalAlignment="Center" HorizontalAlignment="Center"
        RowHeight="30" ColumnWidth="390" IsReadOnly="True"
        AutoGenerateColumns="True" FrozenColumnCount="2">
    </DataGrid>

</StackPanel>

My goal is to just display the contents of the ItemsSource objects but such that they are correctly formatted. I feel like binding could be a potential reason its not working properly, but again I am still new to WPF and haven't started reading up on it yet.

Any help would be greatly appreciated, and any WPF advice, MVVM or anything would be great also.

Thanks!

Answer 1

I fixed the issue through binding to the field of the object that I wanted to display within the column. This mean I could remove the formatting the in ScrapeProductButton_OnClick method.

XAML code is here:

<StackPanel>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Button Name="ScrapeProductButton" Grid.Column="0" Margin="10 10 10 10" Background="AntiqueWhite" Content="Scrape Website" FontWeight="Bold" Click="ScrapeProductButton_OnClick"/>
        <TextBox Name="ProductToScrapeUrlTextBox" Grid.Column="1" Margin="10" Padding="2"/>
    </Grid>

        <DataGrid Name="WebScrapedItems" AutoGenerateColumns="False">
            <DataGrid.Columns >
                <DataGridTextColumn Header="Title" Binding="{Binding Title}" Width="3*"/>
                <DataGridTextColumn Header="Price" Binding="{Binding Price}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
</StackPanel>

I appreciate the time people spent on looking through the problem - sorry if I wasted your time.