Binding issue

[Waleed Seada]

Dear All,

I have successfully binded the radtransition control to a collectionview, the transition is working as expected.
My issue with a button inside the radtransition control.

My page is binded to a VM class using MEF and the radtransition is binded to a collectionview in that VM the button is binded to a DelegateCommand on the same VM but is doesn't work unless I take it out of the radtransition control.

Any ideas why is this happening, any work-around for that ...

Best regards
Waleed

[George]

Hello Waleed,

 
We are not aware of such problem with RadTransitionControl. Could you please give us more details about your scenario? We will greatly appreciate a sample project of yours. It will definitely help us in further pinpointing and resolving the problem. Can you attach the sample project to this thread?

Best wishes,
George
the Telerik team

[Waleed Seada]

Hello George,

The following scenario will be sufficient, I will explain:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
        <telerik:RadTransitionControl Content="{Binding Item}"
        x:Name="transitionControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0">
        <telerik:RadTransitionControl.ContentTemplate>
            <DataTemplate>
                <StackPanel x:Name="DisplayData" Margin="3">
                    <Border Style="{StaticResource GlassBorderStyle}">
                        <Grid x:Name="DisplayGrid" Width="450">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Coin ID:" Padding="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0"/>
                            <TextBox x:Name="CoinID" Margin="0,0,0,5" IsEnabled="False" Text="{Binding coin_id, Mode=OneTime}" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"/>
                            <TextBlock Text="Name:" Padding="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0"/>
                            <TextBox x:Name="Name" Margin="0,0,0,5" Text="{Binding coin_name_1, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
                            <TextBlock Text="English Name:" Padding="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0"/>
                            <TextBox x:Name="EnglishName" Margin="0,0,0,5" Text="{Binding coin_name_2, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3"/>
                            <TextBlock Text="Rate:" Padding="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="0"/>
                            <TextBox x:Name="Rate" Margin="0,0,0,5" Text="{Binding coin_rate, Mode=TwoWay}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"/>
                        </Grid>
                    </Border>
                </StackPanel>

            </DataTemplate>

        </telerik:RadTransitionControl.ContentTemplate>

        <telerik:RadTransitionControl.Transition >
            <TransitionEffects:SlideAndZoomTransition />
        </telerik:RadTransitionControl.Transition>
    </telerik:RadTransitionControl>
    <StackPanel Grid.Row="1">
        <Button  Content="Save" Command="{Binding SaveRecordCommand}" />
        <TextBlock x:Name="comment" Foreground="Green" Margin="2,2,0,0" Text="{Binding Comments}" />
    </StackPanel>
</Grid>

The Item entity class and the SaveCommand are both defined inside the VM, which is loaded using MEF.

In the code above the command is working as it sits outside the RadTransition control, again if you notice the binding to radtransition in telerik:RadTransitionControl Content="{Binding Item}",the item is a entity which doesn't contain the definition of the SaveCommand. If you move the last stack panel with the Save command inside the Grid x:Name="DisplayGrid" the command will not fire 

Try it yourself, I even took it out the DataTemplate but still the same result.

Best regards
Waleed

[Waleed Seada]

Hello Guys,

I found the solution for that, if any would be interested. I am sure it would help any nested binding scenario like mine.
You have to create a DataContextProxy class as follows:

using System;
using System.Windows;
using System.Windows.Data;

namespace GL.Infrastructure
{
    public class DataContextProxy : FrameworkElement
    {
        public DataContextProxy()
        {
            this.Loaded += new RoutedEventHandler(DataContextProxy_Loaded);
        }

        void DataContextProxy_Loaded(object sender, RoutedEventArgs e)
        {
            Binding binding = new Binding();
            if (!String.IsNullOrEmpty(BindingPropertyName))
            {
                binding.Path = new PropertyPath(BindingPropertyName);
            }
            binding.Source = this.DataContext;
            binding.Mode = BindingMode;
            this.SetBinding(DataContextProxy.DataSourceProperty, binding);
        }

        public Object DataSource
        {
            get { return (Object)GetValue(DataSourceProperty); }
            set { SetValue(DataSourceProperty, value); }
        }

        public static readonly DependencyProperty DataSourceProperty =
             DependencyProperty.Register("DataSource", typeof(Object), typeof(DataContextProxy), null);


        public string BindingPropertyName { get; set; }

        public BindingMode BindingMode { get; set; }

    }

}

Then, define it as a resource in your xaml control as follows:

<UserControl.Resources>
    <Infra:DataContextProxy x:Key="DataContextProxy"/>
</UserControl.Resources>

and then you will start using it in binding as follows:

<telerik:RadComboBox x:Name="cbxPostingSheet1" IsEditable="True" IsReadOnly="True"
ItemsSource="{Binding Source={StaticResource DataContextProxy},Path=DataSource.PostSheets}"
DisplayMemberPath="sheet_name"/>

This combo is inside the Radtransition control that is already binded to The Item Class in the VM.

I hope this can help anyone else ...

Best regards
Waleed