Search code examples
wpfxamlitemscontrol

How to bind an ItemsControl to a dependency property of a usercontrol?


Trying to understand this better.

I have an ItemsControl defined in my mainview something like this

<ItemsControl  Grid.Column="0" Grid.Row="2"
                   ItemsSource="{Binding Notes}" 
                   ItemTemplate="{Binding Source={StaticResource MyParagraph}}"
  >

</ItemsControl> 

in which I would like to use a DataTemplate:

<UserControl.Resources>
    <DataTemplate x:Key="MyParagraph">
        <v:InkRichTextView
            RichText="{Binding ?????? "
     </DataTemplate>
</UserControl.Resources>

The InkRichTextView is a view with a dependency property, RichText, being used to pass a paragraph from the ObservableCollection(InkRichViewModel) Notes in the mainview to the user control. That is, this works correctly for one paragragh:

<v:InkRichTextView RichText ="{Binding Path=Note}" Grid.Column="0" Grid.Row="0" />

where Note is defined as a paragraph in the MainView.

The problem is, how do I write the DataTemplate and the ItemsControl such that the ItemsControl can pass each paragraph from the observablecollection to the dependency property RichText in the InkRichTextView?

Thanks for any guidance. (I hope this is understandable!)


Solution

  • Items control:

        <ItemsControl x:Name="NotesItemsControl" Grid.Column="2" HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <local:InkRichTextView RichText="{Binding Note}"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    

    Code behind:

        class InkRichViewModel : System.ComponentModel.INotifyPropertyChanged
        {
            #region Note (INotifyPropertyChanged Property)
            private string _note;
    
            public string Note
            {
                get { return _note; }
                set
                {
                    if (_note != value)
                    {
                        _note = value;
                        RaisePropertyChanged("Note");
                    }
                }
            }
            #endregion
    
            public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
            private void RaisePropertyChanged(string p)
            {
                var propertyChanged = PropertyChanged;
                if (propertyChanged != null)
                {
                    propertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(p));
                }
            }
        }
    
    
        public MainWindow()
        {
            InitializeComponent();
    
            var item01 = new InkRichViewModel() { Note = "Note 01", };
            var item02 = new InkRichViewModel() { Note = "Note 02", };
            var item03 = new InkRichViewModel() { Note = "Note 03", };
            var item04 = new InkRichViewModel() { Note = "Note 04", };
            var item05 = new InkRichViewModel() { Note = "Note 05", };
            var itemList = new List<InkRichViewModel>() 
            {
                item01, item02, item03, item04, item05,
            };
            NotesItemsControl.ItemsSource = itemList;
    
        }
    

    How it looks at runtime:

    How it looks at runtime

    Is that what you're looking for?