Unable to bind to a collection of my ViewModel - wpf

Question

All - Trying to do 2 things: I have a simple app and am trying to bind my Viewmodel collection to my view. Have 2 approaches in mind but am getting stuck on both of them:
Approach 1: Using Grid as a container to bind the textblock property.
Approach 2: Binding an attribute of the object directly to a textblock on my view (not using grid as a container and its Datacontext property)
Rule_Model_1.cs
public class Rule_Model_1
{
public string topMessage { get; set; }
public List<string> recipients { get; set; }
public string bottomMessage { get; set; }
public string hypLink { get; set; }
public OCCBlock blockType { get; set; }
public enum OCCBlock
{
HardBlock,
SoftBlock,
ModifyAndSend
}
}
Rule_VM_1.cs
class Rule_VM_1
{
#region Properties
public List<Rule_Model_1> rule { get; set; }
#endregion
#region Constructor
public Rule_VM_1()
{
#region Initializing a Rule
rule = new List<Rule_Model_1>();
rule.Add(new Rule_Model_1()
{
topMessage = "Lorem ipsum dolor sit amet.",
recipients = new List<string> {"pr#hotmail.com", "pra#gmail.com"},
bottomMessage = "Lorem ipsum dolor sit amet",
hypLink = "http://www.abc.com",
blockType = Rule_Model_1.OCCBlock.HardBlock
});
#endregion
}
#endregion
}
Rule_UI.xaml.cs
public partial class Rule_UI_1 : UserControl
{
Rule_VM_1 rulevm1;
public Rule_UI_1()
{
InitializeComponent();
rulevm1 = new Rule_VM_1();
DataContext = rulevm1;
}
}
Rule_UI.xaml
<UserControl x:Class="OCC_WPF_POC.Rule_UI_1"
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">
<GroupBox Header="Rule Details">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" DataContext="{Binding rule}">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding topmessage}" />
</Grid>
</Grid>
</GroupBox>
The view still shows nothing. Also as mentioned above - how do i have both the approaches working? Any code samples is greatly appreciated
Image Attached

Answer 1

The problem is that you need a list view to bind to a collection property (rule). This should work:
<ListBox Grid.Column="1" ItemsSource="{Binding rule}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding topmessage}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
To bind to the grid, you can set the DataContext using an indexer []:
<Grid Grid.Column="1" DataContext="{Binding rule[0]}">
<TextBlock Grid.Row="0" Text="{Binding topmessage}" />
</Grid>
And without the Grid:
<TextBlock Text="{Binding rule[0].topmessage}" />