WPF Ribbon - RibbonTab 中的数据模板

Question

在过去两天的大部分时间里，我都在用这个控件四处游荡，但我被卡住了。基本上我不知道它是 RibbonTab 的数据模板。如果它不会显示在 RibbonTab 的底部，那么我所拥有的对我有用！呸！

我的 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");
    }
}

没有数据模板：

带有数据模板：

Answer 1

你需要的是两个ItemContainerStyle

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

第一：

<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>

秒：

<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>

显然您必须创建一个功能区按钮数据模板。您还可以将项目模板选择器用于功能区组样式，然后您不仅可以添加功能区按钮，还可以添加任何您想要的内容。它不是您需要的确切解决方案，但我希望您能理解。