Button Command binding to the component in ItemsControl

[Malkow]

Hello,
I have problem because I have no idea how to bind Command to the button which is inside ToDo Task component. Here is a code example

<Grid Background="#FF333333">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <local:BackButton Grid.Row="0"/>
        <Label FontWeight="Bold"  HorizontalAlignment="Center" Content="TO DO TASKS" Grid.Row="1" Foreground="White" FontFamily="Arial Blac" FontSize="36"/>
        <ScrollViewer Grid.Row="2">
            <ItemsControl ItemsSource="{Binding ToDoTasksList}" Margin="10">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <local:ToDoTask/> // I would like to pass here command like "Command="{Binding MarkAsDoneTaskCommand}
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Command="{Binding AddNewTaskCommand}" Style="{StaticResource TasksToDoAddTaskBtnStyles}" >ADD NEW TASK</Button>
            <TextBox Text="{Binding NewWorkTaskDescription, Mode=TwoWay}" Grid.Column="1" Style="{StaticResource TasksToDoTextBoxStyles}"/>
        </Grid>
    </Grid>

ToDoTask component

<Grid Style="{StaticResource GridTaskContainerStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        
        <Border Style="{StaticResource DefaultTaskBorderStyle}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="1" BorderThickness="1,0,0,0" CornerRadius="0" Style="{StaticResource DefaultTaskBorderStyle}"/>
                <Border Grid.Column="2" BorderThickness="1,0,0,0" CornerRadius="0" Style="{StaticResource DefaultTaskBorderStyle}"/>
                <TextBlock Grid.Column="0" Style="{StaticResource DefaultTaskTextBlockStyle}" Text="{Binding Description}"/>
                <TextBlock Grid.Column="1" Style="{StaticResource DefaultTaskTextBlockStyle}" Text="{Binding CreationDate}"/>
                <TextBlock Grid.Column="2" Style="{StaticResource DefaultTaskTextBlockStyle}" Text="{Binding CategoryType}"/>
                <Button Grid.Column="3" Style="{StaticResource DefaultTaskButtonStyle}" Background="#FF64CA37">DONE</Button> // Pass command to this button
                <Button Grid.Column="4" Style="{StaticResource DefaultTaskButtonStyle}" Background="#FFE4563F">DELETE</Button>
            </Grid>
        </Border>
    </Grid>

 

[Skydiver]

You would do the binding the same as if you were doing the binding for stuff outside of a template. The key magic will be be having to not just bind the command, but also bind a parameter to be passed to the command so that you know which instance of the bound item template is being activated.