Databinding Grid position - wpf

Question

I have a grid, which I build dynamically and while building I put an image in the first cell (0, 0) in the grid.

I want to use data binding so that when the users change the position, the image will change its position to the right place in the grid.

The user has 2 texboxes which there he put the row and column in the grid.

Any help will be appreciated.

Edit: The code I did so far: View: I have a window that contains thisuser controller

public MyController()
    {
        InitializeComponent();
        this.playerImage = new Image();
    }

    public void CreateGrid(string ansFromServer, int numberOfRows, int numberOfCols, int type)
    {
        this.rows = numberOfRows;
        this.cols = numberOfCols;
        for (int i = 0; i < this.rows; i++)
        {
            RowDefinition def = new RowDefinition();
            mainGrid.RowDefinitions.Add(def);
        }
        for (int i = 0; i < this.cols; i++)
        {
            ColumnDefinition def = new ColumnDefinition();
            mainGrid.ColumnDefinitions.Add(def);
        }
}

What do you mean by "when the user change the position"? What does the user do? — Emond Erno
Bind the Grid.Column and Grid.Row properties of the Image to two int properties in your view model, like Grid.Column="{Binding GridColumn}". — Clemens
Clemens, can you please tell me how to do that in the code behind? — Dvir Samuel

Clemens Clemens · Accepted Answer · 2016-04-19T11:27:08

Create a simple view model with two integer properties for the column and row:

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int gridColumn;
    public int GridColumn
    {
        get { return gridColumn; }
        set { gridColumn = value; OnPropertyChanged(); }
    }

    private int gridRow;
    public int GridRow
    {
        get { return gridRow; }
        set { gridRow = value; OnPropertyChanged(); }
    }

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

and use it in XAML e.g. like this:

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <TextBox Width="50"
                 Text="{Binding GridColumn, UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Width="50"
                 Text="{Binding GridRow, UpdateSourceTrigger=PropertyChanged}"/>
    </StackPanel>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
               Grid.Column="{Binding GridColumn}" Grid.Row="{Binding GridRow}"/>
    </Grid>
</Grid>

In case you've created the Image control in code behind, you would set the bindings like this:

playerImage.SetBinding(Grid.ColumnProperty, new Binding("GridColumn"));
playerImage.SetBinding(Grid.RowProperty, new Binding("GridRow"));
mainGrid.Children.Add(playerImage);

Databinding Grid position - wpf

1 Answers