Стили¶

Контролы TreeList и TreeView поддерживают систему стилизации Avalonia, которая позволяет настраивать свойства визуальных элементов контролов. Используйте свойство TreeListControl.Styles для применения стилей к следующим визуальным элементам:

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

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtlvis|TreeListRowControl">
        <Setter Property="Background" Value="Ivory" />
    </Style>
</mxtl:TreeListControl.Styles>

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

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

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"

<Style Selector="mxtlvis|TreeListRowControl:focusedAndSelectedState">
    ...
</Style>

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

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

TreeList - Styling

Стилизация строки (узла)¶

Строка - это визуальный элемент, который отображает ячейки.

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

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

TreeListRowControl (в контроле TreeList), TreeViewRowControl (в контроле TreeView)

DataContext¶

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

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

":selectedState" — строка выделена, но не сфокусирована. Это состояние действует в режиме выбора нескольких строк.
":focusedState" — строка сфокусирована, но не выбрана. Это состояние действует в режиме выбора нескольких строк.
":focusedAndSelectedState" — строка сфокусирована и выбрана. Это состояние действует в режимах выбора нескольких и одной строки.
":editingState" — Узел имеет активный редактор встроенных файлов.

Пример - Как настроить стиль сфокусированного узла¶

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtlvis|TreeListRowControl:focusedAndSelectedState /template/ Border#RowBorder">
        <Setter Property="Background" Value="SkyBlue" />
    </Style>
</mxtl:TreeListControl.Styles>

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

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

treelist-rowstyle-example

Фон строки зависит от свойства Status этой строки. Объект RowStatusToBrushConverter определяет кисть, которая будет использоваться для строк, для свойства Status которых установлено значение InProgress.

Если у строк есть дочерние элементы, логическое свойство HasTasks для этих строк возвращает true. Эти строки рисованы жирным шрифтом.

Когда ячейки строк не находятся в режиме редактирования, они отображаются с помощью контролов TextBlock. Созданный стиль изменяет attached-свойство TextBlock.FontWeight для настройки веса шрифта текста во всех ячейках строки. Объект Eremex.AvaloniaUI.Controls.BoolToObjectConverter определяет фактический вес шрифта. Конвертер возвращает значение, которое зависит от свойства HasTasks строки.

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"
xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
xmlns:views="using:DemoCenter.Views"

<UserControl.Resources>
    <views:RowStatusToBrushConverter x:Key="myRowStatusToBrushConverter"/>
</UserControl.Resources>

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtlvis|TreeListRowControl">
        <Setter Property="Background" Value="{Binding Status, 
         Converter={StaticResource myRowStatusToBrushConverter}}"/>
        <Setter Property="TextBlock.FontWeight">
            <Setter.Value>
                <Binding Path="HasTasks">
                    <Binding.Converter>
                        <mx:BoolToObjectConverter>
                            <mx:BoolToObjectConverter.TrueValue>
                                <FontWeight>Bold</FontWeight>
                            </mx:BoolToObjectConverter.TrueValue>
                            <mx:BoolToObjectConverter.FalseValue>
                                <FontWeight>Normal</FontWeight>
                            </mx:BoolToObjectConverter.FalseValue>
                        </mx:BoolToObjectConverter>
                    </Binding.Converter>
                </Binding>
            </Setter.Value>
        </Setter>
    </Style>
</mxtl:TreeListControl.Styles>

public class RowStatusToBrushConverter : IValueConverter
{
    static Brush lightGreenBrush = new SolidColorBrush(0xFFA8F0ED);
    public object Convert(object value, Type targetType, object parameter, 
     CultureInfo culture)
    {
        if (value == null) return null;
        DemoData.TaskStatus rowStatus = (DemoData.TaskStatus)value;

        if (rowStatus == DemoData.TaskStatus.InProgress)
            return lightGreenBrush;

        return null;
    }

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

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

Ячейки строк (узлов) отображают значения столбцов. В контроле TreeView в каждой строке отображается только одно значение.

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

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

TreeListCellControl

DataContext¶

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

Column — столбец (объект ColumnBase), который отображает ячейку. Когда вы применяете стиль к объекту TreeView, свойство CellData.Column содержит объект ColumnBase, который инкапсулирует столбец значений TreeView.
DataControl — Контрол TreeList/TreeView (объект DataControlBase).
Row — нижележащий объект данных (бизнес) строки.
ValidationInfo — объект, содержащий информацию о валидации ячейки.
Value — Значение ячейки.

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

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

":selectedState" — строка выделена, но не сфокусирована. Это состояние действует в режиме выбора нескольких строк.
":focusedState" — строка сфокусирована, но не выбрана. Это состояние действует в режиме выбора нескольких строк.
":focusedAndSelectedState" — строка сфокусирована и выбрана. Это состояние действует в режимах выбора нескольких и одной строки.
":editingState" — встроенный редактор ячейки активен.

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

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"
xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
xmlns:local="clr-namespace:AvaloniaApp1"

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

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtlvis|TreeListCellControl">
        <Setter Property="Background">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource myOnVacationCellValueToBrushConverter}">
                    <Binding Path="Row.OnVacation" />
                    <Binding Path="Column" />
                </MultiBinding>
            </Setter.Value>
        </Setter>
    </Style>
</mxtl:TreeListControl.Styles>

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

Стилизация области отступа строки¶

В области отступа отображаются кнопки развертывания и картинки узлов. Область отступа - это часть ячейки, которая отображает иерархию узлов.

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

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

TreeListIndentControl

DataContext¶

Объект Eremex.AvaloniaUI.Controls.DataControl.Visuals.CellData. Дополнительную информацию смотрите в разделе Оформление ячейки строки .

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

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

":selectedState" — строка выделена, но не сфокусирована. Это состояние действует в режиме выбора нескольких строк.
":focusedState" — строка сфокусирована, но не выбрана. Это состояние действует в режиме выбора нескольких строк.
":focusedAndSelectedState" — строка сфокусирована и выбрана. Это состояние действует в режимах выбора нескольких и одной строки.
":editingState" — Узел имеет активный редактор встроенных файлов.

Пример - Как настроить область отступа конкретной строки¶

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxtlvis="clr-namespace:Eremex.AvaloniaUI.Controls.TreeList.Visuals;assembly=Eremex.Avalonia.Controls"
xmlns:mx="https://schemas.eremexcontrols.net/avalonia"

<mxtl:TreeListControl.Styles>
    <Style Selector="mxtlvis|TreeListIndentControl">
        <Setter Property="Background">
            <Setter.Value>
                <Binding Path="Row.HasChildren">
                    <Binding.Converter>
                        <mx:BoolToObjectConverter>
                            <mx:BoolToObjectConverter.TrueValue>
                                <SolidColorBrush Color="Coral"/>
                            </mx:BoolToObjectConverter.TrueValue>
                        </mx:BoolToObjectConverter>
                    </Binding.Converter>
                </Binding>
            </Setter.Value>
        </Setter>
    </Style>
</mxtl:TreeListControl.Styles>

Стиль заголовка столбца (контрол TreeList)¶

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

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

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

ColumnHeaderControl

DataContext¶

TreeListColumn

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

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

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

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

xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"
xmlns:mxvis="Eremex.AvaloniaUI.Controls.DataControl.Visuals;assembly=Eremex.Avalonia.Controls"
xmlns:local="clr-namespace:AvaloniaApp1"

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

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

public class ColumnToFontWeightConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, 
     CultureInfo culture)
    {
        TreeListColumn col = value as TreeListColumn;
        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();
    }
}

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