WPF DataTemplate and Binding

Question

I continue to understand MVVC with MSDN code , and I have a question.

In .xaml, they have a list of commands displayed on the screen.

   <Border 
    Grid.Column="0" 
    Style="{StaticResource MainBorderStyle}"
    Width="170"
    >
    <HeaderedContentControl
      Content="{Binding Path=Commands}"
      ContentTemplate="{StaticResource CommandsTemplate}"
      Header="Control Panel"
      Style="{StaticResource MainHCCStyle}"
      />
  </Border>

From here I understand that the DataContext is installed (not shown here) and it will display a collection of commands. What I don't understand is the CommandsTemplate, which you can see below:

<DataTemplate x:Key="CommandsTemplate">
<ItemsControl IsTabStop="False" ItemsSource="{Binding}" Margin="6,2">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <TextBlock Margin="2,6">pou
        <Hyperlink Command="{Binding Path=Command}">
          <TextBlock Text="{Binding Path=DisplayName}" />
        </Hyperlink>
      </TextBlock>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>

How is a binding created? How does this code say to check the Command property and DisplayName from an object inside the collection? Is it from ItemsSource? If so, I don’t understand why this is only in {Binding}. Can someone explain to me how DataTemplate binding from ContentTemplate works?

Answer 1

, DataContext ViewModel, , XAML, ViewModel.

:

private ObservableCollection<Commander> commands = new ObservableCollection<Commander>();

    public ObservableCollection<Commander> Commands {
        get { return commands; }
        set { commands = value; }
    }

Commander.

public class Commander {
    public ICommand Command { get; set; }
    public string DisplayName { get; set; }
}

Commands, ObservableCollection. XAML.

, HeaderedContentControl - . HeaderedContentControl DataTemplate "CommandsTemplate", ItemsControl Commands VM.

= "{ = }"

ItemControl , ItemControl , Commands. .

 ItemsSource="{Binding}" instead of ItemsSource="{Binding Commands}".

ItemControl, , Commander ObservableCollection. Text = "{Binding Path = DisplayName}".

, .

Answer 2

ItemsSource {Binding} DataContext ItemsControl ( , DataContext). HeaderedContentControl

ItemsControl DataContext .

<ItemsControl.ItemTemplate> , ItemsControl. {Binding Path=Command} {Binding Path=DisplayName} .

Answer 3

Example:

Xaml

<Window x:Class="WpfApplication2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Window.Resources>
        <DataTemplate x:Key="CommandsTemplate">
            <ItemsControl IsTabStop="False" ItemsSource="{Binding}" Margin="6,2">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="2,6">pou
                            <Hyperlink Command="{Binding Path=Command}">
                                <TextBlock Text="{Binding Path=DisplayName}" />
                            </Hyperlink>
                        </TextBlock>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Border Width="170">
            <HeaderedContentControl
                Content="{Binding Path=Commands}"
                ContentTemplate="{StaticResource CommandsTemplate}"
                Header="Control Panel"/>
        </Border>
    </Grid>
</Window>

FROM#

/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window {
    public Window1() {
        InitializeComponent();

        Commands.Add(new Commander() { DisplayName = "DN1" });
        Commands.Add(new Commander() { DisplayName = "DN2" });
        Commands.Add(new Commander() { DisplayName = "DN3" });

        this.DataContext = this;
    }

    private void Window_Loaded(object sender, RoutedEventArgs e) {

    }

    private ObservableCollection<Commander> commands = new ObservableCollection<Commander>();

    public ObservableCollection<Commander> Commands {
        get { return commands; }
        set { commands = value; }
    }
}

public class Commander {
    public ICommand Command { get; set; }
    public string DisplayName { get; set; }
}