Binding data to WPF UserControl

Question

I have creating following GridRow as UserControl

<UserControl x:Class="Project.Telematics_Plugin.GridRow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" BorderBrush="LightBlue"
             MaxHeight="30" MinWidth="900">
    <Grid>
        <StackPanel  Orientation="Horizontal">
            <CheckBox VerticalAlignment="Center" IsChecked="{Binding IsChecked}" />
            <TextBox Width="60" Text="{Binding EventId}"/>
            <TextBox Width="300" Text="{Binding MethodName}" />
            <ComboBox  Width="200" ItemsSource="{Binding }" />
            <ComboBox Width="200"/>
            <ComboBox Width="200"/> 
            <Button Click="OnClickEdit">
                <Image Source="Images/edit.png"/>
            </Button>
            <Button Click="OnClickDelete">
                <Image Source="Images/delete.png"/>
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Here is the code behind

public partial class GridRow : UserControl
    {
        public bool IsChecked { get; set; }
        public int EventId { get; set; }
        public string MethodName { get; set; }
        public string Level { get; set; }
        public string Opcode { get; set; }
        public string Task { get;set; }
        public string Keyword { get; set; }

        public GridRow()
        {
            InitializeComponent();


        }

        private void OnClickEdit(object sender, RoutedEventArgs e)
        {

        }

        private void OnClickDelete(object sender, RoutedEventArgs e)
        {

        }
    }

Now can you please tell what important thing I missed to bind properties of code behind files to UI in TwoWay Mode..

Although this is not the MVVM way..

Answer 1

Add an x:Name to your control and bind to the properties using ElementName:

<UserControl x:Name="MyGridRow">
    <Grid>
        <StackPanel  Orientation="Horizontal">
            <CheckBox VerticalAlignment="Center" IsChecked="{Binding IsChecked, ElementName=MyGridRow}" />
            <TextBox Width="60" Text="{Binding EventId, ElementName=MyGridRow}"/>
            <TextBox Width="300" Text="{Binding MethodName, ElementName=MyGridRow}" />
            <ComboBox  Width="200" ItemsSource="{Binding Path=., ElementName=MyGridRow}" />
            <ComboBox Width="200"/>
            <ComboBox Width="200"/> 
            <Button Click="OnClickEdit">
                <Image Source="Images/edit.png"/>
            </Button>
            <Button Click="OnClickDelete">
                <Image Source="Images/delete.png"/>
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

If you want to support updating the values, you should use DependencyProperties instead of normal properties:

public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register("IsChecked", typeof(bool), typeof(GridRow));

public bool IsChecked
{
    get { return (bool)GetValue(IsCheckedProperty); }
    set { GetValue(IsCheckedProperty, value); }
}

Answer 2

when the DataContext where you use your usercontrol has all the properties IsChecked, EventId,MethodName ,..., then you can remove the properties from your usercontrol and all works.

but if you wanna create a "real" usercontrol then you should use DependencyProperties and bind them with the right expression within your usercontrol.

btw when you use Binding in WPF then its all about the right DataContext and the right BindingExpression