Binding Items inside a DataTemplate with Items from another DataTemplate

Question

Hi Everyone, I have two Data Template (one for drawing[draw] and another for Input Data[data]) Also I have the two ContentControls which uses the above DataTemplates. I want the both DataTemplate's elements to be binded so that when the user fills in a field in the data form DateTemplate it automatically updates the draw Template as well.

How can I bind the elements in draw DataTemplate with the elements of data DataTemplate. There is no backend data at all. User picks up a value from a combobox and based upon the value selected in combobox I update the two ContentControls with relevant draw and data DataTemplates. User fill in the relevant fields in the data form and draw template draws those elements based upon some business Rules.

-----

    <DataTemplate x:Key="data">
        <Grid Grid.Row="0" Background="#FFFFFFFF" Name="DocumentRoot"  VerticalAlignment="Top">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition  Height="auto"/>
                <RowDefinition  Height="auto"/>
            </Grid.RowDefinitions>
            <Grid  Margin="10" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>

                <TextBlock Text="Heading Text" Grid.Row="1"/>
                <TextBlock Text="Ticket Text" Grid.Row="2"/>
               -----  
                <TextBox x:Name="txtHeading" Text="Heading Text" Grid.Row="1" Grid.Column="1"/>
                <TextBox x:Name="txtTicketText" Text="Ticket Text"  Grid.Row="2" Grid.Column="1"/>
                -----
            </Grid>


        </Grid>
    </DataTemplate>

 <ContentControl   Content="{Binding ElementName=cboTemplates, Path=SelectedItem.Name}"
                        ContentTemplateSelector="{StaticResource formTemplateSelector}">
                </ContentControl>

Any ideas how can I bind the two elements from inside different DataTemplates?

Thanks in advance

Answer 1

Why don't you bind one object (of class with a Draw property and a Data property) to both the templates. When one template changes Data property in the object, you can refresh Draw property in the object which in turn will update the Draw template.

---

Updated

---

Example :

Window Content

<Grid>
    <StackPanel>
        <ContentControl DataContext="{Binding}">
            <ContentControl.Template>
                <ControlTemplate>
                    <Rectangle Fill="{Binding Background}"
                               Width="200"
                               Height="200" />
                </ControlTemplate>
            </ContentControl.Template>
        </ContentControl>
        <ContentControl DataContext="{Binding}">
            <ContentControl.Template>
                <ControlTemplate>
                    <TextBox Text="{Binding ColorText}" />
                </ControlTemplate>
            </ContentControl.Template>
        </ContentControl>
    </StackPanel>
</Grid>

Code Behind

public partial class MultiViewWindow : Window
{
    public MultiViewWindow()
    {
        InitializeComponent();

        DataContext = new BackgroundInfo();
    }
}

public class BackgroundInfo : INotifyPropertyChanged
{
    protected String _colorText;
    public String ColorText
    {
        get
        {
            return _colorText;
        }
        set
        {
            _colorText = value;
            RaisePropertyChanged("ColorText");
            RaisePropertyChanged("Background");
        }
    }

    public Brush Background
    {
        get
        {
            try
            {
                return new SolidColorBrush((Color)ColorConverter.ConvertFromString(ColorText));
            }
            catch (Exception)
            {
                return new SolidColorBrush(Colors.Transparent);
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    void RaisePropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler temp = PropertyChanged;
        if (temp != null)
        {
            temp(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Answer 2

Consider creating class (named View Model) and bind both templates to single instance of that class (this is Model-View-ViewModel design pattern). Otherwise you probably will have very complex bindings contains hardcoded logical tree.