DataTemplate binding doesn't work?

Question

I'm write the following code for binding some properties

<StackPanel x:Name="channelsRecordTimeData" Orientation="Vertical">
    <ItemsControl x:Name="channelRecordTimeItems" ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate> 
            <DataTemplate>
                <Grid x:Name="gridChannelRecordTimeItem" Width="{Binding Path=ChannelRecordTimeItemWidth}"                                                                                                                
                      Height="{Binding Path=ChannelRecordTimeItemHeight}" Margin="{Binding Path=ChannelRecordTimeItemsMargin}"
                        HorizontalAlignment="Left" DataContext="{Binding Path=ListRecordTime}">
                    <Grid.Background>
                        <ImageBrush x:Name="gridChannelRecordTimeItemBgr" ImageSource="..\Resources\playback_grid_channel_record_time_item_bgr_normal.png"/>
                    </Grid.Background>                                    
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

public class DATA
{
    public double ChannelRecordTimeItemWidth { set; get; }
    public double ChannelRecordTimeItemHeight { set; get; }
    public Thickness ChannelRecordTimeItemsMargin { set; get; }
    public List<RecordTime> ListRecordTime { set; get; }

    public DATA()
    {
        ChannelRecordTimeItemWidth = 1000;
        ChannelRecordTimeItemHeight = 20;
        ChannelRecordTimeItemsMargin = new System.Windows.Thickness(0, 0, 0, 0);
        ListRecordTime = null;
    }
}

public static List<DATA> listDATA = new List<DATA>();
for(int i = 0 ; i < 10 ; i++)
{
    DATA data = new DATA();
    listDATA.Add(data);
}
channelRecordTimeItems.ItemsSource = listDATA;
channelRecordTimeItems.Items.Refresh();

At above code, I have added 10 items in StackPanel, but I don't see any items added when run app. But when I replace Width="{Binding Path=ChannelRecordTimeItemWidth}" by Width="1000" and replace Height="{Binding Path=ChannelRecordTimeItemHeight}" by Height="20", then it work fine!

I think, this is problem of binding, but I don't know why.

Someone can tell me how to make it work?

Many thanks,

T&T

Answer 1

Update your DATA class to implement INotifyPropertyChanged like so:

public class DATA : : INotifyPropertyChanged
{
    private double _channelRecordTimeItemWidth;
    private double _channelRecordTimeItemHeight;
    private Thickness _channelRecordTimeItemsMargin;
    private List<RecordTime> _listRecordTime;

    public double ChannelRecordTimeItemWidth 
    {
        get { return _channelRecordTimeItemWidth; }
        set
        {
            _channelRecordTimeItemWidth = value;
            OnPropertyChanged("ChannelRecordTimeItemWidth");
        }
    }

    public double ChannelRecordTimeItemHeight 
    {
        get { return _channelRecordTimeItemHeight; }
        set
        {
            _channelRecordTimeItemHeight = value;
            OnPropertyChanged("ChannelRecordTimeItemHeight");
        }
    }

    public Thickness ChannelRecordTimeItemsMargin 
    {
        get { return _channelRecordTimeItemsMargin; }
        set
        {
            _channelRecordTimeItemsMargin = value;
            OnPropertyChanged("ChannelRecordTimeItemsMargin");
        }
    }

    public List<RecordTime> ListRecordTime 
    {
        get { return _listRecordTime; }
        set
        {
            _listRecordTime = value;
            OnPropertyChanged("ListRecordTime");
        }
    }

    public DATA()
    {
        ChannelRecordTimeItemWidth = 1000;
        ChannelRecordTimeItemHeight = 20;
        ChannelRecordTimeItemsMargin = new System.Windows.Thickness(0, 0, 0, 0);
        ListRecordTime = null;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

This will notify the XAML to update the bounded value.

The DataContext should also be set correctly. First remove the bound DataContext of the Grid:

    <DataTemplate>
        <Grid x:Name="gridChannelRecordTimeItem" Width="{Binding Path=ChannelRecordTimeItemWidth}"                                                                                                                
              Height="{Binding Path=ChannelRecordTimeItemHeight}" Margin="{Binding Path=ChannelRecordTimeItemsMargin}"
                HorizontalAlignment="Left">
            <Grid.Background>
                <ImageBrush x:Name="gridChannelRecordTimeItemBgr" ImageSource="..\Resources\playback_grid_channel_record_time_item_bgr_normal.png"/>
            </Grid.Background>                                    
        </Grid>
    </DataTemplate>

and make sure that the DataContext for the XAML (whether it is a UserControl, Window, etc), is set to your DATA class.

Answer 2

Your solution cannot work because of this line

 DataContext="{Binding Path=ListRecordTime}" 

This line sets datacontext for the grid, then you are trying to get ChannelRecordTimeItemHeight from datacontext - list of recordtimes.

Delete this line and see what happens