CODEWITHSUNDEEP
c#wpfmvvm
SHKVal
SHKVal

Reputation: 13

Connect UIElements dynamically added in WPF using MVVM

I have UserControl with ItemsControl binded to ObservableCollection. DataTemplate in this ItemsControl is a Grid containing TextBox and Button.

Here is some code (Updated): 

<UserControl.Resources>
    <entities:SeparatingCard x:Key="IdDataSource"/>
</UserControl.Resources>
<ItemsControl ItemsSource="{Binding Cards}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBox Text="{Binding Id, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" GotFocus="TextBox_GotFocus" Grid.Row="0" Grid.Column="0"/>
                <Button DataContext="{Binding Source={StaticResource IdDataSource}}" Command="{Binding Accept}" Grid.Row="0" Grid.Column="1">Accept</Button>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

In model file: 

public ObservableCollection<SeparatingCard> Cards { get; set; }

Card class: 

class SeparatingCard : INotifyPropertyChanged
{
    private string _id;
    public string Id
    {
        get { return _id; }
        set
        {
            _id = value;
            OnPropertyChanged("Id");
        }
    }
    public ActionCommand Accept { get; }
    public SeparatingCard()
    {
        Accept = new ActionCommand(AcceptCommandExecute);
    }
    private void AcceptCommandExecute(object obj)
    {
        MessageBox.Show(Id);
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Cards are added in runtime and I dynamically get a new textbox-button pair in my UserControl. Now in each pair I need to do the folowing things:
- Be able to check if the text in textbox is correct and disable/enable apropriate button.
- On button click get the text from apropriate textbox and process it.

I'd like all of this done via MVVM. But I only came to solution that directly have access to UI and implements only the second task: 

private void Button_Click(object sender, RoutedEventArgs e)
    {
        var text = (((sender as Button).Parent as Grid).Children
            .Cast<UIElement>()
            .First(x => Grid.GetRow(x) == 0 && Grid.GetColumn(x) == 0) as TextBox).Text;
        MessageBox.Show(text);
    }

Update
As was suggested I tried to move ICommand logic to SeparatingCard class. Now it's always return null and I can't check what object of SeparatingCard class my command refers to. Updates are in the code above.

Upvotes: 0

Views: 455

Answers (1)

OrMiz
OrMiz

Reputation: 275

Instead of using Button.Click, Use Button.Command, which you can bind to some command in SeparatingCard.

Please have a look in this tutorial: http://www.codeproject.com/Tips/813345/Basic-MVVM-and-ICommand-Usage-Example

Then, SeparatingCard ViewModel will contain an ICommand object which you can bind to Button.Command. So if the user clicks the button, the event will be directed to the corresponding SeparatingCard object's command.

Upvotes: 1

Related Questions