Using RadFluidContentControl in a ListBox

[Kristy Saunders]

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>

[Miro Miroslavov]

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.

[Kristy Saunders]

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

[Kiril Stanoev]

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.

[Kristy Saunders]

Kiril,

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

Kristy