WPF::与 RibbonGallery 不同的 RibbonComboBox 样式

Question

我有一个 RibbonComboBox用于设置字体大小。它有一个 RibbonGallery列出各种字体大小，显示在适当的 FontSize 中:

<r:RibbonComboBox DataContext="{x:Static vm:RibbonDataModel.FontSizeComboBoxData}"
                  SelectionBoxWidth="30">
   <r:RibbonGallery MaxColumnCount="1"
                    Command="{Binding Command}"
                    CommandParameter="{Binding SelectedItem}">
      <r:RibbonGallery.GalleryItemTemplate>
         <DataTemplate>
            <Grid>
               <TextBlock Text="{Binding}"
                          FontSize="{Binding}" />
            </Grid>
         </DataTemplate>
      </r:RibbonGallery.GalleryItemTemplate>
   </r:RibbonGallery>
</r:RibbonComboBox>

编辑 这是我的 View 模型:

public static RibbonDataModel
{
  public static GalleryData<object> FontSizeComboBoxData
  {
     get
     {
        lock (LockObject)
        {
           const string key = "Font Size";
           if (!DataCollection.ContainsKey(key))
           {
              var value = new GalleryData<object>
              {
                 Command = HtmlDocumentCommands.ChangeFontSize,
                 Label = "Change Font Size",
                 ToolTipDescription = "Set the font to a specific size.",
                 ToolTipTitle = "Change Font Size",
              };

              var fontSizes = new GalleryCategoryData<object>();
              var i = 9.0;
              while (i <= 30)
              {
                 fontSizes.GalleryItemDataCollection.Add(i);
                 i += 0.75;
              }
              value.CategoryDataCollection.Add(fontSizes);
              DataCollection[key] = value;
           }
           return DataCollection[key] as GalleryData<object>;
        }
     }
  }
}

一切都按预期工作，但在我从库中选择一个项目后，它显示在 RibbonComboBox 中。具有相同的巨大(或微小) FontSize因为它在画廊中使用。

我如何“重置” FontSize所选项目在 RibbonComboBox 中显示时的默认值?

Answer 1

RibbonComboBox使用 ContentPresenter显示您在 RibbonGallery 中选择的项目.
此外ContentPresenter采用相同ItemTemplate您在 RibbonGallery 中声明的.
这是您问题的“核心”原因。

因此，您可以在两种解决方案之间进行选择来解决该问题。

第一个解决方案(最快的)

您可以简单地设置 IsEditable您的 RibbonComboBox 的属性为“true”。通过这种方式，RibbonComboBox 将 ContentPresenter 替换为 TextBox，而不使用任何 ItemTemplate。然后字体将具有正确的大小。

第二个解决方案(恕我直言最好的一个)

由于 ItemTemplate 在 RibbonComboBox 的 ContentPresenter 和 RibbonGallery 中同时使用，因此我们可以尝试解决问题。最大的区别在于，当 DataTemplate 放置在 RibbonGallery 中时，其父项是 RibbonGalleryItem .
所以如果它的父节点不是 RibbonGalleryItem ，您会自动知道 DataTemplate 放置在 ContentPresenter 中。
您可以通过编写一个简单的 DataTrigger 来处理这种情况。 .
让我们看看代码中的所有内容。

我写了一个简化的 ViewModel:

namespace WpfApplication1
{
    public class FontSizes
    {
        private static FontSizes instance = new FontSizes();
        private List<double> values = new List<double>();

        public FontSizes()
        {
            double i = 9.0;
            while (i <= 30)
            {
                values.Add(i);
                i += 0.75;
            }
        }

        public IList<double> Values
        {
            get
            {
                return values;
            }
        }

        public static FontSizes Instance
        {
            get
            {
                return instance;
            }
        }
    }
}

然后这是我的观点:

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window1" Height="300" Width="300">
    <Window.Resources />

    <DockPanel>
        <ribbon:RibbonComboBox Label="Select a font size:"
                  SelectionBoxWidth="62"
                  VerticalAlignment="Center">

        <ribbon:RibbonGallery MaxColumnCount="1">
                <ribbon:RibbonGalleryCategory DataContext="{x:Static vm:FontSizes.Instance}" ItemsSource="{Binding Path=Values, Mode=OneWay}">
                    <ribbon:RibbonGalleryCategory.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Name="tb" Text="{Binding}" FontSize="{Binding}" />
                            </Grid>

                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ribbon:RibbonGalleryItem, AncestorLevel=1}}"
                                             Value="{x:Null}">
                                    <Setter TargetName="tb" Property="FontSize" Value="12" />
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ribbon:RibbonGalleryCategory.ItemTemplate>
                </ribbon:RibbonGalleryCategory>
            </ribbon:RibbonGallery>
        </ribbon:RibbonComboBox>
    </DockPanel>
</Window>

如您所见，DataTrigger 是使“脏工作”的“组件”。

现在，您只需要决定您喜欢哪种解决方案。