How to implement the ItemsSource property for the LayoutGroup/LayoutControl control

Question Comments

---

Added By: Andrew Cope 2 at: 1/2/2018 3:46:31 AM    I had to override the OnAttached() event:

[C#]
protectedoverridevoidOnAttached(){base.OnAttached();ArrangeChildren();}

And you also need a guard on ArrangeChildren():

[C#]
{if(AssociatedObject==null)return;

Without this ArrangeChildren() was only called once and it was before AssociatedObject had been set.

Although so far it hasn't actually solved my problem anyway - the controls haven't lined up :-/ Added By: Ivan (DevExpress Support) at: 1/3/2018 1:32:12 AM    

Hi Andrew,
Your approaches are absolutely correct. I have updated this example to apply them and slightly changed the implementation to make it possible to attach our custom behavior to individual groups. It is now unnecessary to obtain groups by their names, and you also can populate multiple groups within your LayoutControl dynamically.
As for the last issue, please check if it exists in the updated example and let me know your results.

Added By: Andrew Cope 2 at: 1/24/2018 6:43:38 AM    Unfortunately there's another bug here :)

RearrangeChildren() is too indiscriminate when it responds to a .Reset event - it clears down everything as well as any items you have added. In my case I ended up with an almost empty view :) I modified my version to only remove FrameworkElements where the DataContext was set appropriately. In my case the DataContext is of type ButtonDescriptor:

[C#]
if(e.Action==NotifyCollectionChangedAction.Reset){varunwantedItems=newList<FrameworkElement>();foreach(varchildinAssociatedObject.Children){if(childisFrameworkElementelement){if(element.DataContextisButtonDescriptor)unwantedItems.Add(element);}}foreach(varunwantedIteminunwantedItems){AssociatedObject.Children.Remove(unwantedItem);}}

Added By: Andrew Cope 2 at: 1/24/2018 6:58:07 AM    Oh, and yes, my other problem was resolved. It was another problem entirely :)Added By: Ivan (DevExpress Support) at: 1/25/2018 4:59:51 AM    Indeed, this approach is too aggressive and assumes that all items are generated from the ItemsSource collection. Thank you for sharing your final solution with us :)Added By: Bob Sleys at: 3/6/2018 8:46:01 AM    I am attempting to make use of this but am having trouble in the items in the groups aren't arranged properly.  I'm getting all the items added and can even adjust them via databound properties, ie Horizontal/Vertical, input type by datatemplates etc.  I just can't get the alignment and sizing to work correctly.

Screen Shot

Notice in the above screen shot the labels aren't uniform in size in a group resulting in the inputs being jagged.

My XAML is:

[XAML]
<UserControlx:Class="ES_Desktop.Views.Policy.Forms.FormView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"xmlns:conv="clr-namespace:ES_Inf.WPF.Converters;assembly=ES-Inf"xmlns:helper="clr-namespace:ES_Inf.WPF.Helpers;assembly=ES-Inf"xmlns:vm="clr-namespace:ES_Desktop.ViewModels.Policy.Forms"xmlns:local="clr-namespace:ES_Desktop.Views.Policy.Forms"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"mc:Ignorable="d"d:DesignHeight="800"d:DesignWidth="600"d:DataContext="{dxmvvm:ViewModelSource Type={x:Type vm:FormViewModel}}"><UserControl.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionarySource="/ES-Desktop;component/Themes/ControlStyles.xaml"/></ResourceDictionary.MergedDictionaries><DataTemplateDataType="{x:Type TypeName=vm:CardViewModel}"><dxlc:LayoutGroupHeader="{Binding Caption}"Orientation="{Binding Path=FormSection.Vertical, Converter={conv:VertBoolToOrientation}}"ScrollBars="Auto"HorizontalAlignment="Left"VerticalAlignment="Top"View="GroupBox"><dxmvvm:Interaction.Behaviors><helper:ItemsSourceHelperItemsSource="{Binding QuestionViewModels}"/></dxmvvm:Interaction.Behaviors><dxlc:LayoutGroup.GroupBoxStyle><StyleTargetType="dxlc:GroupBox"><Style.Triggers><DataTriggerBinding="{Binding FormSection.HideTitle}"Value="true"><SetterProperty="TitleVisibility"Value="Collapsed"/><SetterProperty="Padding"Value="0"/></DataTrigger></Style.Triggers></Style></dxlc:LayoutGroup.GroupBoxStyle></dxlc:LayoutGroup></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:TableViewModel}"><local:TableView/></DataTemplate><StyleTargetType="dxlc:LayoutItem"><SetterProperty="LabelPosition"Value="{Binding LabelPosition}"/><SetterProperty="AddColonToLabel"Value="True"/><SetterProperty="Visibility"Value="{Binding HideInput, Converter={StaticResource  InverseBooleanToVisibilityConverter}}"/><SetterProperty="LabelTemplate"><Setter.Value><DataTemplate><TextBlockText="{Binding}"/></DataTemplate></Setter.Value></Setter><Style.Triggers><DataTriggerBinding="{Binding HideLabel}"Value="False"><SetterProperty="Label"Value="{Binding FormQuestion.ScreenLabel}"/></DataTrigger></Style.Triggers></Style><DataTemplateDataType="{x:Type TypeName=vm:StringQuestionViewModel}"><dxe:TextEditWidth="{Binding ScreenWidth}"EditValue="{Binding Var.Value}"IsReadOnly="{Binding FormQuestion.ReadOnly}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:CurrencyQuestionViewModel}"><dxe:SpinEditDisplayFormatString="{Binding FormQuestion.FormatString}"Increment="{Binding Increment}"EditValue="{Binding Var.Value}"Width="{Binding ScreenWidth}"IsReadOnly="{Binding FormQuestion.ReadOnly}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:BooleanQuestionViewModel}"><dxe:CheckEditVerticalAlignment="Center"HorizontalAlignment="Left"EditValue="{Binding Var.Value}"IsReadOnly="{Binding FormQuestion.ReadOnly}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:CalculatedQuestionViewModel}"/><DataTemplateDataType="{x:Type TypeName=vm:DateQuestionViewModel}"><dxe:DateEditWidth="{Binding ScreenWidth}"EditValue="{Binding Var.Value}"IsReadOnly="{Binding FormQuestion.ReadOnly}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:IntegerQuestionViewModel}"><dxe:TextEditWidth="{Binding ScreenWidth}"MaskType="Numeric"Mask="n0"EditValue="{Binding Var.Value}"IsReadOnly="{Binding FormQuestion.ReadOnly}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:PhoneQuestionViewModel}"><dxe:TextEditVerticalAlignment="Center"HorizontalAlignment="Left"Margin="5"Width="{Binding ScreenWidth}"MaskType="Regular"Mask="(\d?\d?\d?) \d\d\d-\d\d\d\d"EditValue="{Binding Var.Value}"IsReadOnly="{Binding FormQuestion.ReadOnly}"Visibility="{Binding HideInput, Converter={StaticResource InverseBooleanToVisibilityConverter}}"/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:DropDownQuestionViewModel}"><local:DropdownQuestionView/></DataTemplate><DataTemplateDataType="{x:Type TypeName=vm:ItemSelectQuestionViewModel}"><local:ItemSelectQuestionView/></DataTemplate></ResourceDictionary></UserControl.Resources><Grid><dxlc:LayoutControlOrientation="Vertical"ScrollBars="Auto"><dxlc:LayoutGroupView="Group"Orientation="Vertical"><dxmvvm:Interaction.Behaviors><helper:ItemsSourceHelperItemsSource="{Binding FormSections}"/></dxmvvm:Interaction.Behaviors></dxlc:LayoutGroup></dxlc:LayoutControl></Grid></UserControl>

Added By: Andrey Marten (DevExpress Support) at: 3/6/2018 10:00:25 AM    

Hello Bob,

To process your question in the most efficient way, I've extracted it to a separate thread:T613014: Groups are not arranged correctly when the approach from E5081 is used). It has been placed in our processing queue and will be answered shortly.

Thanks,
Andrey

Added By: Andrew Cope 2 at: 10/26/2018 4:33:53 AM    If anyone wants the ability to use this class to save/restore layouts there's a modified version of the LayoutControlHelper class here:

https://www.devexpress.com/Support/Center/Question/Details/T682098/save-restore-layout-behaving-oddly