在功能区中使用 UserControl

Question

我想在 RibbonControl 中使用 UserControl。

例如：

<RibbonWindow
  xmlns:uc="clr-namespace:UserControl1;assembly=UserControl1">

  <Grid ShowGridLines="False" Margin="0">
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="100*"/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100*"/>
     </Grid.ColumnDefinitions>

     <Ribbon Grid.Row="0">
        <RibbonApplicationMenu >
          <RibbonApplicationMenuItem x:Name="miExit" ImageSource="Images/large_exit.png" Header="Exit" />
        </RibbonApplicationMenu>
        <RibbonTab Header="Test">
            <uc:RibbonGroups/>
        </RibbonTab>
     </Ribbon>

     <uc:Content Grid.Row="1" />

  </Grid>

</RibbonWindow>

您会看到两个用户控件，uc:RibbonGroups 和 uc:Content。虽然第二个 (uc:Content) 工作正常，但 RibbonControl 内的 UserControl 将无法工作。

我错过了什么？ 我也尝试这种方法： How to set the usercontrol for ribbon window in WPF? 在 RibbonTab 和 UserControl 中设置一个网格；

     <Ribbon Grid.Row="0">
         ...
        <Grid>
        <RibbonTab Header="Test">
            <uc:RibbonGroups/>
        </RibbonTab>
        </Grid>
     </Ribbon>

而不是

     <Ribbon Grid.Row="0">
         ...
        <RibbonTab Header="Test">
            <uc:RibbonGroups/>
        </RibbonTab>
     </Ribbon>

编辑： UserControl 现在只保存 RibbonTab 的内容，RibbonTab 本身移到了主窗口

  <UserControl ...>
     <StackPanel Orientation="Horizontal">
        <RibbonGroup Header="Test" >
             <RibbonButton SmallImageSource="Images/small_save.png"
                           LargeImageSource="Images/large_save.png" />
        <Image Source="Images/large_expert_enabled.png"></Image>
     </Stackpanel>  
  </UserControl>

RibbonGroup 与 Header 一起显示，但没有图像，并且单独的 Image 本身显示。那么也许现在有什么建议是哪里出了问题？

EDIT2： 如果我使用 Snoop 进入，则会出现 RibbonButtons 及其对应的图像。

EDIT3： 我尝试了另一种使用资源的方法，但问题与上述相同.. 当我在资源/用户控件中有 RibbonTab 时，它的外观： http://s12.postimg.org/lpposl48t/DLL_Ribbon_Tab_fail_part.png

当我在资源/用户控件中有 RibbonGroup 时，它的外观： http://s12.postimg.org/oiiwcm4l9/DLL_Ribbon_Group_fail_part.png

Answer 1

经过大量研究，我从 Ben Barefield 那里找到了这个：

http://www.benbarefield.com/blog/2011/03/04/ribbon-tab-definition-on-usercontrol/

他使用了一个技巧，将ribbontab 移动到资源字典中。 效果很好，但我还想在此功能区选项卡中添加一些单击事件（带有查看特定操作....），所以我决定退回到用户控件。

诀窍是，在将ribbontab 从用户控件中分离出来，然后再将其添加到另一个控件。

详细说明：

将此方法添加到用户控件代码隐藏中：

    private void AttachTabToRibbon(RibbonTab tab)
    {
        Ribbon Ribbon = null;
        Ribbon = getRibbon();
        if (Ribbon == null)
            return;
        Ribbon.Items.Add(tab);
    }

    private Ribbon getRibbon()
    {
        var control = VisualTreeHelper.GetParent(this);
        Ribbon Ribbon = null;
        while (control != null && Ribbon == null)
        {
            var numberOfChildren = VisualTreeHelper.GetChildrenCount(control);
            for (int i = 0; i < numberOfChildren; ++i)
            {
                var child = VisualTreeHelper.GetChild(control, i);
                if (child is Ribbon)
                {
                    Ribbon = child as Ribbon;
                    return Ribbon;
                }
            }
            control = VisualTreeHelper.GetParent(control);
        }
        return null;
    }

    private void userControl_Loaded(object sender, RoutedEventArgs e)
    {
        Ribbon ribbonMenu = (Ribbon)this.FindName("ribbon");
        RibbonTab ribbonTabAdminInterface = (RibbonTab)this.FindName("ribbonTab");
        ribbonMenu.Items.Remove(ribbonTab);
        ucStackPanel.Children.Remove(ribbonMenu);
        AttachTabToRibbon(ribbonTab);
    }

进一步调用 userControl_Loaded：

<UserControl ...
             Loaded="userControl_Loaded"
>
<StackPanel x:Name="ucStackPanel">
    <Ribbon x:Name="ribbon" >
        <Ribbon.ApplicationMenu>
            <RibbonApplicationMenu
            </RibbonApplicationMenu>
        </Ribbon.ApplicationMenu>
        <RibbonTab x:Name="ribbonTab"/>
        ...
     </Ribbon>
     ...
</StackPanel>