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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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