WPF Ribbon - Шаблоны данных в RibbonTab

Question

Большую часть последних двух дней я провёл с этим контролем, и я застрял.В основном я не знаю, как шаблон данных это RibbonTab.То, что у меня есть, сработало бы для меня, если бы не показывало его внизу RibbonTab!Grr!

То, что у меня есть в моем XAML:

        <r:Ribbon Grid.Row="0" Title="MSRibbon" x:Name="ribbon">
            <r:Ribbon.Style>
                <Style TargetType="{x:Type r:Ribbon}">
                    <Setter Property="TabHeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock Text="{Binding Header}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsSource" Value="{Binding AvailableRibbonTabs}"/>
                    <Setter Property="SelectedItem" Value="{Binding SelectedRibbonTab}"/>
                    <Setter Property="ItemContainerStyle">
                        <Setter.Value>
                            <Style TargetType="{x:Type r:RibbonTab}">
                                <Setter Property="ItemsSource" Value="{Binding RibbonTabData}"/>
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
            </r:Ribbon.Style>
            <r:Ribbon.Resources>
                <DataTemplate DataType="{x:Type vmsrc:RecordingRibbonTabGroupData}">
                    <viewsrc:RecordingTabGroupControl/>
                </DataTemplate>
            </r:Ribbon.Resources>
        </r:Ribbon>

XAML элемента управления, который я хотел бы показать в группе вкладок ленты (это, когда отображается приклеивается книжняя часть вкладки ленты):

<r:RibbonControl x:Class="Scanner.Views.RecordingRibbonTabGroupData">
    <StackPanel Orientation="Horizontal">
    <r:RibbonButton Label="foo" />
    <r:RibbonButton Label="bar" />
    <ListBox ItemsSource="{Binding Barcodes}" />
    </StackPanel>
</r:RibbonControl>

Здесь я попытался использовать различные комбинации элементов управления, но безрезультатно.В качестве базового типа элемента управления я использовал RibbonTab, RibbonGroup, UserControl и т. Д., И я думаю, что я использовал все возможные элементы управления в качестве основного контейнера, такие как StackPanel, Grid, ItemsControl и т. Д. А также экспериментировал с установкой высоты каждого элемента управления и HВыравнивание / V и т. Д. Ничего не помогло.

Мои модели представлений таковы (INPC внедряется с INPCWeaver, и он работает):

public abstract class AbstractViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
}

public abstract class AbstractRibbonTab : AbstractViewModel
{
    public string Header { get; set; }
    public bool IsSelected { get; set; }

    public ObservableCollection<AbstractRibbonTabGroupData> RibbonTabData { get; set; }
}



public class RecordingRibbonTab : AbstractRibbonTab
{
    public RecordingRibbonTab()
    {
        this.Header = "Recording";
        this.RibbonTabData = new ObservableCollection<AbstractRibbonTabGroupData>() { new RecordingRibbonTabGroupData() };
    }
}

public class SessionRibbonTab : AbstractRibbonTab
{
    public SessionRibbonTab()
    {
        this.Header = "Session";
        this.RibbonTabData = new ObservableCollection<AbstractRibbonTabGroupData>() { new AbstractRibbonTabGroupData() };
    }
}

public class SettingsRibbonTab : AbstractRibbonTab
{
    public SettingsRibbonTab()
    {
        this.Header = "Settings";
        this.RibbonTabData = new ObservableCollection<AbstractRibbonTabGroupData>() { new AbstractRibbonTabGroupData() };
    }
}

XAML имеет свой контекст данных, установленный для экземпляраиз:

public class MainWindowViewModel : AbstractViewModel, IMainWindowViewModel
{
    ...
    public ObservableCollection<AbstractRibbonTab> AvailableRibbonTabs { get; private set; }
    public AbstractRibbonTab SelectedRibbonTab { get; set; }
    ...
    public MainWindowViewModel(PinChangeCommand pcc)
    {
        this.AvailableRibbonTabs = new ObservableCollection<AbstractRibbonTab>();
        this.AvailableRibbonTabs.Add(new RecordingRibbonTab());
        this.AvailableRibbonTabs.Add(new SessionRibbonTab());
        this.AvailableRibbonTabs.Add(new SettingsRibbonTab());
    }
 }

Привязки работают.

В качестве примечания, под лентой находится элемент управления содержимым, объявленный так:

        <ContentControl Grid.Row="1" Content="{Binding SelectedRibbonTab}">
            <ContentControl.Resources>
                <DataTemplate DataType="{x:Type vmsr:RecordingRibbonTab}">
                    <views:RecordingView />
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>

, который отлично работаеткак и следовало ожидать.

Представление «запись», которое я реализовал, имеет следующий XAML (он просто показывает заголовок, как видно на скриншоте ниже):

<UserControl x:Class="Scanner.Views.RecordingView">
    <Grid>
        <TextBlock Text="{Binding Header}" />
    </Grid>
</UserControl>

В заключение приведен список кодов, который должен объяснять некоторые странные числа:

public class RecordingRibbonTabGroupData : AbstractRibbonTabGroupData
{
    public ObservableCollection<string> Barcodes { get; private set; }

    public RecordingRibbonTabGroupData()
    {
        this.Barcodes = new ObservableCollection<string>();
        this.Barcodes.Add("76765535642");
        this.Barcodes.Add("43435356");
    }
}

Без DataTemplate:

С DataTemplate:

Answer 1

То, что вам нужно, это два ItemContainerStyle

 <Ribbon:Ribbon ItemContainerStyle="{StaticResource RibbonTabStyle}" ItemsSource="{Binding DummyRibbonTabContent}">

first:

<Style TargetType="{x:Type Ribbon:RibbonTab}" x:Key="RibbonTabStyle">
    <Setter Property="ItemsSource" Value="{Binding DummyRibbonGroups}" />
    <Setter Property="ItemContainerStyle" Value="{DynamicResource RibbonGroupStyle}" />
    <Setter Property="Header" Value="{Binding DummyRibbonHeader"} />
</Style>

second:

<Style TargetType="{x:Type Ribbon:RibbonGroup}" x:Key="RibbonGroupStyle">
    <Setter Property="Header" Value="{Binding RibbonGroupHeader}" />
    <Setter Property="ItemsSource" Value="{Binding DummyRibbonButtons}" />
    <Setter Property="ItemTemplate" Value="{DynamicResource RibbonButtonTemplate}" />
</Style>

Очевидно, вам нужно создать ленточную матрицу кнопки данных.Вы также можете использовать шаблонный элемент itemselector для стиля ribbongroup, а затем можете добавлять не только кнопки ленты, но и все, что пожелаете.Это не точное решение, которое вам нужно, но я надеюсь, что вы поняли идею.