The problem is with the automatic increase of controls, although in theory they should not do this, in fact they are beyond the limit of the admissible size.

There is a main window, UserControl is called in it, there is a GridView in this control, which in turn in the RowDetailsTemplate is a TabControl, it already has 3 TabItem, which have text boxes, buttons, and a GridView. The bottom line is that when you open the RowDetailsTemplate and the first tab, the dimensions of the elements are adjusted to the text and go beyond the boundaries. enter image description here Here you can see that the Comment field has been adjusted to the content and has increased, so is the Email field, the transfer in the textbox is on ... and as a result, you can see that the buttons have moved beyond the screen enter image description here Here you can see that the GridView was scared to disperse in general, how to make them not go beyond the boundaries and maintain proportions? (The option with fixed sizes is not considered, you need to stretch the window and content fill it accordingly)

Main window layout

<catel:Window.Resources> <catel:ViewModelToViewConverter x:Key="ViewModelToViewConverter" /> </catel:Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="2*" /> <RowDefinition Height="2*" /> <RowDefinition Height="23*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label x:Name="label" Grid.Row="0" Grid.Column="0" Margin="10" Content="Пользователь:" /> <Label x:Name="label1" Grid.Row="1" Grid.Column="0" Margin="10" Content="Роль: "/> <telerik:RadRadioButton x:Name="radToggleButton" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Command="{Binding ShowCustomerView}" Grid.Column="1" Content="Клиенты" IsChecked="True" IsThreeState="False" /> <telerik:RadRadioButton x:Name="radToggleButton1" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Grid.Column="2" Content="Абонементы" IsChecked="False" IsThreeState="False" /> <telerik:RadRadioButton x:Name="radToggleButton2" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Grid.Column="3" Content="Посещения" IsChecked="False" IsThreeState="False" /> <telerik:RadRadioButton x:Name="radToggleButton3" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Command="{Binding ShowServiceView}" Grid.Column="4" Content="Услуги" IsChecked="False" IsThreeState="False" /> <telerik:RadRadioButton x:Name="radToggleButton4" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Grid.Column="5" Content="Посещения" IsChecked="False" IsThreeState="False" /> <telerik:RadRadioButton x:Name="radToggleButton5" Grid.Row="0" Grid.RowSpan="2" Margin="10,35,10,35" Grid.Column="6" Content="Тренер" IsChecked="False" IsThreeState="False" /> <Rectangle Height="3" Fill="Gray" Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="1" VerticalAlignment="Bottom" /> <Rectangle Width="3" Fill="Gray" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Right" /> <ContentControl Grid.Row="2" Grid.ColumnSpan="7" Content="{Binding CurrentViewModel, Converter={StaticResource ViewModelToViewConverter}}"/> </Grid>

Markup nested UserControl

 <catel:UserControl x:Class="ISOlymp.User.Views.CustomerView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ViewModels="clr-namespace:ISOlymp.User.ViewModels" xmlns:catel="http://catel.codeplex.com" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ISOlymp.User.ViewModels" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Background="White" FontSize="14" d:DataContext="{d:DesignInstance ViewModels:CustomerViewModel, IsDesignTimeCreatable=True}" mc:Ignorable="d"> <catel:UserControl.Resources> <local:CustomerViewModel x:Key="CustomerViewModel" /> <Style x:Key="ButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Button.IsEnabled" Value="True" /> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=UserTable, Path=SelectedItem}" Value="{x:Null}"> <Setter Property="Button.IsEnabled" Value="False" /> </DataTrigger> </Style.Triggers> </Style> </catel:UserControl.Resources> <Grid DataContext="{StaticResource CustomerViewModel}"> <Grid.RowDefinitions> <RowDefinition Height="3*" /> <RowDefinition Height="26*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <telerik:RadButton x:Name="radButton" Grid.Row="0" Width="150" Margin="0,15" Command="{Binding AddCustomer}" Content="Добавить клиента" HorizontalAlignment="Left" /> <telerik:RadGridView x:Name="UserTable" Grid.Row="1" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserResizeColumns="False" GroupRenderMode="Flat" EditTriggers="None" FontSize="14" IsReadOnly="True" ItemsSource="{Binding Users}" RowDetailsVisibilityMode="VisibleWhenSelected" RowIndicatorVisibility="Collapsed" SelectedItem="{Binding SelectedUser}"> <telerik:RadGridView.Columns> <telerik:GridViewToggleRowDetailsColumn IsVisible="False" /> <telerik:GridViewDataColumn DataMemberBinding="{Binding Surname}" Header="Фамилия" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="Имя" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataMemberBinding="{Binding Patronymic}" Header="Отчество" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataMemberBinding="{Binding Email}" Header="Email" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataFormatString="dd.MM.yyyy" DataMemberBinding="{Binding Birthday}" Header="Дата рождения" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataMemberBinding="{Binding Phone}" Header="Телефон" Width="1*" ShowDistinctFilters="False"/> <telerik:GridViewDataColumn DataMemberBinding="{Binding Comment}" Header="Комментарий" Width="2*" ShowDistinctFilters="False"/> </telerik:RadGridView.Columns> <telerik:RadGridView.RowDetailsTemplate> <DataTemplate> <telerik:RadTabControl x:Name="RadTabControl1" Height="200" Margin="8" > <telerik:RadTabItem Header="Детали"> <Grid Width="Auto" HorizontalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="3*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Фамилия: " /> <TextBox Grid.Row="0" Grid.Column="1" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Surname}" /> <TextBlock Grid.Row="0" Grid.Column="2" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Email: " /> <TextBox Grid.Row="0" Grid.Column="3" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Email}" /> <TextBlock Grid.Row="0" Grid.Column="4" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Комментарий: " /> <TextBox Grid.Row="0" Grid.RowSpan="3" Grid.Column="5" Margin="5,10,0,10" AcceptsReturn="True" Foreground="Black" IsReadOnly="True" Text="{Binding Comment}" TextWrapping="Wrap" /> <TextBlock Grid.Row="1" Grid.Column="0" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Имя: " /> <TextBox Grid.Row="1" Grid.Column="1" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Name}" /> <TextBlock Grid.Row="1" Grid.Column="2" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Дата рождения: " /> <TextBox Grid.Row="1" Grid.Column="3" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Birthday, StringFormat=dd.MM.yyyy}" /> <StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="6" DataContext="{StaticResource CustomerViewModel}"> <telerik:RadButton Name="EditCustomer" Grid.Row="1" Grid.Column="6" Margin="10" Command="{Binding EditCustomer}" Content="Редактировать данные клиента" /> <telerik:RadButton Name="DeleteCustomer" Grid.Row="2" Grid.Column="6" Margin="10" Command="{Binding RemoveCustomer}" Content="Удалить клиента" /> </StackPanel> <TextBlock Grid.Row="2" Grid.Column="0" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Отчество: " /> <TextBox Grid.Row="2" Grid.Column="1" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Patronymic}" /> <TextBlock Grid.Row="2" Grid.Column="2" Margin="0,10,0,10" HorizontalAlignment="Right" FontWeight="Bold" Foreground="Black" Text="Телефон: " /> <TextBox Grid.Row="2" Grid.Column="3" Height="25" Margin="5,10,0,10" Foreground="Black" IsReadOnly="True" Text="{Binding Phone}" /> </Grid> </telerik:RadTabItem> <telerik:RadTabItem Header="Абонементы"> <Grid Width="Auto" HorizontalAlignment="Stretch" DataContext="{StaticResource CustomerViewModel}"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <telerik:RadGridView Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Margin="5" ItemsSource="{Binding}" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserResizeColumns="False" EditTriggers="None" IsReadOnly="True" RowIndicatorVisibility="Collapsed" > <telerik:RadGridView.Columns> <telerik:GridViewDataColumn Header="Услуга" Width="2*" DataMemberBinding="{Binding}"/> <telerik:GridViewDataColumn Header="Дата покупки" Width="2*" DataMemberBinding="{Binding}"/> <telerik:GridViewDataColumn Header="Всего посещений" Width="2*"/> <telerik:GridViewDataColumn Header="Осталось посещений" Width="2*"/> <telerik:GridViewDataColumn Header="Цена" Width="1*"/> </telerik:RadGridView.Columns> </telerik:RadGridView> <telerik:RadButton Grid.Row="0" Grid.Column="1" Margin="10" Content="Добавить абонемент" /> <telerik:RadGridView Grid.Row="0" Grid.RowSpan="3" Grid.Column="2" Margin="5" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserResizeColumns="False" EditTriggers="None" IsReadOnly="True" ItemsSource="{Binding}" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False"> <telerik:RadGridView.Columns> <telerik:GridViewDataColumn Header="Дата" Width="1*"/> <telerik:GridViewDataColumn Header="Время начала" Width="1*"/> <telerik:GridViewDataColumn Header="Время окончания" Width="1*"/> </telerik:RadGridView.Columns> </telerik:RadGridView> <telerik:RadButton Grid.Row="1" Grid.Column="1" Margin="10" Content="Изменить данные абонемента" /> </Grid> </telerik:RadTabItem> <telerik:RadTabItem Header="Посещения" /> </telerik:RadTabControl> </DataTemplate> </telerik:RadGridView.RowDetailsTemplate> </telerik:RadGridView> <telerik:RadDataPager DisplayMode="FirstLastPreviousNextNumeric, Text" PageSize="17" Source="{Binding Items, ElementName=UserTable}" Grid.Row="3" /> </Grid>

  • You would throw out controls from your UI until the problem is localized. Because who wants to try to reproduce such a sheet? - VladD
  • one
    You have buggy controls on the stack of the panel - it is dimensionless, so it behaves like this. Use grid, for example. - Monk

1 answer 1

Any modern UX-designer, and a simple designer will beat his hands for the horizontal layout of the elements. It generally will never work well on different displays. But, anyway, if you decided to arrange horizontally, and want to protect yourself from getting out of the window like this, set the elements under the table to be rigid.

Also, the best container for a similar layout - WrapPanel . It supports automatic layout. With it, by placing each pair of TextBlock + TextBox, for example, in the <StackPanel Orientation=Horizontal> ... </StackPanel> you can get quite adequate behavior for any window size. An example below.

 <WrapPanel Orientation="Vertical"> <WrapPanel.Resources> <Style TargetType="{x:Type StackPanel}"> <Setter Property="Orientation" Value="Horizontal" /> </Style> </WrapPanel.Resources> <StackPanel> <TextBlock Text="{Binding MyPropertyLabel1}" /> <TextBox Text="{Binding MyPropertyValue1}" /> </StackPanel> <StackPanel> <TextBlock Text="{Binding MyPropertyLabel2}" /> <TextBox Text="{Binding MyPropertyValue2}" /> </StackPanel> <StackPanel> <TextBlock Text="{Binding MyPropertyLabel3}" /> <TextBox Text="{Binding MyPropertyValue3}" /> </StackPanel> ... <Button Content="Save" /> <Button Content="Cancel" /> </WrapPanel>
  • and you can read more about "Any modern UX-designer, and a simple designer will beat his hands over the horizontal layout of the elements."?) How to do it right? - SaTuN
  • Applications are now used on a variety of devices, and not all of these devices have a horizontal screen. And in a vertical orientation, your option will be either small or not fit. - Anton Papin
  • Correct - is to use automatic layout for any aspect ratio of the window. But it's easier to have the maximum number of items vertical lists - they are guaranteed to fit. But it is better to place action buttons either contextually (inside the list itself) or below in a separate container, so that with any number and size of other elements they are always easily accessible. - Anton Papin