Rectangle inside DataGrid, bind width value of rectangle

Question

I am trying to bind rectangle width property to a variable so with each added record to Data Grid the width of rectangle is different (chart style). I cannot even access this rectangle with x:Name.

XAML:

<DataGrid.Columns>
   <DataGridTextColumn Binding="{Binding Path=Data}" Header="Data"  ></DataGridTextColumn>
   <DataGridTextColumn Binding="{Binding Path=Pamaina}" Header="Pamaina"></DataGridTextColumn>
   <DataGridTextColumn Binding="{Binding Path=TyrimoVieta}" Header="Tyrimo vieta"></DataGridTextColumn>
   <DataGridTextColumn Binding="{Binding Path=Koncentracija}" Header="Koncentacija"></DataGridTextColumn>
   <DataGridTemplateColumn Header="Rect">
      <DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
            <StackPanel x:Name="assTR">
               <Rectangle Width="{Binding ilgis}" Height="10" Fill="Green" />
            </StackPanel>
         </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
   </DataGridTemplateColumn>
</DataGrid.Columns>

C#

List<DatagridItems> datagridItems = new List<DatagridItems>();

public class DatagridItems
{
   public string Data { get; set; }
   public string Pamaina { get; set; }
   public string TyrimoVieta { get; set; }
   public string Koncentracija { get; set; }
}

public List<DatagridItems> LoadCollectionData(string data, string pamaina, string tyrimovieta, string koncentracija)
{
   Datagrid_1.Items.Refresh(); //du refresh kad atsinaujintu kolekcija
   datagridItems.Add(new DatagridItems()
   {
      Data = data,
      Pamaina = pamaina,
      TyrimoVieta = tyrimovieta,
      Koncentracija = koncentracija,
   });
   Datagrid_1.Items.Refresh();

   return datagridItems;
}

Call to populate Data Grid

Datagrid_1.ItemsSource = LoadCollectionData(datosFormatas, row["pamaina"].ToString(), tyrimoVieta_isFunkcijos, koncentracija);

I do not actually know if this will even do what I want. Below is the picture what im trying to achieve. I want value in "Koncentracija" to set width of green rectangle. Can this even be done? I managed to draw static width rectangle only.

Any help is appreciated. Image of what i am trying to achieve

Answer 1

I want value in "Koncentracija" to set width of green rectangle. Can this even be done?

Yes it can be done.

Basically you want to bind a string type variable with a variable that is gonna represent the width of your rectangle. How?

Usually width is represented in numeric values ;)

So the simplest solution - you need to change the datatype of Koncentracija property to be int or decimal as @thatguy pointed out. But to keep things simple without using converters - you have to provide a mechanism to notify your view that property has changed.

The simplest way to do that is to implement INotifyPropertyChanged interface and invoke the propertychanged event in the setter with the name of the property like so:

public class DataGridViewItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string property)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
    }

    public string Data { get; set; }
    public string Pamaina { get; set; }
    public string TyrimoVieta { get; set; }

    private int koncentracija;
    public int Koncentracija
    {
        get { return koncentracija; }
        set
        {
            koncentracija = value;
            RaisePropertyChanged(nameof(Koncentracija));
        }
    }
}

I made a simple view to represent adding an element to DataGrid which changes the width of a rectangle by clicking a button. Here is the View code:

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <DataGrid Name="MyDataGrid" HorizontalAlignment="Left" Height="150" Margin="44,74,0,0" VerticalAlignment="Top" Width="171"/>
    <Rectangle Name="MyRectangle" Fill="Green" HorizontalAlignment="Left" Width="{Binding Koncentracija}" Height="47" Margin="350,91,0,0" Stroke="Black" VerticalAlignment="Top" />
    <Button Name="AddItemBtn" Content="AddToDataGrid" Margin="63,281,615.6,0" VerticalAlignment="Top" Width="115" Height="53" FontSize="16" Click="AddItemBtn_Click"/>
</Grid>

Now in the code behind your view (in my example "MainWindow.xaml.cs") there's a simple logic which you can adjust to your problem. Here I increment the Koncentracija value by 30, but ofc you can do that by getting the data from your desired object.

The code:

 public partial class MainWindow : Window
{
    DataGridViewItem dataItem = new DataGridViewItem();
    List<Person> people = new List<Person>() { new Person { Name = "Mark", Age = 12 }, new Person { Name = "Chris", Age = 22 } };

    public MainWindow()
    {
        InitializeComponent();
        MyDataGrid.ItemsSource = people;
        DataContext = dataItem;
    }

    private void AddItemBtn_Click(object sender, RoutedEventArgs e)
    {
        people.Add(new Person() { Name = "Tom", Age = 27 });
        dataItem.Koncentracija += 30;
        MyDataGrid.Items.Refresh();
    }
}

Here's a picture how it looks https://ibb.co/B4FCD6S Hope it helps :)

*Edit: I recommend you to get familiar with MVVM pattern when creating WPF apps as it will help you a lot. There is a tutorial on this here: https://www.tutorialspoint.com/mvvm/index.htm