Binding Data to RadFluidControl

[Vinay]

Hi,
I have a TileView control with RadFluid Content control,But when i Bind the Data from RIA Service to the Control, It only displays 4 panels,No Data is loaded as i intended.....

<Grid x:Name="LayoutRoot">
        <telerik:RadTileView Name="TileVIew1" TileStateChanged="RadTileView_TileStateChanged">
            <telerik:RadTileViewItem Header="{Binding FirstName}">
                <telerik:RadFluidContentControl ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.SmallContent>
                        <Grid Width="200" Height="200">
                            <TextBlock Text="{Binding FirstName}" ></TextBlock>
                        </Grid>
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <Grid Width="400" Height="400">
                            <TextBlock Text="{Binding FirstName}" ></TextBlock>
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>


                            <!--<Image Source="../Images/TileView/Flags/map.png" Grid.ColumnSpan="2" Grid.RowSpan="2" />-->
                            <!--<Image Source="{Binding LargeFlag}" Grid.Column="1" Margin="10" />-->
                            <telerik:RadWrapPanel Margin="20">
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="First Name:" />
                                    <TextBlock Text="{Binding FirstName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Last Name:" />
                                    <TextBlock Text="{Binding LastName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Company Name:" />
                                    <TextBlock Text="{Binding CompanyName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Email ID:" />
                                    <TextBlock Text="{Binding EmailAddress}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Phone:" />
                                    <TextBlock Text="{Binding Phone}"  />
                                </StackPanel>
                            </telerik:RadWrapPanel>
                            <TextBlock FontSize="11" TextWrapping="Wrap" Text="{Binding EmailAddress}" Grid.Row="1"
                                Grid.ColumnSpan="2" Margin="20" />
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerik:RadTileViewItem>
        </telerik:RadTileView>
    </Grid>

And  i am trying to Bind the Data got from the RIA Service like,

AdventureWorksDomainContext _DomainContxt = new AdventureWorksDomainContext();
        public TileView()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(TileView_Loaded);
        }

        void TileView_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                AdventureWorksDomainContext ctx = new AdventureWorksDomainContext();
               // List<Customer> customers = new List<Customer>();
               // var loadOperation = _DomainContxt.Load(_DomainContxt.GetCustomerQuery());
               //loadOperation.Completed += new EventHandler(loadOperation_Completed);
                //dataGrid1.ItemsSource = ctx.Customers;
                TileVIew1.Items.Clear();
                TileVIew1.ItemsSource = ctx.Customers;
                ctx.Load(ctx.GetCustomerQuery());

            }
            catch (Exception ex)
            {
            }
        }

[Zarko]

Hello vinay uthappa,

 When you bind the RadTileView you should set ContentTemplate and ItemTemplate to it, not an RadTileViewItem:

<Grid x:Name="LayoutRoot">
    <telerik:RadTileView Name="TileVIew1" TileStateChanged="TileVIew1_TileStateChanged">
        <telerik:RadTileView.ContentTemplate>
            <DataTemplate>
                <telerik:RadFluidContentControl ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.SmallContent>
                        <Grid Width="200" Height="200">
                            <TextBlock Text="{Binding FirstName}" />
                        </Grid>
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <Grid Width="400" Height="400">
                            <TextBlock Text="{Binding FirstName}" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <!--  <Image Source="../Images/TileView/Flags/map.png" Grid.ColumnSpan="2" Grid.RowSpan="2" />  -->
                            <!--  <Image Source="{Binding LargeFlag}" Grid.Column="1" Margin="10" />  -->
                            <telerik:RadWrapPanel Margin="20">
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="First Name:" />
                                    <TextBlock Text="{Binding FirstName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Last Name:" />
                                    <TextBlock Text="{Binding LastName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Company Name:" />
                                    <TextBlock Text="{Binding CompanyName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Email ID:" />
                                    <TextBlock Text="{Binding EmailAddress}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Phone:" />
                                    <TextBlock Text="{Binding Phone}" />
                                </StackPanel>
                            </telerik:RadWrapPanel>
                            <TextBlock Grid.Row="1"
                                           Grid.ColumnSpan="2"
                                           Margin="20"
                                           FontSize="11"
                                           Text="{Binding EmailAddress}"
                                           TextWrapping="Wrap" />
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </DataTemplate>
        </telerik:RadTileView.ContentTemplate>
        <telerik:RadTileView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FirstName}" />
            </DataTemplate>
        </telerik:RadTileView.ItemTemplate>
    </telerik:RadTileView>
</Grid>

and in the handler for the TileStateChanged event you can change the content like this:

private void TileVIew1_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    RadTileViewItem container = e.OriginalSource as RadTileViewItem;
    if (container != null)
    {
        RadFluidContentControl fluidControl = container.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
        if (fluidControl != null)
        {
            switch (container.TileState)
            {
                case TileViewItemState.Maximized:
                    fluidControl.State = FluidContentControlState.Large;
                    break;
                case TileViewItemState.Minimized:
                    fluidControl.State = FluidContentControlState.Small;
                    break;
                case TileViewItemState.Restored:
                    fluidControl.State = FluidContentControlState.Normal;
                    break;
            }
        }
    }
}

If you have further questions feel free to ask.

All the best,
Zarko
the Telerik team