RadTileView and Binding

17 posts, 0 answers
  1. Darek
    Darek avatar
    16 posts
    Member since:
    Mar 2009

    Posted 15 Feb 2010 Link to this post

    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> 

  2. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 15 Feb 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. shanthu kere
    shanthu kere avatar
    2 posts
    Member since:
    Apr 2010

    Posted 02 May 2010 Link to this post

    WHen there slightly more items (say 31 items), when a particular items is selected, the right side gets crowded. Did you encounter such scenario?
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 May 2010 Link to this post

    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.
  6. Dan Andrews
    Dan Andrews avatar
    28 posts
    Member since:
    Jul 2009

    Posted 24 Jan 2011 Link to this post

    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>
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 27 Jan 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  8. Robert
    Robert avatar
    271 posts
    Member since:
    Mar 2011

    Posted 26 Mar 2012 Link to this post

    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>
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  10. Shaun
    Shaun avatar
    16 posts
    Member since:
    Jul 2012

    Posted 18 Mar 2013 Link to this post

    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.
  11. Kalle
    Kalle avatar
    26 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

    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
  12. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 21 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  13. Alan
    Alan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 21 Mar 2013 Link to this post

    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.
  14. Shaun
    Shaun avatar
    16 posts
    Member since:
    Jul 2012

    Posted 21 Mar 2013 Link to this post

    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.
  15. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  16. Nathaniel
    Nathaniel avatar
    68 posts
    Member since:
    Nov 2010

    Posted 04 Apr 2013 Link to this post

    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.
  17. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 05 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  18. Alan
    Alan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 05 Apr 2013 Link to this post

    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!
Back to Top
UI for WPF is Visual Studio 2017 Ready