Стили¶

Система оформления Avalonia позволяет вам настраивать свойства контролов Eremex Avalonia, а также свойства конкретных визуальных элементов, из которых состоят контролы. В этом разделе показано, как использовать стили для настройки следующих визуальных элементов контрола Data Grid:

Заголовок столбца
Ряд
Строка группы
Ячейка строки

Используйте свойство DataGridControl.Styles, чтобы изменить стили контрола.

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

Следующий код создает простой стиль, который устанавливает фон для всех строк данных одного цвета.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxdgvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataGrid.Visuals;assembly=Eremex.Avalonia.Controls"

<mxdg:DataGridControl.Styles>
    <Style Selector="mxdgvis|DataGridRowControl">
        <Setter Property="Background" Value="Ivory" />
    </Style>
</mxdg:DataGridControl.Styles>

Применение стилей к определенным состояниям контрола¶

Селекторы стилей в Avalonia поддерживают псевдоклассы. Псевдокласс - это ключевое слово, добавляемое к селектору. Он определяет состояние целевого контрола, к которому применяется стиль.

DataGrid предоставляет пользовательские псевдоклассы для обращения к определенным состояниям визуальных элементов контролов. В разделах ниже перечислены пользовательские псевдоклассы, поддерживаемые для визуальных элементов контролов.

Приведенный ниже код создает селектор стилей, который нацелен на строки DataGrid. Псевдокласс :focusedAndSelectedState используется только для применения стиля к строкам, которые находятся в сфокусированном состоянии.

xmlns:mxdgvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataGrid.Visuals;assembly=Eremex.Avalonia.Controls"

<Style Selector="mxdgvis|DataGridRowControl:focusedAndSelectedState">
    ...
</Style>

Контролы визуальных элементов¶

Синтаксис селектора стилей должен указывать целевой контрол (объект контрола, который инкапсулирует визуальный элемент), к которому применяется стиль. На следующей картинке показаны визуальные элементы Data Grid и соответствующие целевые контролы.

datagrid-styling

Стилизация строки данных¶

В строке данных отображаются ячейки с данными.

Используйте следующую информацию, чтобы настроить стиль строки данных:

Целевой класс контрола¶

DataGridRowControl

DataContext¶

Объект данных (бизнес) строки

Пользовательские псевдоклассы¶

":focusedAndSelectedState" — Строка сфокусирована.

":editingState" — строка имеет активный встроенный редактор.

Пример - Как настроить стиль выделенной строки¶

Следующий код создает стиль, который настраивает фон выделенной строки.

Строки Data Grid отображаются в соответствии с предопределенным шаблоном. Этот шаблон содержит объект Border (с именем RowBorder), который украшает ячейки рамкой и фоном. В приведенном ниже примере изменяется свойство Background объекта RowBorder для сфокусированной строки.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxdgvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataGrid.Visuals;assembly=Eremex.Avalonia.Controls"

<mxdg:DataGridControl.Styles>
    <Style Selector="mxdgvis|DataGridRowControl:focusedAndSelectedState /template/ Border#RowBorder">
        <Setter Property="Background" Value="SkyBlue" />
    </Style>
</mxdg:DataGridControl.Styles>

Пример - Как настроить свойства внешнего вида строки в соответствии со значениями ячеек¶

Следующий код настраивает свойства цвета фона и шрифта строк в зависимости от значений строк.

datagrid-rowstyle-example

Строки, имеющие значение Contract в столбце EmploymentType, рисованы курсивом. Когда ячейки строк не находятся в режиме редактирования, они отображаются с помощью контролов TextBlock. Созданный стиль изменяет attached-свойство TextBlock.FontStyle, чтобы настроить стиль шрифта текста во всех ячейках строки. Фактический стиль шрифта определяется объектом EmploymentTypeToFontStyleConverter.

Для строк со статусом Married установлен цвет фона CornSilk. Объект Binding получает логическое значение свойства Married из DataContext, который содержит бизнес-объект строки. Затем он преобразует логическое значение в кисть с помощью конвертера Eremex.AvaloniaUI.Controls.BoolToObjectConverter.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
xmlns:mxdgvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataGrid.Visuals;assembly=Eremex.Avalonia.Controls"
xmlns:views="using:DemoCenter.Views"

<UserControl.Resources>
    <views:EmploymentTypeToFontStyleConverter x:Key="employmentTypeToFontStyleConverter" />
</UserControl.Resources>

<mxdg:DataGridControl.Styles>
    <Style Selector="mxdgvis|DataGridRowControl">
        <Setter Property="TextBlock.FontStyle" Value="{Binding EmploymentType, 
         Converter={StaticResource employmentTypeToFontStyleConverter}}"/>
        <Setter Property="Background">
            <Setter.Value>
                <Binding Path="Married">
                    <Binding.Converter>
                        <mx:BoolToObjectConverter>
                            <mx:BoolToObjectConverter.TrueValue>
                                <SolidColorBrush>Cornsilk</SolidColorBrush>
                            </mx:BoolToObjectConverter.TrueValue>
                        </mx:BoolToObjectConverter>
                    </Binding.Converter>
                </Binding>
            </Setter.Value>
        </Setter>
    </Style>
</mxdg:DataGridControl.Styles>

public class EmploymentTypeToFontStyleConverter : IValueConverter
{
    static Brush lightRedBrush = new SolidColorBrush(0xFFffe6e6);
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return null;
        EmploymentType empType = (EmploymentType)value;

        if (empType == EmploymentType.Contract)
            return FontStyle.Italic;

        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Стилизация ячейки строки¶

Ячейки в строках данных отображают значения для столбцов таблицы.

Чтобы настроить стиль ячейки строки, используйте следующую информацию:

Целевой класс контрола¶

CellControl

DataContext¶

Объект Eremex.AvaloniaUI.Controls.DataControl.Visuals.CellData. Основными свойствами, предоставляемыми объектом CellData, являются:

Column — столбец (объект GridColumn), который отображает ячейку.
DataControl — Текущий объект DataGridControl.
Row — нижележащий объект данных (бизнес) строки.
ValidationInfo — объект, содержащий информацию о валидации ячейки.
Value — Значение ячейки.

Пользовательские псевдоклассы¶

Пользовательские псевдоклассы соответствуют тем, которые применяются к объектам row. Они показаны ниже:

":focusedAndSelectedState" — Строка сфокусирована.

":editingState" — встроенный редактор ячейки активен.

Пример - Как настроить стиль ячейки в соответствии со значением ячейки¶

Объект Style в приведенном ниже коде задает фон ячеек, содержащих значение true в свойстве строки OnVacation.

Стиль устанавливает для свойства Background контролов ячеек (объектов CellControl) значение brush, возвращаемое пользовательским конвертером OnVacationCellValueToBrushConverter. Конвертер возвращает кисть в соответствии с столбцом ячейки и значением.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataControl.Visuals;
 assembly=Eremex.Avalonia.Controls"
xmlns:local="clr-namespace:AvaloniaApplication1.Views"

<Grid.Resources>
    <local:OnVacationCellValueToBrushConverter x:Key="myOnVacationCellValueToBrushConverter" />
</Grid.Resources>

<mxdg:DataGridControl.Styles>
    <Style Selector="mxvis|CellControl">
        <Setter Property="Background">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource myOnVacationCellValueToBrushConverter}">
                    <Binding Path="Row.OnVacation" />
                    <Binding Path="Column" />
                </MultiBinding>
            </Setter.Value>
        </Setter>
    </Style>
</mxdg:DataGridControl.Styles>

using Eremex.AvaloniaUI.Controls.DataGrid;

namespace AvaloniaApplication1.Views;

public class OnVacationCellValueToBrushConverter : IMultiValueConverter
{
    public object? Convert(IList<object?> values, Type targetType, 
     object? parameter, CultureInfo culture)
    {
        bool onVacation = (bool)values[0];
        GridColumn column = (GridColumn)values[1];
        if (column.FieldName == "OnVacation" && onVacation)
            return new SolidColorBrush(Colors.Aqua);
        return null;
    }
}

Стиль групповой строки¶

Групповые строки объединяют другие строки, когда вы группируете данные по столбцам.

Чтобы настроить стиль групповых строк, используйте следующую информацию:

Целевой класс контрола¶

DataGridGroupRowControl

Пример - Как настроить свойства внешнего вида группирующей строки¶

Следующий код показывает, как рисовать текст строк группы жирным шрифтом.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxdgvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataGrid.Visuals;assembly=Eremex.Avalonia.Controls"

<mxdg:DataGridControl.Styles>
    <Style Selector="mxdgvis|DataGridGroupRowControl">
        <Setter Property="FontWeight" Value="SemiBold"/>
    </Style>
</mxdg:DataGridControl.Styles>

Оформите заголовок столбца¶

В заголовке столбца отображается заголовок столбца и индикаторы сортировки.

Используйте следующую информацию, чтобы настроить стиль заголовка столбца:

Целевой класс контрола¶

ColumnHeaderControl

DataContext¶

GridColumn

Пользовательские псевдоклассы¶

":сортировка по возрастанию" — столбец сортируется в порядке возрастания.
":sortdescending" — столбец сортируется в порядке убывания.
":перетаскивание" — перетаскивается столбец.

Пример - Как настроить свойства внешнего вида заголовка определенного столбца¶

Следующий код рисует заголовок столбца OnVacation жирным шрифтом.

xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
xmlns:mxvis="clr-namespace:Eremex.AvaloniaUI.Controls.DataControl.Visuals;
 assembly=Eremex.Avalonia.Controls"
xmlns:local="clr-namespace:AvaloniaApplication1.Views"

<Grid.Resources>
    <local:ColumnToFontWeightConverter x:Key="myColumnToFontWeightConverter" />
</Grid.Resources>

<mxdg:DataGridControl.Styles>
    <Style Selector="mxvis|ColumnHeaderControl">
        <Setter Property="FontWeight" 
         Value="{Binding Converter={StaticResource myColumnToFontWeightConverter}}">
        </Setter>
    </Style>
</mxdg:DataGridControl.Styles>

using Eremex.AvaloniaUI.Controls.DataGrid;

public class ColumnToFontWeightConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        GridColumn col = value as GridColumn;
        if (col != null && col.FieldName == "OnVacation")
        {
            return FontWeight.Bold;
        }

        return null;
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.