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

Wrap layout control group

2 Answers 359 Views

LayoutControl

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

OD asked on 29 Mar 2018, 04:32 PM

Hello,

I want to know if it's possible to wrap LayoutControl (inside a LayoutControlExpanderGroupin my example).

I'm not able to achieve this.

Here is a sample of my code :

<telerik:LayoutControlExpanderGroup Margin="0,10,0,0" IsExpandable="True" IsExpanded="true" Header="Paramètrage" Orientation="Horizontal" VerticalAlignment="Top">

<WrapPanel Orientation="Horizontal">

<telerik:LayoutControlGroup HorizontalAlignment="left" Orientation="Vertical" VerticalAlignment="top" Width="auto">

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Gestion multi-poste" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="Mono-poste" HorizontalAlignment="left" Width="350" HorizontalContentAlignment="left" />

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Catégories masters" HorizontalAlignment="left" VerticalAlignment="Center" Width="auto" />

<telerik:RadDropDownButton Content="VE" HorizontalAlignment="left" Width="350" HorizontalContentAlignment="left" />

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Affichage des records sur feuilles terrain" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Dossards" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Utilisation des clubs Maitres (impression)" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Epreuves officielles uniquement" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Compétition en live" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Affichage sur tableau externe" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlGroup VerticalAlignment="Top" >

<DockPanel >

<TextBlock Text="Controle du type de licences autorisées" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="top" Width="200" />

<CheckBox x:Name="chkTypeLicence" VerticalAlignment="Top" HorizontalAlignment="left"/>

<telerik:RadListBox Visibility="{Binding IsChecked,ElementName=chkTypeLicence,Converter={StaticResource BoolToVisConverter }}" >

<telerik:RadListBoxItem >

<TextBlock Text="Type licence 1" Height="auto"/>

</telerik:RadListBoxItem>

<telerik:RadListBoxItem >

<TextBlock Text="Type licence 2" Height="auto"/>

</telerik:RadListBoxItem>

<telerik:RadListBoxItem >

<TextBlock Text="Type licence 3" Height="auto"/>

</telerik:RadListBoxItem>

</telerik:RadListBox>

</DockPanel>

</telerik:LayoutControlGroup>

<telerik:LayoutControlTabGroup Grid.Column="1" VerticalAlignment="top" >

<telerik:LayoutControlTabGroupItem Header="Stade" >

<telerik:LayoutControlGroup Orientation="Vertical" >

<DockPanel >

<TextBlock Text="Utilisation des montées de barres" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Utilisation des performances d'engagement" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<DockPanel >

<TextBlock Text="Table de points" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="Hongroise" HorizontalAlignment="left" Width="350" HorizontalContentAlignment="left" />

</DockPanel>

<DockPanel >

<TextBlock Text="Type de chronomètrie" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="E" HorizontalAlignment="left" Width="80" HorizontalContentAlignment="left" />

</DockPanel>

<DockPanel>

<TextBlock Text="Société de chronomètrie" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="Société 1" HorizontalAlignment="left" Width="350" HorizontalContentAlignment="left" />

</DockPanel>

<DockPanel >

<TextBlock Text="Exporter le triathlon calculé" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<DockPanel >

<TextBlock Text="Critériums" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="top" Width="200" />

<CheckBox x:Name="chkCriterium" HorizontalAlignment="left" VerticalAlignment="top"/>

<telerik:RadListBox Visibility="{Binding IsChecked,ElementName=chkCriterium,Converter={StaticResource BoolToVisConverter }}" >

<telerik:RadListBoxItem >

<TextBlock Text="Critérium 1" Height="auto"/>

</telerik:RadListBoxItem>

<telerik:RadListBoxItem >

<TextBlock Text="Critérium 2" Height="auto"/>

</telerik:RadListBoxItem>

<telerik:RadListBoxItem >

<TextBlock Text="Critérium 3" Height="auto"/>

</telerik:RadListBoxItem>

</telerik:RadListBox>

</DockPanel>

</telerik:LayoutControlGroup>

</telerik:LayoutControlTabGroupItem>

<telerik:LayoutControlTabGroupItem Header="Ekiden">

<telerik:LayoutControlGroup Orientation="Vertical">

<DockPanel >

<TextBlock Text="Unicité des dossards sur la compétition" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<DockPanel >

<TextBlock Text="Saisie des temps au parcours" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

</telerik:LayoutControlGroup>

</telerik:LayoutControlTabGroupItem>

<telerik:LayoutControlTabGroupItem Header="Hors Stade" >

<telerik:LayoutControlGroup Orientation="Vertical">

<DockPanel >

<TextBlock Text="Incrémentation automatique des n° de dossards" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Unicité des dossards sur la compétition" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<DockPanel >

<TextBlock Text="Unité allure" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="Km/h" HorizontalAlignment="left" Width="120" HorizontalContentAlignment="left" />

</DockPanel>

<DockPanel >

<TextBlock Text="Utiliser la table des prénoms féminins" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Bloquer l'affectation automatique des dossards sur la compétition" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<!--<DockPanel >

<TextBlock Text="Bloquer l'affectation automatique des dossards sur la compétition" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>-->

<DockPanel >

<TextBlock Text="Calcul des catégories en priorité sur les ages des catégories non officielles" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<DockPanel >

<TextBlock Text="Utiliser le code E/I dans les résultats par équipe" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

<TextBlock Margin="75,0,0,0" Text="Composer automatiquement les équipes 1, 2, 3 si elles existent" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>

<!--<DockPanel >

<TextBlock Text="Composer automatiquement les équipes 1, 2, 3 si elles existent" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<CheckBox HorizontalAlignment="left"/>

</DockPanel>-->

<DockPanel >

<TextBlock Text="Méthode de composition pour les classements par équipe" TextWrapping="wrap" HorizontalAlignment="left" VerticalAlignment="Center" Width="200" />

<telerik:RadDropDownButton Content="Ligue" HorizontalAlignment="left" Width="120" HorizontalContentAlignment="left" />

</DockPanel>

</telerik:LayoutControlGroup>

</telerik:LayoutControlTabGroupItem>

</telerik:LayoutControlTabGroup>

</WrapPanel>

</telerik:LayoutControlExpanderGroup>

When i reduce my window with, i want that LayoutControlTabGroupgo under my LayoutControlGroup.

Thanks in advance.

Regards.

2 Answers, 1 is accepted

Accepted

answered on 03 Apr 2018, 10:48 AM

Hello Jean-Marc,

RadLayoutControl doesn't support responsive layout of the box. In other words, there is no built-in mechanism that will reorder the groups so that they fit into the available space. In order to achieve your requirement you can manually re-arrange the layout when the size of the window changes. For example, in your case you can manually set the Orientation of the WrapPanel that holds the groups to Vertical when the size is reduced.

I hope this information helps.

Regards,
Martin Ivanov
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.