1

Проблема с автоматическим увеличением контролов, хотя по идее они этого не должны делать, по факту они выходят за границу допустимого размера.

Есть главное окно, в нем вызывается UserControl, в этом контроле есть GridView в котором в свою очередь в RowDetailsTemplate лежит TabControl, уже в нем есть 3 TabItem, в которых есть текстбоксы, кнопки, и GridView. Суть в том что при открытии RowDetailsTemplate и первой вкладки, размеры элементов подстраиваются под текст и выходят за границы. введите сюда описание изображения Здесь можно увидеть что поле Комментарий подстроилось под содержимое и увеличилось, так же и поле Email, перенос в текстбоксе включен... и как следствие можно видеть что кнопки выехали за границы экрана введите сюда описание изображения Здесь видно что GridView вообще страшно разъехался, как заставить их не выходить за границы и сохранять пропорции?(вариант с фиксированными размерами не рассматривается, нужно чтобы окно можно было растягивать и контент соответственно заполнял его)

Разметка главного окна

<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>

Разметка вложенного 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>

2
  • Вы бы повыкидывали контролы из вашего UI до тех пор, пока проблема не локализуется. Потому что кому ж охота пытаться воспроизвести такую простыню?
    – VladD
    11 янв 2016 в 22:34
  • 1
    У вас глючащие контролы в стек панели - она безразмерная, поэтому и ведет себя так. Используйте грид, к примеру.
    – Monk
    12 янв 2016 в 2:52

1 ответ 1

1

Любой современный UX-дизайнер, и простой дизайнер побьёт по рукам за горизонтальную компоновку элементов. Это вообще никогда не будет работать хорошо на разных дисплеях. Но, так или иначе, если вы всё-таки решили компоновать по горизонтали, и хотите обезопаситься от вот таких вылезаний за границы окна, задавайте элементам под таблицей жёсткие размеры.

Также, лучший вариант контейнера для подобной компоновки - WrapPanel. Он поддерживает автоматическую компоновку. При помощи него, разместив каждую пару TextBlock+TextBox например в контейнер <StackPanel Orientation=Horizontal> ... </StackPanel> можете получить довольно адекватное поведение под любой размер окна. Пример ниже.

<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>
3
  • а можно подробнее про "Любой современный UX-дизайнер, и простой дизайнер побьёт по рукам за горизонтальную компоновку элементов."?) Как правильно надо было сделать?
    – SaTuN
    12 янв 2016 в 15:34
  • Приложения сейчас используются на самых разных устройствах, и далеко не у всех этих устройств экран горизонтальный. И в вертикальной ориентации ваш вариант будет либо мелкий, либо не влезет. 12 янв 2016 в 15:54
  • Правильно - это использовать автоматическую компоновку под любое соотношение сторон окна. Но проще максимальное количество элементов располагать вертикальными списками - они гарантированно поместятся. А вот кнопки действий лучше размещать либо контекстно (внутри самого списка), либо внизу в отдельном контейнере, чтобы при любом количестве и размере других элементов они были всегда легко и понятно доступны. 12 янв 2016 в 19:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.