RadTileView and Binding

[Darek]

Since it is not clearly stated anywhere else, I've thought Id help another soul, and give an example how to easily use RadTileView with data binding. RadTileView implements ItemsControl and as such can be treated as one. So the code below is completely valid:

<telerikNavigation:RadTileView ItemsSource="{Binding Items}">
            <telerikNavigation:RadTileView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" Style="{StaticResource HeaderTitle}"/>
                </DataTemplate>
            </telerikNavigation:RadTileView.ItemTemplate>
            <telerikNavigation:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="291, 130"
                                                NormalToSmallThreshold="291, 130"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="730, 350">
                        <telerik:RadFluidContentControl.SmallContent>
                            <Border Width="193" Height="30">
                                <TextBlock Text="Small Content" Style="{StaticResource SmallBox}"/>
                            </Border>
                        </telerik:RadFluidContentControl.SmallContent>
                        <telerik:RadFluidContentControl.Content>
                            <Border Width="279" Height="130">
                                <TextBlock Text="Content" Style="{StaticResource SmallBox}"/>
                            </Border>
                        </telerik:RadFluidContentControl.Content>
                        <telerik:RadFluidContentControl.LargeContent>
                            <Border Width="730" Height="350">
                                <TextBlock Text="Large Content" Style="{StaticResource SmallBox}"/>
                            </Border>
                        </telerik:RadFluidContentControl.LargeContent>
                    </telerik:RadFluidContentControl>
                </DataTemplate>
            </telerikNavigation:RadTileView.ContentTemplate>
</telerikNavigation:RadTileView>

[Bobi]

Hi Darek,

Thank you for the interest in our controls and for the helpful example.


Best wishes,
Bobi
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[shanthu kere]

WHen there slightly more items (say 31 items), when a particular items is selected, the right side gets crowded. Did you encounter such scenario?

[Tina Stancheva]

Hello shanthu kere,

We are aware of this issue. It is added in our PITS as Issue ID 322 - TileView: put minimized items in a scrollviewer and you can vote for it thus increasing its priority.

We are sorry for the caused incontinence. Let us know if you need more info.




Kind regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Dan Andrews]

This was fixed?  When I have a lot of items, I don't get a scroll bar...

<t:RadTileView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding not_type}" />
                        </DataTemplate>
                    </t:RadTileView.ItemTemplate>
                    <t:RadTileView.ContentTemplate>
                        <DataTemplate>

                                <t:RadFluidContentControl t:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="100, 100"
                                                NormalToSmallThreshold="100, 100"
                                                NormalToLargeThreshold="100, 100"
                                                LargeToNormalThreshold="100, 100" >

                                    <t:RadFluidContentControl.SmallContent >
                                        <Border Width="193" Height="100" MinHeight="100">
                                            <TextBlock Text="{Binding not_text}" />
                                        </Border>
                                    </t:RadFluidContentControl.SmallContent>

                                    <t:RadFluidContentControl.Content>
                                        <Border Width="279" Height="100" MinHeight="100">
                                            <TextBlock Text="{Binding not_text}" />
                                        </Border>
                                    </t:RadFluidContentControl.Content>

                                    <t:RadFluidContentControl.LargeContent>
                                        <Border Width="730" Height="100" MinHeight="100">
                                            <TextBlock Text="{Binding not_text}" />
                                        </Border>
                                    </t:RadFluidContentControl.LargeContent>

                                </t:RadFluidContentControl>

                        </DataTemplate>
                    </t:RadTileView.ContentTemplate>
                </t:RadTileView>

[Tina Stancheva]

Hello Darek,

You need to define the MinimizedHeight/MinimizedWidth property of the tiles in order to display a ScrollBar. If the RadTileView MinimizedItemsPosition is Left or Right, the MinimizedHeight property of each RadTileViewItem has to be set.

<t:RadTileView.ItemContainerStyle>
                <Style TargetType="t:RadTileViewItem">
                    <Setter Property="MinimizedHeight"
                            Value="100" />
                </Style>
</t:RadTileView.ItemContainerStyle>

If the MinimizedItemsPosition is Top or Bottom, you need to define a MinimizedWidth for the minimezed items.

Give this a try and let us know if it works for you.

All the best,
Tina Stancheva
the Telerik team

[Robert]

Good monring,

I've tried the following XAML, however it doesn't seem to work. I just get a blank screen.

<telerik:RadTileView x:Name="contactTileView" Grid.Column="2" DataContext="{Binding ElementName=treeParks, Path=SelectedItem}">

            <telerik:RadTileView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ParkName}" />
                </DataTemplate>
            </telerik:RadTileView.ItemTemplate>
            <telerik:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadFluidContentControl telerik:AnimationManager.IsAnimationEnabled="True"
                                SmallToNormalThreshold="291, 130"
                                NormalToSmallThreshold="291, 130"
                                NormalToLargeThreshold="730, 350"
                                LargeToNormalThreshold="730, 350">

                        <telerik:RadFluidContentControl.SmallContent>
                            <Border Width="193" Height="30" MinHeight="30" BorderBrush="Red">
                                <TextBlock Text="{Binding ParkName}" />
                            </Border>
                        </telerik:RadFluidContentControl.SmallContent>
                        <telerik:RadFluidContentControl.Content>
                            <Border Width="279" Height="130" MinHeight="130" BorderBrush="Red">
                                <TextBlock Text="{Binding ParkName}" />
                            </Border>
                        </telerik:RadFluidContentControl.Content>
                        <telerik:RadFluidContentControl.LargeContent>
                            <Border Width="730" Height="350" MinHeight="350" BorderBrush="Red">
                                <TextBlock Text="{Binding ParkName}" />
                            </Border>
                        </telerik:RadFluidContentControl.LargeContent>

                    </telerik:RadFluidContentControl>
                </DataTemplate>
            </telerik:RadTileView.ContentTemplate>
        </telerik:RadTileView>

[Tina Stancheva]

Hello Robert,

I am not sure which part of your RadTileView is blank or if the whole control cannot be displayed in your application. However, if your goal is to create a RadTileView control integrated with the RadFluidContentControl I'd recommend using the approach described in this tutorial - at its end you'll find a link to a sample solution. Basically when you set the RadFluidContentControl threshold properties, you need to make sure that the size requirements they set are met. And as this may be a difficult to implement approach it's best to change the content of the  RadFluidContentControl with the RadTileViewItem states.

Kind regards,
Tina Stancheva
the Telerik team

[Shaun]

After updating my binaries to Q1 2013, this approach stopped working as-is.

Specifically, data binding doesn't seem to work anymore within the DataTemplate section.

Specifically, I can see the "Hello" textblock if I do this:

<telerikNavigation:RadTileView.ItemTemplate>

<DataTemplate>

<TextBlock Text="Hello" Style="{StaticResource HeaderTitle}"/>

</DataTemplate>

</telerikNavigation:RadTileView.ItemTemplate>

But I cannot see it if i do this:

<telerikNavigation:RadTileView.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Name}" Style="{StaticResource HeaderTitle}"/>

</DataTemplate>

</telerikNavigation:RadTileView.ItemTemplate>

Despite "Name" being a valid property on the objects being bound.   Binding within the ContentTemplate still seems to work as before.

Was something changed?  Again, this worked fine until I updated my binaries.

[Kalle]

Hi!

I have the same problem. I would like to bind TextBlock Text to property in RadTileViewItem's view model.
I found some older threads about this and at least back then you needed to have TileViewRegionAdapter to achieve this, is this still the case?

        <DataTemplate x:Key="HeaderTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding HeaderText}" HorizontalAlignment="Left" Width="Auto"/>
                <telerik:RadButton Width="14"
                                   Height="14"
                                   Margin="0 0 0 0"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Content="X"
                                   FontSize="10"
                                   Foreground="Black"
                                   Background="White"
                                   Command="{Binding RemoveTileCommand}"
                                   CommandParameter=""
                                   Padding="0"/>
            </StackPanel>
        </DataTemplate>

    </UserControl.Resources>

    <Grid Margin="0,0,0,-6">
        <telerik:RadTileView
            ItemTemplate="{StaticResource HeaderTemplate}"
...

In addition I'm trying to implement button in TileView's header that can be used to remove the tile. But I would like to be able to bind this button's command (DelegateCommand) to Shell's view model and not to the TileViewItem's view model.

Thanks!

Br,

Kalle

[Petar Mladenov]

Hi Kalle and Shaun,

 Binding the Header is demonstrated in both our WPF/SL demos:

<DataTemplate x:Key="headerTemplate">
          <StackPanel Orientation="Horizontal">
              <TextBlock Text="{Binding Destination}" />
              <TextBlock Text=" Trip" />
          </StackPanel>
      </DataTemplate>
  </UserControl.Resources>

  <telerik:RadTileView Width="1123"
                          Height="579"
                          ContentTemplate="{StaticResource contentTemplate}"
                          IsItemDraggingEnabled="{Binding ElementName=IsItemDraggingEnabledOption,
                                                          Path=IsChecked}"
                          ItemsSource="{Binding Items}"
                          ItemTemplate="{StaticResource headerTemplate}"

And I also prepared a test project working properly with Q1 dlls. Please check it out and let us know if we are missing something.

@Kalle
Binding to a "Global" ViewModel's Command from a DataTemplate can be performed by adding the MainViewModel as a StaticResource in XAML:

<grid.resources>
            <local:MainViewModel x:key=viewModel />
</grid.resources>
...
<datatemplate>
             <Button Command={Binding GlobalCommand, Source={StaticResource viewModel} ....

We hope this will help you proceed further.

Kind regards,
Petar Mladenov
the Telerik team

[Alan]

I'm having the same issue as Shaun, the following code worked fine before updating to the Q1 binaries, it no longer binds.

<telerik:RadTileView HorizontalAlignment="Stretch"

                         VerticalAlignment="Stretch"

                         ItemsSource="{Binding Documents, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"

                         IsItemDraggingEnabled="True"

                         ContentTemplate="{StaticResource TileContentTemplate}"

                         ItemContainerStyle="{StaticResource RadTileViewItemTemplate}"

                         TileStateChanged="TileView_StateChanged"

                         MinimizedRowHeight="46"

                         MinimizedColumnWidth="250"

                         ColumnsCount="4"

                         RowHeight="150"

                         Name="DocumentsTileView">

            <telerik:RadTileView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="{Binding Title}" Foreground="White" FontWeight="Medium" Margin="0,0,0,0"/>

                    </StackPanel>

                </DataTemplate>

            </telerik:RadTileView.ItemTemplate>

        </telerik:RadTileView>

Petar's example shows a similar scenario to what I'm doing here, however, I believe that binding to the RadTileView.ItemsSource causes very different behavior than simply setting it in the constructor.

If his example could be updated showing just some simple binding, it would be much appreciated.

[Shaun]

I didn't have any problems making it work with a small sample project....

I suspect it has something to do with async fetching of the objects or some other sort of binding/timing issue.

Unfortunately I haven't had the time to dig in further.

[Petar Mladenov]

Hi Alan,

 We don't believe binding the ItemSource vs. setting it in code behind will introduce a change. This is demonstrated in the attached project. I am afraid your code snippet is insufficient. Is it possible for you to send us an isolated sample replicating your issues so that we can better investigate them and advice you? We haven't received any other reports for binding issues in TileView introduced in Q1 2013. Thank you in advance for your cooperation.

All the best,
Petar Mladenov
the Telerik team

[Nathaniel]

I just update to the

Q1 2013 (version 2013.1.0220)

and I am having problems just like what the other describe.  I set my TileView Items source in the code behind.

[Zarko]

Hi Nathaniel,
We've really made some changes in the RadTileViewItem's style - now the content of the TileViewItemHeader is bound in the style

<Telerik_Windows_Controls_TileView:TileViewItemHeader x:Name="HeaderPart"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                Content="{TemplateBinding Header}"

instead of setting it in code behind

protected override void OnHeaderChanged(object oldHeader, object newHeader)
{
    base.OnHeaderChanged(oldHeader, newHeader);

    if (this.headerElement != null)
    {
        this.headerElement.Content = this.Header;
    }
}

but this should not break the ItemTemplate bindings, unless you're using custom styles with custom item template. If this is the case you'll have to add this bindings to your templates

<ContentPresenter x:Name="HeaderElement"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            ... />
<!--This is in the TileViewItemHeaderStyle's Template-->

<Telerik_Windows_Controls_TileView:TileViewItemHeader x:Name="HeaderPart"

                ContentTemplate="{TemplateBinding HeaderTemplate}"

                Content="{TemplateBinding Header}"
                ... />
<!--This is in the RadTileViewItemStyle's Template-->

and I'd really like to apologize for the breaking change, the caused inconvenience and for missing this in our release notes. I'd be glad to help you with your custom styles if you can't fix them yourselves.
If this is not the case I'd like to ask you (and everyone who has the same issue) to send us a sample project which reproduces the issue so that we could fix it as soon as possible, or at least give us as much information as you can - do you use custom styles (!), do you change the ItemsSource run time, how do you change it, which theme do you use, when does the binding breaks - on initial loading or after some action, how do you load your items and etc.
I hope I was able to help you and we're looking forward to hearing from you everyone else who had this issue.

Regards,
Zarko
the Telerik team

[Alan]

Zarko, this fix was exactly what we needed. I should have clarified that we were using a custom control template. However, since the demo uses a custom control template, it seems only natural to assume that any user would.

So, sorry for being unclear, and thank you very much for the update!