Search code examples
wpfbindingdatacontext

Self DataContext binding not working in XAML but working in code behind


When I am trying to bind Datacontext of Window by DataContext="{Binding RelativeSource={RelativeSource Self}}" it is not working, how if I do the same thing in code-behind, it is working quite fine. Am I wrong in assuming that is same as this.DataContext=this in constructor of the window in code-behind.

Full Code of XAML is...

  <Window x:Class="SampleDemoListBox.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:SampleDemoListBox"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    >
    <Window.Resources>
     <DataTemplate x:Key="ModelItemTemplate" >
      <StackPanel Margin="25" Orientation="Horizontal">
      <Image VerticalAlignment="Top" x:Name="ModelPicture" Width="150" 
        Source="{Binding PicturePath}"></Image>
        <Grid VerticalAlignment="Top">
           <Grid.RowDefinitions>
                 <RowDefinition></RowDefinition>
                  <RowDefinition></RowDefinition>
                  <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                   <ColumnDefinition></ColumnDefinition>
                   <ColumnDefinition></ColumnDefinition>
             </Grid.ColumnDefinitions>
                    <Label VerticalAlignment="Center" FontWeight="Bold" Content="Name:" Grid.Row="0" Grid.Column="0"></Label>
                    <Label VerticalAlignment="Center" FontWeight="Bold" Grid.Row="1" Grid.Column="0" Content="LastName:"></Label>
                    <Label VerticalAlignment="Center" FontWeight="Bold" Grid.Row="2" Grid.Column="0" Content="Age:"></Label>
                    <TextBlock  VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" x:Name="Name" Width="120" Text="{Binding Name}" ></TextBlock>
                    <TextBlock  VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" x:Name="LastName" Width="120" Text="{Binding LastName}" ></TextBlock>
                    <TextBox  VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" x:Name="Age" Width="120" Text="{Binding Age}" ></TextBox>

                </Grid>
            </StackPanel>
        </DataTemplate>

      </Window.Resources>
      <Grid>
      <StackPanel>
        <ListBox x:Name="LstModels" Margin="25" ItemsSource="{Binding 
          Models}" ItemTemplate="{Binding Source={StaticResource 
           ModelItemTemplate}}"></ListBox>
           <Button Width="120" Height="40" Click="AddModel_OnClick" 
           Content="Add Model" ></Button>
       </StackPanel>
       </Grid>
       </Window>

And Code-behind is...

    public partial class MainWindow : Window
     {
        public ObservableCollection<Model> Models{ get; set; }
          public MainWindow()
          {
              InitializeComponent();
              Models= new ObservableCollection<Model> { new Model{ Name = 
             "Shabana", LastName = "Parveen", Age = 35, PicturePath = 
               @"Images\pic.bmp" },
             new Model { Name = "Ada", LastName = "Lovelace", Age = 37, 
             PicturePath = @"Images\AdaLovelace.bmp" }};

           // this.DataContext = this;

          }
     }

Solution

  • Your problem is because you have a null observablecollection. If you move your code round, it'll work:

    public partial class MainWindow : Window
     {
        public ObservableCollection<Model> Models{ get; set; }
          public MainWindow()
          {
    
              Models= new ObservableCollection<Model> { new Model{ Name = 
             "Shabana", LastName = "Parveen", Age = 35, PicturePath = 
               @"Images\pic.bmp" },
             new Model { Name = "Ada", LastName = "Lovelace", Age = 37, 
             PicturePath = @"Images\AdaLovelace.bmp" }};
    
              InitializeComponent();
    
          }
     }
    

    You should look into using a separate class as a viewmodel and MVVM generally.