This is a migrated thread and some comments may be shown as answers.

Using RadFluidContentControl in a ListBox

4 Answers 110 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Kristy Saunders
Top achievements
Rank 1
Kristy Saunders asked on 20 Apr 2010, 07:03 PM
Hi,

I am trying to show a set of selectable items and I want to ensure that the display contents of each item varies as the item is resized.  Because RadTileView doesn't support selection, I created a ListBox and set the ItemTemplate to a data template that includes a RadFluidContentControl.  My demo code is below.  I find that when I resize the listbox is and its items, the RadFluidContentControl does not change its display state; the small contents always display.  When I use the same data template in a simple ContentControl (see demo code), I find that I do get the behavior I expect.  Question is: how do I use RadFluidContentControl in a ListBox?

Thanks,
Kristy


<Window x:Class="RadControlsWpfApp.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:radDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking" xmlns:System="clr-namespace:System;assembly=mscorlib" Title="Window1" Height="300" Width="300">  
  <Window.Resources> 
 
    <x:Array x:Key="ComposerList" Type="{x:Type System:String}">  
      <System:String>Mozart, Wolfgang Amadeus</System:String> 
      <System:String>G√≥recki, Henryk Mikolaj</System:String> 
      <System:String>Massenet, Jules</System:String> 
    </x:Array> 
      
    <System:String x:Key="Composer">Mozart, Wolfgang Amadeus</System:String> 
      
     <DataTemplate x:Key="listboxItemTemplate">  
      <telerik:RadFluidContentControl  
          Margin="2" 
          SmallToNormalThreshold="190, 40" 
          NormalToSmallThreshold="190, 40" 
          NormalToLargeThreshold="300, 160" 
          LargeToNormalThreshold="300, 160">  
        <!--Small--> 
        <telerik:RadFluidContentControl.SmallContent> 
          <Border  
            BorderBrush="LightBlue" 
            BorderThickness="1">  
            <StackPanel Orientation="Horizontal">  
              <TextBlock Text="Small" Margin="3" FontSize="12" /> 
              <TextBlock Text="{Binding}" Margin="3" FontSize="12" /> 
            </StackPanel> 
          </Border> 
        </telerik:RadFluidContentControl.SmallContent> 
        <!--Normal--> 
        <telerik:RadFluidContentControl.Content> 
          <Border  
            BorderBrush="Blue" 
            BorderThickness="1">  
            <StackPanel Orientation="Horizontal">  
              <TextBlock Text="Medium" Margin="3" FontSize="18" /> 
              <TextBlock Text="{Binding}" Margin="3" FontSize="18" /> 
            </StackPanel> 
          </Border> 
        </telerik:RadFluidContentControl.Content> 
        <!--Large--> 
        <telerik:RadFluidContentControl.LargeContent> 
          <Border BorderBrush="DarkBlue" BorderThickness="1">  
            <StackPanel Orientation="Horizontal">  
              <TextBlock Text="Large" Margin="3" FontSize="24" /> 
              <TextBlock Text="{Binding}" Margin="3" FontSize="24" /> 
            </StackPanel> 
          </Border> 
        </telerik:RadFluidContentControl.LargeContent> 
      </telerik:RadFluidContentControl> 
    </DataTemplate> 
 
  </Window.Resources> 
 
    <Grid> 
      <Grid.RowDefinitions> 
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
      </Grid.RowDefinitions> 
          <ListBox  
            Grid.Row="0" 
            HorizontalContentAlignment="Stretch" 
            VerticalContentAlignment="Stretch" 
            ItemsSource="{StaticResource ComposerList}" 
            ItemTemplate="{StaticResource listboxItemTemplate}"/>  
      <ContentControl   
        Grid.Row="1"   
        Content="{StaticResource Composer}"   
        ContentTemplate="{StaticResource listboxItemTemplate}"/>  
    </Grid>           
 
</Window> 
 

4 Answers, 1 is accepted

Sort by
0
Miro Miroslavov
Telerik team
answered on 23 Apr 2010, 09:41 AM
Hi Kristy Saunders,

The problem here is the the ListBox Items are layed-out by its ItemsPanel, and currently there isn't a panel that will make it's children to share all the available size. For example the default ListBox panel - StackPanel will make all it's children as small as possible. In order to make this to work you'll need to create such a panel on your own, and after that to modify the ListBox to remove the ScrollView from it's template. Which can be hard and time consuming.
In my opinion you'd better use RadTileView and create simple Selection behavior, that meats your needs.

Regards,
Miro Miroslavov
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.
0
Kristy Saunders
Top achievements
Rank 1
answered on 23 Apr 2010, 06:30 PM
Miro Miroslavov,

Thanks for getting back to me.  I understand that a StackPanel with vertical orientation will stack children without affecting their height.    However, when I cross the small-to-normal width threshold when I resize the ListBox width (and also then its items' widths, which are housed in ListBoxItem's with stretched HorizontalContentAlignment), I expect that the RadFluidContentControls will switch content.  That does not happen.  Can I infer that both width and height thresholds must be crossed for the content state to change?  (I note that testing risizing with a single RadFluidContentControl alone in a window demonstrates strangely inconsistent behavior wrt content state changes and resizing width vs. height).  

If it is the case that both width and height thresholds must be crossed for content state to change (more or less), then I'd like to request the a new property to allow configuration of how thresholds are evaluated (HeightAndWidth, HeightOnly, WidthOnly).  I believe this would solve my problem.

Considering your suggestion:  I am looking for an items control (preferably not homegrown) that allows for 1) dynamic item templating based on item size, 2) drag and drop reordering, and 3) item selection.  TileView meets requirements #1 and half of #2.  I could implement selection to get #3 as you suggest.  However, wrt #2, I don't see that TileView provides notification when items are reordered.  Consider: My application displays items A, B and C, in that order and the order is meaningful; the user reorders to C, B, and A.  Is there any way my application can detect and track the new ordering?

Please advise.

Thanks,
Kristy
0
Kiril Stanoev
Telerik team
answered on 29 Apr 2010, 11:00 AM
Hello Kristy,

After some research with Miroslav, we came to the conclusion the the current version of RadFluidContentControl does not behave as expected when used in a scenario where the RadFluidContentControls is placed in the DataTemplate of an item. We have plans to improve RadFluidContentControl and this scenario will be supported out of the box. However, currently I cannot bind to a specific date when this feature will be provided.
To answer your other question. RadTileView provides an event that gets raised every time you reorder the items. The event is called PositionChanged and it is fired when a tile's position has been changed while reordering the tiles with dragging.

Regards,
Kiril Stanoev
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.
0
Kristy Saunders
Top achievements
Rank 1
answered on 03 May 2010, 05:16 PM
Kiril,

Thanks for getting back to me.  I look forward to a data template-compatible version of this control.  Thanks for researching.

Kristy
Tags
TileView
Asked by
Kristy Saunders
Top achievements
Rank 1
Answers by
Miro Miroslavov
Telerik team
Kristy Saunders
Top achievements
Rank 1
Kiril Stanoev
Telerik team
Share this question
or