Галереи

Галерея - это элемент ленты , который может отображать набор графически насыщенных элементов (например, форматированный текст с картинками), отображаемых в соответствии с указанными шаблонами данных. Элементы галереи размещены сначала поперек, затем вниз, образуя список из нескольких столбцов.

На следующей картинке показана галерея на ленте, отображающая 3 столбца элементов.

Галерея на ленте содержит две кнопки для вертикальной прокрутки. Под этими кнопками находится кнопка всплывающего окна, которая отображает все содержимое галереи в всплывающем окне.

Создание галереи на ленте

Используйте элемент RibbonGalleryItem, чтобы добавить галерею в пользовательский интерфейс ленты. Вы можете добавить объект RibbonGalleryItem в группу страниц , всплывающие меню, Область заголовка страницы или Панель быстрого доступа таким же образом, как и другие элементы ленты . Например, чтобы добавить элементы ленты в группу страниц, определите их между <Группа страниц с лентой> начальный и конечный теги. В коде вы можете добавлять элементы, используя коллекцию RibbonPageGroup.Items.

Следующий фрагмент кода из демо-версии WordPad Example добавляет галерею в группу страниц Styles. Источником элементов галереи является коллекция FontStyles, определенная в модели представления.

<mxr:RibbonPageGroup Header="Styles" IsHeaderButtonVisible="True">
    <mxr:RibbonGalleryItem MaxColumnCount="3" ItemWidth="108" StretchItemVertically="True"
                           ItemHeight="80"
                           Header="Styles"
                           MaxDropDownColumnCount="3"
                           ItemsSource="{Binding FontStyles}">
</mxr:RibbonPageGroup>

Элементы галереи

Используйте свойство RibbonGalleryItem.ItemsSource, чтобы предоставить коллекцию бизнес-объектов для отображения в виде элементов галереи. Чтобы отобразить эти бизнес-объекты в галерее, определите соответствующие шаблоны данных.

Чтобы определить шаблоны элементов галереи, вы также можете использовать свойство RibbonGalleryItem.ItemTemplate.

Пример - Используйте несколько шаблонов для элементов галереи

В следующем коде из демонстрации WordPad Example элементы галереи заполняются из коллекции FontStyles, определенной в модели представления. Элементами коллекции FontStyles являются бизнес-объекты (NormalGalleryItem, HeadingGalleryItem и TitleGalleryItem), для которых шаблоны данных определены в коллекции UserControl.DataTemplates.

<mxr:RibbonGalleryItem 
  ItemsSource="{Binding FontStyles}"
  ...
  >

public partial class WordPadExampleViewModel : PageViewModelBase
{
    [ObservableProperty] private ObservableCollection<FontStyleGalleryItem> fontStyles;
    //...
    fontStyles = new ObservableCollection<FontStyleGalleryItem>();
    fontStyles.Add(new NormalGalleryItem() { Header = "Normal" });
    fontStyles.Add(new HeadingGalleryItem() { Header = "Heading" });
    fontStyles.Add(new TitleGalleryItem() { Header = "Title" });
}

<!-- Define data templates -->
<UserControl.DataTemplates>
    <DataTemplate DataType="vm:NormalGalleryItem">
        <Grid>
            <TextBlock Text="{Binding Header}"
                        FontSize="14"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>
    <DataTemplate DataType="vm:HeadingGalleryItem">
        <Grid>
            <TextBlock Text="{Binding Header}"
                        FontSize="22"
                        Foreground="SteelBlue"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>
    <DataTemplate DataType="vm:TitleGalleryItem">
        <Grid>
            <TextBlock Text="{Binding Header}"
                        FontSize="24"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>
</UserControl.DataTemplates>

Смотрите демонстрационную версию WordPad Example для получения полного кода.

Пример - Используйте один шаблон для всех элементов галереи

В приведенном ниже примере свойство RibbonGalleryItem.ItemTemplate используется для определения шаблона данных для отображения всех элементов галереи. Этот шаблон рисует текстовый блок, текст и цвета которого задаются свойствами объектов элемента галереи (объекты CellStyle), хранящихся в коллекции CellStyles модели представления.

Свойство RibbonGalleryItem.FocusedItem идентифицирует текущий выбранный элемент галереи . В примере свойство RibbonGalleryItem.FocusedItem привязано к свойству SelectedCellStyle в модели представления. Для выполнения действий при выборе элемента галереи обработчик событий PropertyChanged модели представления отслеживает изменения свойства SelectedCellStyle.

<mxb:ToolbarManager IsWindowManager="True">
    <mxr:RibbonControl IsApplicationButtonVisible="False">
        <mxr:RibbonPage Header="Home">
            <mxr:RibbonPageGroup Header="Styles" IsHeaderButtonVisible="True">
                <mxr:RibbonGalleryItem MaxColumnCount="3"
                                        ItemWidth="108"
                                        ItemHeight="40"
                                        Header="Cell Styles"
                                        MaxDropDownColumnCount="4"
                                        ItemsSource="{Binding CellStyles}"
                                        FocusedItem="{Binding SelectedCellStyle, Mode=TwoWay}"
                                        >
                    <mxr:RibbonGalleryItem.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{Binding BackColor}">
                                <TextBlock Text="{Binding Text}" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center"
                                  Foreground="{Binding TextColor}"/>
                            </Border>
                        </DataTemplate>
                    </mxr:RibbonGalleryItem.ItemTemplate>
                </mxr:RibbonGalleryItem>
            </mxr:RibbonPageGroup>
        </mxr:RibbonPage>
    </mxr:RibbonControl>
</mxb:ToolbarManager>

public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty] private ObservableCollection<CellStyle> cellStyles;
    [ObservableProperty] private CellStyle selectedCellStyle;

    public MainWindowViewModel()
    {
        cellStyles = new ObservableCollection<CellStyle>
        {
            new CellStyle(){ Text="Normal", TextColor=Brushes.Black, BackColor=Brushes.White },
            new CellStyle(){ Text="Bad", TextColor=Brushes.Maroon, BackColor=Brushes.Pink },
            new CellStyle(){ Text="Good", TextColor=Brushes.Green, BackColor=Brushes.Honeydew },
            new CellStyle(){ Text="Neutral", TextColor=Brushes.Sienna, BackColor=Brushes.Khaki }
        };
        //Add accent colors
        Color[] accentColors = new Color[] { Colors.MediumOrchid, Colors.Chocolate, Colors.CadetBlue };
        for (int accentColorIndex=1; accentColorIndex<= accentColors.Length; accentColorIndex++)
        {
            Color accentColor = accentColors[accentColorIndex-1];
            string accentTitle = $"Accent {accentColorIndex}";
            cellStyles.Add(new CellStyle() { 
              Text = accentTitle, 
              TextColor=Brushes.White, 
              BackColor=new SolidColorBrush(accentColor) 
            });
            for (double opacity = 0.6; opacity > 0.1; opacity -= 0.2)
            {
                cellStyles.Add(new CellStyle() { 
                  Text = $"{opacity:p0} - " + accentTitle, 
                  TextColor=Brushes.Black, 
                  BackColor=new SolidColorBrush(accentColor, opacity)  
                });
            }
        };
        selectedCellStyle = cellStyles[0];
        PropertyChanged += PropertyChanged1;
    }

    // Perform actions when a gallery item is selected.
    private void PropertyChanged1(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(SelectedCellStyle))
        {
            string selectedCellStyleName = SelectedCellStyle.Text;
            //...
        }
    }
}

public class CellStyle : ObservableObject
{
    public CellStyle() 
    {
        Text = "Default";
        TextColor = Brushes.Black;
        BackColor = Brushes.White;
    }
    public string Text { get; set; }
    public IBrush TextColor { get; set; }
    public IBrush BackColor { get; set; }
}

Свойства отображения галереи

• RibbonGalleryItem.Header — Подпись к галерее.

<mxr:RibbonGalleryItem Header="Styles" ...>

Заголовок галереи отображается в следующих случаях:

• В галерее всплывающего окна, когда включена опция IsDropDownHeaderVisible.

  

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

  

  Смотрите следующие разделы для получения более подробной информации: Галереи в упрощенном размещении команд и Галереи на панелях инструментов, всплывающих окнах и контекстных меню .

• RibbonGalleryItem.ItemHeight — Задает высоту элементов галереи. Это свойство имеет более высокий приоритет, чем свойство RibbonGalleryItem.StretchItemVertically.

Если свойство RibbonGalleryItem.ItemHeight не задано, высота элемента галереи по умолчанию определяется высотой первого элемента галереи. Эта высота получена из соответствующего шаблона данных.

• RibbonGalleryItem.ItemWidth — Задает ширину элементов галереи.
• RibbonGalleryItem.MaxColumnCount — Указывает максимальное количество столбцов в галерее на ленте.
• RibbonGalleryItem.MaxDropDownColumnCount — Указывает максимальное количество столбцов в галерее всплывающего окна.
• RibbonGalleryItem.StretchItemVertically — Указывает, следует ли растягивать первый ряд элементов галереи по вертикали, подгоняя его под высоту галереи на ленте. Эта автоматическая высота распространяется на другие строки, включая строки в галерее всплывающего окна.

Свойство RibbonGalleryItem.StretchItemVertically не действует, если задано свойство RibbonGalleryItem.ItemHeight.

Если свойством RibbonGalleryItem.StretchItemVertically является false, а свойство RibbonGalleryItem.ItemHeight не используется, высота элемента галереи по умолчанию определяется высотой первого элемента галереи. Эта высота получена из соответствующего шаблона данных.

Сфокусируйтесь и выберите элементы галереи

• RibbonGalleryItem.FocusedItem — Позволяет вам получить бизнес-объект, соответствующий текущему сфокусированному элементу галереи. Сфокусированный элемент - это тот, который получает фокус. Вы можете идентифицировать сфокусированный элемент по рамке фокусировки.

• RibbonGalleryItem.ItemSelectionMode — Позволяет вам выбирать между режимами выбора одного или нескольких элементов. Когда свойству ItemSelectionMode присвоено значение Multiple, пользователи могут выбирать несколько элементов галереи одновременно.

В режиме одиночного выбора используйте свойство RibbonGalleryItem.FocusedItem, чтобы получить/установить сфокусированный (выбранный) элемент.

В режиме множественного выбора используйте свойство RibbonGalleryItem.SelectedItems для получения/установки выбранных в данный момент элементов.

Когда вы щелкаете по элементу в режиме множественного выбора, этот элемент автоматически фокусируется и выбирается. Выбранные элементы имеют выделенный фон. Рамка вокруг элемента галереи указывает на то, что он сфокусирован.

Чтобы выбрать несколько элементов, щелкните по элементам, удерживая нажатой клавишу CTRL и/или SHIFT.

Сочетание клавиш CTRL+click переключает выбранное состояние для сфокусированного элемента. Это позволяет пользователю отменить выбор сфокусированного элемента.

• RibbonGalleryItem.SelectedItems — Коллекция бизнес-объектов, соответствующих выбранным элементам галереи. Установите для свойства RibbonGalleryItem.ItemSelectionMode значение Multiple, чтобы разрешить выбор нескольких элементов.

В режиме одиночного выбора свойство RibbonGalleryItem.SelectedItems содержит один элемент. Оно соответствует свойству RibbonGalleryItem.FocusedItem.

Отображение и закрытие галереи в всплывающем окне

• RibbonGalleryItem.IsPopupOpen — Возвращает или устанавливает, открыто ли всплывающее окно галереи.
• RibbonGalleryItem.ClosePopup — Закрывает галерею всплывающего окна.

Дополнительные команды в галерее всплывающего окна

В галерее всплывающего окна внизу могут отображаться дополнительные элементы ленты (команды).

Используйте свойство RibbonGalleryItem.DropDownItems, чтобы указать эти дополнительные элементы.

<mxr:RibbonPageGroup Header="Styles" IsHeaderButtonVisible="True">
    <mxr:RibbonGalleryItem MaxColumnCount="3" ItemWidth="108" StretchItemVertically="True"
                           ItemHeight="80"
                           Header="Styles"
                           MaxDropDownColumnCount="3"
                           ItemsSource="{Binding FontStyles}">
        <mxr:RibbonGalleryItem.DropDownItems>
            <mxb:ToolbarButtonItem Header="Create A Style..." Glyph="{x:Static icons:Basic.Add}" />
            <mxb:ToolbarButtonItem Header="Clear Formatting"
                                   Glyph="{x:Static icons:Filter.Does_not_contain}" />
            <mxb:ToolbarButtonItem Header="Apply Styles" Glyph="{x:Static icons:Filter.Starts_with}" />
        </mxr:RibbonGalleryItem.DropDownItems>
    </mxr:RibbonGalleryItem>
</mxr:RibbonPageGroup>

Галереи в упрощенном командном размещении

В Упрощенном размещении команд галерея, добавленная в группу страниц, отображается в виде кнопки. Нажатие на эту кнопку вызывает всю галерею целиком.

Текст кнопки задается свойством RibbonGalleryItem.Header.

Галереи на панелях инструментов, всплывающих окнах и контекстных меню

Когда вы добавляете галерею на традиционную панель инструментов или всплывающее меню, галерея отображается в виде подменю.

Заголовок подменю определяется свойством RibbonGalleryItem.Header.

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