Gridviewcolumn максимальная ширина: c# — Регулировка GridViewColumn Ширина – c# — GridViewColumn Регулировка ширины

Содержание

Общие сведения о GridView - WPF

  • Время чтения: 10 мин

В этой статье

GridViewрежим просмотра является одним из режимов представления для ListView элемента управления.GridView view mode is one of the view modes for a ListView control. GridView Класс и его вспомогательные классы позволяют пользователям просматривать коллекции элементов в таблице, которая обычно использует кнопки в качестве интерактивных заголовков столбцов.The GridView class and its supporting classes enable you and your users to view item collections in a table that typically uses buttons as interactive column headers. В GridView этом разделе описывается класс и его использование.This topic introduces the GridView class and outlines its use.

Что такое представление GridView?What Is a GridView View?

В GridView режиме просмотра отображается список элементов данных путем привязки полей данных к столбцам и отображения заголовка столбца для поиска поля.The GridView view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. Стиль по GridView умолчанию реализует кнопки в виде заголовков столбцов.The default GridView style implements buttons as column headers. С помощью кнопок для заголовков столбцов можно реализовать важные возможности взаимодействия с пользователем. Например, пользователи могут щелкнуть заголовок столбца, чтобы отсортировать GridView данные в соответствии с содержимым определенного столбца.By using buttons for column headers, you can implement important user interaction capabilities; for example, users can click the column header to sort GridView data according to the contents of a specific column.

Примечание

Элементы управления "кнопка GridView ", используемые для заголовков ButtonBaseстолбцов, являются производными от.The button controls that GridView uses for column headers are derived from ButtonBase.

На следующем рисунке показано GridView ListView представление содержимого.The following illustration shows a GridView view of ListView content.

GridViewстолбцы представлены GridViewColumn объектами, которые могут автоматически масштабироваться по содержимому.GridView columns are represented by GridViewColumn objects, which can automatically size to their content. При необходимости можно явно задать GridViewColumn определенную ширину.Optionally, you can explicitly set a GridViewColumn to a specific width. Можно изменить размеры столбцов, перетащив границу между заголовками столбцов.You can resize columns by dragging the gripper between column headers. Также можно динамически добавлять, удалять, заменять и переупорядочивать столбцы, так как эта функция встроена в GridView.You can also dynamically add, remove, replace, and reorder columns because this functionality is built into GridView. GridView Однако не может напрямую обновлять отображаемые данные.However, GridView cannot directly update the data that it displays.

В следующем примере показано GridView , как определить, отображающий данные о сотрудниках.The following example shows how to define a GridView that displays employee data. В этом примере ListView EmployeeInfoDataSource определяет как ItemsSource.In this example, ListView defines the

EmployeeInfoDataSource as the ItemsSource. Определения свойств для DisplayMemberBinding привязки GridViewColumn содержимого к EmployeeInfoDataSource категориям данных.The property definitions of DisplayMemberBinding bind GridViewColumn content to EmployeeInfoDataSource data categories.


<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name"/>
        
                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                     >
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No."/>
    </GridView>

  </ListView.View>
</ListView>

На следующем рисунке показана таблица, которая создается в предыдущем примере.The following illustration shows the table that the previous example creates. Элемент управления GridView отображает данные из объекта ItemsSource:The GridView control displays data from an ItemsSource object:

Макет и стиль GridViewGridView Layout and Style

Ячейки столбцов и заголовок столбца a GridViewColumn имеют одинаковую ширину.The column cells and the column header of a GridViewColumn have the same width. По умолчанию ширина каждого столбца изменяется в соответствии с шириной содержимого.By default, each column sizes its width to fit its content. При необходимости можно установить фиксированную ширину столбца.Optionally, you can set a column to a fixed width.

Связанные данные отображаются в горизонтальных строках.Related data content displays in horizontal rows. Например, на предыдущем рисунке фамилия, имя и идентификационный номер каждого сотрудника отображаются в виде набора, поскольку они отображаются в горизонтальной строке.For example, in the previous illustration, each employee's last name, first name, and ID number are displayed as a set because they appear in a horizontal row.

Определение и применение стилей к столбцам в GridViewDefining and Styling Columns in a GridView

При определении поля GridViewColumnданных для вывода в DisplayMemberBindingиспользуйте свойства, CellTemplateили CellTemplateSelector .When defining the data field to display in a GridViewColumn, use the DisplayMemberBinding, CellTemplate, or CellTemplateSelector properties. DisplayMemberBinding Свойство имеет приоритет над любым свойством шаблона.The DisplayMemberBinding property takes precedence over either of the template properties.

Чтобы задать выравнивание содержимого в столбце GridView, CellTemplateопределите.To specify the alignment of content in a column of a GridView, define a CellTemplate. Не используйте HorizontalContentAlignment свойства и VerticalContentAlignment для ListView содержимого, которое отображается с помощью GridView.Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content that is displayed by using a GridView.

Чтобы задать свойства шаблона и стиля для заголовков столбцов, GridViewиспользуйте GridViewColumnклассы, GridViewColumnHeader и.To specify template and style properties for column headers, use the GridView, GridViewColumn, and GridViewColumnHeader classes. Дополнительные сведения см. в разделе Общие сведения о стилях заголовков столбцов GridView и шаблонах.For more information, see GridView Column Header Styles and Templates Overview.

Добавление визуальных элементов в GridViewAdding Visual Elements to a GridView

Чтобы добавить визуальные элементы, такие CheckBox как Button и элементы управления, GridView в режим просмотра, используйте шаблоны или стили.To add visual elements, such as CheckBox and Button controls, to a GridView view mode, use templates or styles.

Если вы явно определили визуальный элемент как элемент данных, он может появиться только один раз в GridView.If you explicitly define a visual element as a data item, it can appear only one time in a GridView. Это ограничение существует, так как элемент может иметь только один родительский элемент и, таким образом, может появляться, только один раз в визуальном дереве.This limitation exists because an element can have only one parent and therefore, can appear only one time in the visual tree.

Применение стилей к строкам в GridViewStyling Rows in a GridView

Используйте классы GridViewHeaderRowPresenter GridViewи для форматирования и вывода строк. GridViewRowPresenterUse the GridViewRowPresenter and GridViewHeaderRowPresenter classes to format and display the rows of a GridView. Пример стиля строк в GridView режиме представления см. в разделе стиль строки в ListView, который реализует GridView.For an example of how to style rows in a GridView view mode, see Style a Row in a ListView That Implements a GridView.

Проблемы выравнивания при использовании ItemContainerStyleAlignment Issues When You Use ItemContainerStyle

Чтобы предотвратить проблемы выравнивания между заголовками столбцов и ячейками, не задавайте свойство или укажите шаблон, который влияет на ширину элемента в ItemContainerStyle.To prevent alignment issues between column headers and cells, do not set a property or specify a template that affects the width of an item in an ItemContainerStyle. Например Margin , не задавайте свойство или ControlTemplate укажите, который добавляет CheckBox в объект ItemContainerStyle , определенный для ListView элемента управления.For example, do not set the Margin property or specify a ControlTemplate that adds a CheckBox to an ItemContainerStyle that is defined on a ListView control. Вместо этого укажите свойства и шаблоны, влияющие на ширину столбца, непосредственно в классах GridView , определяющих режим представления.Instead, specify the properties and templates that affect column width directly on classes that define a GridView view mode.

Например, CheckBox чтобы добавить в строки в GridView режиме CheckBox просмотра DataTemplate, добавьте в, а затем задайте CellTemplate для DataTemplateсвойства значение.For example, to add a CheckBox to the rows in GridView view mode, add the CheckBox to a DataTemplate, and then set the CellTemplate property to that DataTemplate.

Взаимодействие пользователя с GridViewUser Interactions with a GridView

При использовании GridView в приложении пользователи могут взаимодействовать с и изменять форматирование GridView.When you use a GridView in your application, users can interact with and modify the formatting of the GridView. Например, пользователи могут изменить порядок столбцов, изменить размер столбца, выделить элементы в таблице и прокрутить содержимое.For example, users can reorder columns, resize a column, select items in a table, and scroll through content. Можно также определить обработчик событий, реагирующий на нажатие пользователем кнопки заголовка столбца.You can also define an event handler that responds when a user clicks the column header button. Обработчик событий может выполнять такие операции, как сортировка данных, отображаемых в, GridView в соответствии с содержимым столбца.The event handler can perform operations like sorting the data that is displayed in the GridView according to the contents of a column.

В следующем списке более подробно рассматриваются возможности использования для взаимодействия с GridView пользователем.The following list discusses in more detail the capabilities of using GridView for user interaction:

  • Изменение порядка столбцов с помощью перетаскиванияReorder columns by using the drag-and-drop method.

    Пользователи могут изменять порядок столбцов в GridView , нажимая левую кнопку мыши, находясь над заголовком столбца, а затем перетаскивая этот столбец в новую точку.Users can reorder columns in a GridView by pressing the left mouse button while it is over a column header and then dragging that column to a new position. Пока пользователь перетаскивает заголовок столбца, отображается плавающей версии заголовка, а также сплошная черная линия, показывающая место вставки столбца.While the user drags the column header, a floating version of the header is displayed as well as a solid black line that shows where to insert the column.

    Если необходимо изменить стиль по умолчанию для плавающей версии заголовка, укажите ControlTemplate GridViewColumnHeader для типа, который активируется, когда Role свойство имеет значение Floating.If you want to modify the default style for the floating version of a header, specify a ControlTemplate for a GridViewColumnHeader type that is triggered when the Role property is set to Floating. Дополнительные сведения см. в разделе Как создать стиль для перетаскиваемого заголовка столбца GridView.For more information, see Create a Style for a Dragged GridView Column Header.

  • Изменение размера столбца по его содержимомуResize a column to its content.

    Пользователям можно дважды щелкнуть границу справа от заголовка столбца, чтобы изменить размер столбца в соответствии с содержимым.Users can double-click the gripper to the right of a column header in order to resize a column to fit its content.

    Примечание

    Можно задать Width для Double.NaN свойства значение, чтобы получить такой же результат.You can set the Width property to Double.NaN to produce the same effect.

  • Выбор элементов строкSelect row items.

    Пользователи могут выбрать один или несколько элементов в GridView.Users can select one or more items in a GridView.

    Если вы хотите изменить Style элемент выбранного элемента, см. раздел Использование триггеров для стиля выбранных элементов в ListView.If you want to change the Style of a selected item, see Use Triggers to Style Selected Items in a ListView.

  • Прокрутка для просмотра содержимого, изначально не отображаемого на экранеScroll to view content that is not initially visible on the screen.

    Если размер GridView объекта не достаточен для отображения всех элементов, пользователи могут прокручивать горизонтально или вертикально с помощью полос прокрутки, предоставляемых ScrollViewer элементом управления.If the size of the GridView is not large enough to display all the items, users can scroll horizontally or vertically by using scrollbars, which are provided by a ScrollViewer control. ScrollBar Скрывается, если все содержимое отображается в определенном направлении.A ScrollBar is hidden if all the content is visible in a specific direction. При использовании полос прокрутки заголовки столбцов не прокручиваются по вертикали, но могут прокручиваться по горизонтали.Column headers do not scroll with a vertical scroll bar, but do scroll horizontally.

  • Взаимодействие со столбцами путем нажатия кнопок заголовков столбцовInteract with columns by clicking the column header buttons.

    При нажатии кнопки заголовка столбца можно отсортировать данные, которые отображаются в столбце, если указан алгоритм сортировки.When users click a column header button, they can sort the data that is displayed in the column if you have provided a sorting algorithm.

    Можно выполнить обработку Click события для кнопок заголовков столбцов, чтобы обеспечить такие функциональные возможности, как алгоритм сортировки.You can handle the Click event for column header buttons in order to provide functionality like a sorting algorithm. Для обработки Click события в заголовке одного столбца установите обработчик GridViewColumnHeaderсобытий для.To handle the Click event for a single column header, set an event handler on the GridViewColumnHeader. Чтобы задать обработчик событий, обрабатывающий Click событие для всех заголовков столбцов, установите обработчик ListView для элемента управления.To set an event handler that handles the Click event for all column headers, set the handler on the ListView control.

Получение других настраиваемых представленийObtaining Other Custom Views

Класс, производный ViewBase от абстрактного класса, является только одним из ListView возможных режимов представления для класса. GridViewThe GridView class, which is derived from the ViewBase abstract class, is just one of the possible view modes for the ListView class. Можно создать другие пользовательские представления для ListView , производя ViewBase от класса.You can create other custom views for ListView by deriving from the ViewBase class. Пример настраиваемого режима представления см. в разделе Создание пользовательского режима представления для ListView.For an example of a custom view mode, see Create a Custom View Mode for a ListView.

Вспомогательные классы GridViewGridView Supporting Classes

Следующие классы поддерживают GridView режим представления.The following classes support the GridView view mode.

См. такжеSee also

WPF GridView регулировки ширины доступного размера пространства

I have an ListView in my WPF application

<ListView Name="generatorsList" ItemsSource="{Binding GeneratorsList}" SelectionMode="Single">
       <ListView.View>
           <GridView>
               <GridViewColumn DisplayMemberBinding="{Binding Name}">
                   <GridViewColumn.Header>
                       <GridViewColumnHeader Tag="Name">Name</GridViewColumnHeader>
                   </GridViewColumn.Header>
               </GridViewColumn>
               <GridViewColumn Header="Type" DisplayMemberBinding="{Binding Type}" />
               <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}" />
               <GridViewColumn Header="Actions">
                   <GridViewColumn.CellTemplate>
                       <DataTemplate>
                           //buttons
                       </DataTemplate>
                   </GridViewColumn.CellTemplate>
               </GridViewColumn>
           </GridView>
       </ListView.View>
</ListView>

Which looks like this current with big window

The case is, when window is smaller than the list itself (for example if description is very long like in shown example) the scrollbar is formed and GridView stays the same, so action buttons are not visible at the screen (user must drag the scrollbar). current with small window

I would like to set an maximum column width based on current window width at initialization so the Actions column will always appear when the ListView is shown to user. Like that expected result

And then if user wants to, he can manually resize any column (so no actual "maxwidth" is set, just width). I've tried to work with * but GridView does not know about its children so * is not working here, auto is not a good option becouse I cannot set the maximum desired width per column, also constant width value is unwanted becouse it must depend on window size (available space size) which is variable. I assume I need some kind of event in code behind but I don't know how it should be handled in proper way.

wpf - GridViewColumn ширина регулирует только для первой записи; при установке на авто - WPF

Я пытаюсь достичь следующих вещей
1. Установить минимальную ширину для GridView колонки к некоторому значению.
2. При записи добавляются в этой колонке, ширина столбца следует отрегулировать соответствующим образом .
Я написал следующий код для него

<Grid Background=white Height=140 Width=auto>
            <ListView Style={StaticResource stl_lvi_TEXT} Grid.Row=0 Grid.Column='0' Name=lv_includedInstruments SelectionMode=Single Background=White Height=140 Width=auto HorizontalAlignment =Stretch  VerticalAlignment=Stretch ItemsSource={Binding Coll_History} ScrollViewer.VerticalScrollBarVisibility=Auto SelectionChanged=lv_includedInstruments_SelectionChanged TabIndex=18 GotFocus=lv_includedInstruments_GotFocus>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Width=212  >
                            <GridViewColumn.Header>
                                <GridViewColumnHeader Style={StaticResource stl_ColumnHeaderStyle} Content=Groups HorizontalContentAlignment=Left Background=white FontSize=12 BorderBrush=#FF97BADA BorderThickness=1 Tag=ProtocolVisitTypeForm.ProtocolName/>
                            </GridViewColumn.Header>
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Width=auto Tag={Binding} Text={Binding Path=ProtocolVisitTypeForm.ProtocolName} >
                                    </TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>

                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>  

stl_ColumnHeaderStyle выглядит следующим образом

<Style x:Key=stl_ColumnHeaderStyle TargetType={x:Type GridViewColumnHeader}>
    <Setter Property=ContentTemplate>
        <Setter.Value>
            <DataTemplate>
                <TextBlock MinWidth=200 Width=auto TextWrapping=Wrap Text={Binding}></TextBlock>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

это отлично работает , когда я добавить первую запись из строки длиной х. Но если последующие записи имеют больше , чем длина х, то ширина столбца не расширяется.
Спасибо.

Ширина GridviewColumn настраивается только для первой записи; когда установлено значение auto

I am trying to achieve following things
1. Set Minimum width for gridview column to some value.
2. When entries are added to this column, column width should adjust accordingly.
I have written following code for it

<Grid Background="white">
               <ListView Grid.Row="0" Grid.Column='0' Name="lv_includedInstruments" SelectionMode="Single" Background="White" HorizontalAlignment ="Stretch"  VerticalAlignment="Stretch" ItemsSource="{Binding Coll_History}" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="lv_includedInstruments_SelectionChanged" TabIndex="18" GotFocus="lv_includedInstruments_GotFocus">
                   <ListView.View>
                       <GridView>
                           <GridViewColumn  >
                               <GridViewColumn.Header>
                                   <GridViewColumnHeader Content="Groups" HorizontalContentAlignment="Left" Background="white" FontSize="12" BorderBrush="#FF97BADA" BorderThickness="1" Tag="ProtocolVisitTypeForm.ProtocolName"/>
                               </GridViewColumn.Header>
                               <GridViewColumn.CellTemplate>
                                   <DataTemplate>
                                       <TextBlock Tag="{Binding}" Text="{Binding Path=ProtocolVisitTypeForm.ProtocolName}" >
                                       </TextBlock>
                                   </DataTemplate>
                               </GridViewColumn.CellTemplate>
                           </GridViewColumn>

                       </GridView>
                   </ListView.View>
               </ListView>
           </Grid>  

stl_ColumnHeaderStyle is as follows

<Style x:Key="stl_ColumnHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
       <Setter Property="ContentTemplate">
           <Setter.Value>
               <DataTemplate>
                   <TextBlock MinWidth="200" TextWrapping="Wrap" Text="{Binding}"></TextBlock>
               </DataTemplate>
           </Setter.Value>
       </Setter>
</Style>

this works fine when i add first entry of string of lenght x. But if subsequent entries are of greater than length x, then the column width does not expand.
Thank You.

wpf listview width gridviewcolumn1,173

Свойство grid-template-columns | CSS справочник

CSS свойства

Определение и применение

CSS свойство grid-template-columns определяет количество, наименование и размер столбцов (дорожек) в макете сетки. Для того, чтобы задать количество, наименование и размер строк в макете сетки вы можете воспользоваться свойством grid-template-rows.

Схематичное отображение работы свойств grid-template-columns и grid-template-rows отображено на следующем изображении:

Поддержка браузерами

Синтаксис:

CSS синтаксис:

grid-template-columns: "none | length | percentage | flex | min-content | max-content | auto | minmax() | fit-content() | repeat() | initial | inherit";

/* допустимые значения длины и наименование столбцов */
grid-template-columns: 50px 50px;
grid-template-columns: 50vmax 50vmax;
grid-template-columns: 10cm;

/* имя столбца соответствует значению следующим за ним! */
grid-template-columns: [linename] 100px [linename2] 100px; // с указанием имени столбцов
grid-template-columns: [linename1] 100px [linename2 linename3] 100px; // с указанием нескольких имен у одного столбца

/* допустимые значения в процентах */
grid-template-columns: 50%;
grid-template-columns: 25% 25% 25% 25%;

/* допустимые значения в гибких единицах измерения */
grid-template-columns: 0.5fr;
grid-template-columns: 3fr 1fr;

/* допустимые значения используя ключевые слова */
grid-template-columns: auto;
grid-template-columns: none;
grid-template-columns: min-content;
grid-template-columns: max-content;

/* функциональные нотации  minmax(), fit-content() и repeat() */
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(50%);
grid-template-columns: repeat(4, 200px);
grid-template-columns: 100px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(50px, max-content)
                                                repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                                                repeat(auto-fit, [linename3 linename4] 300px)
                                                100px;
grid-template-columns: [linename1 linename2] 100px
                                                repeat(auto-fit, [linename1] 300px) [linename3];

JavaScript синтаксис:

object.style.gridTemplateColumns="60px 60px"

Значения свойства

ЗначениеОписание
noneКлючевое слово, означающее, что явная сетка макета не создается. Любые столбцы будут генерироваться неявно, и их размер будет определяться с помощью свойства grid-auto-columns. Является значением по умолчанию.
length / percentageЗадает размер столбцов, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
flexНеотрицательное значение в "гибких" единицах измерения fr (fractional unit). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения 1fr 2fr, столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между 0fr и 1fr имеют несколько особое поведение, когда сумма коэффициентов меньше 1, они будут занимать менее 100% оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер столбцов сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях calc() (функция выполняет математические расчеты для определения значений свойств).
max-contentКлючевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.
min-contentКлючевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце.
minmax(min, max)Функциональная нотация, определяющая диапазон размеров больше или равный min и меньше или равный max. Если max меньше min, то max игнорируется, а функция обра

Отправить ответ

avatar
  Подписаться  
Уведомление о