c# - 样式化 RibbonComboBox 内容

Question

我正在学习 WPF，RibbonComboBox 控件让我头疼了好几个星期。

我似乎终于可以使用一些基本功能了。现在我被困在那些应该是微不足道的事情上，但就像 WPF 的其他部分一样，事实并非如此。

这是我的 XAML 的一部分:

<RibbonGroup Header="Category">
    <RibbonComboBox Label="Category:" HorizontalContentAlignment="Left" SelectionBoxWidth="250">
        <RibbonGallery ColumnsStretchToFill="True" SelectedItem="{Binding SelectedCategory}">
            <RibbonGalleryCategory DisplayMemberPath="Text" MaxColumnCount="1" ItemsSource="{Binding Categories}">
            </RibbonGalleryCategory>
        </RibbonGallery>
    </RibbonComboBox>
    <RibbonComboBox Label="Subcategory:" HorizontalContentAlignment="Left" SelectionBoxWidth="250">
        <RibbonGallery MaxColumnCount="1" ColumnsStretchToFill="True" SelectedItem="{Binding SelectedSubcategory}">
            <RibbonGalleryCategory DisplayMemberPath="Text" ItemsSource="{Binding Subcategories}">
            </RibbonGalleryCategory>
        </RibbonGallery>
    </RibbonComboBox>
    <RibbonButton Label="Edit Categories" Command="local:EditCommands.Categories" SmallImageSource="Images\categories_sm.png" ToolTipTitle="Edit Categories" ToolTipDescription="Add, edit or delete categories and subcategories" ToolTipImageSource="Images\categories_sm.png"></RibbonButton>
</RibbonGroup>

我遇到的问题是组合框下拉列表的选择部分仅与文本一样宽。 (我希望它和整个下拉菜单一样宽。)

如您所见，我添加了一些 MaxColumnCount 和 ColumnStretchToFill 属性。这些最初似乎有效，但是......

1. 当代码刷新内容时，ColumnStretchToFill 设置似乎已被丢弃，选择栏再次仅与选择文本一样宽。

2. RibbonComboBox、RibbonGallery 和RibbonGalleryCategory 是一个层次结构。我不知道为什么。其中不止一个元素具有 MaxColumnCount 和 ColumnStretchToFill 属性(以及其他注释属性)。我怎么知道应该为哪个元素设置这些属性？

Answer 1

要实现您的目标，请执行以下操作:

<Ribbon>
    <RibbonGroup Header="Category" Height="100">
        <RibbonComboBox Label="Category:" >
            <RibbonGallery SelectedItem="{Binding SelectedCategory, Mode=TwoWay, IsAsync=True}" >
                <RibbonGalleryCategory  ItemsSource="{Binding Categories}" DisplayMemberPath="Name" ColumnsStretchToFill="True" MaxColumnCount="1" IsSharedColumnSizeScope="True" />
            </RibbonGallery>
        </RibbonComboBox>
        <RibbonComboBox Label="Subcategory:" >
            <RibbonGallery SelectedItem="{Binding SelectedSubCategory}" >
                <RibbonGalleryCategory  ItemsSource="{Binding SelectedCategory.SubCategories}" DisplayMemberPath="Name" ColumnsStretchToFill="True" MaxColumnCount="1" IsSharedColumnSizeScope="True"/>
            </RibbonGallery>
        </RibbonComboBox>
        <RibbonButton Label="Edit Categories"  ToolTipTitle="Edit Categories" ToolTipDescription="Add, edit or delete categories and subcategories" Command="{Binding AddCatCommand}"></RibbonButton>
    </RibbonGroup>
</Ribbon>

您必须设置 IsSharedColumnSizeScope="True" 才能使项目拉伸(stretch)到 ComboBox。这确保了正确的布局。

上面的示例向您展示了不同之处，因为我没有在您的第二个 ComboBox 上设置该属性。

希望这对您有所帮助。

编辑

这里是一个简单的模型

public class Category {
        private ObservableCollection<Category> _subCats = new ObservableCollection<Category>();
        public string Name { get; set; }

        public ObservableCollection<Category> SubCategories => this._subCats;
    }

现在一些ViewModel-我放在代码隐藏中的东西

public partial class Window1 : INotifyPropertyChanged {

        private Category _selectedCategory;
        private ObservableCollection<Category> _categories = new ObservableCollection<Category>();
        private Category _selectedSubCategory;

        public Window1() {
            InitializeComponent();
            var cat = new Category() { Name = "Category 1" };
            cat.SubCategories.Add(new Category { Name = "Cat 1 - Subcat 1" });
            cat.SubCategories.Add(new Category { Name = "Cat 1 - Subcat 2" });
            cat.SubCategories.Add(new Category { Name = "Cat 1 - Subcat 3" });
            var cat2 = new Category() { Name = "Category 2" };
            cat2.SubCategories.Add(new Category { Name = "Cat 2 - Subcat 1" });
            cat2.SubCategories.Add(new Category { Name = "Cat 2 - Subcat 2" });
            var cat3 = new Category() { Name = "Category 3" };
            cat2.SubCategories.Add(new Category { Name = "Cat 3 - Subcat 2" });
            this.Categories.Add(cat);
            this.Categories.Add(cat2);
            this.Categories.Add(cat3);
            this.SelectedCategory = this.Categories.First();
            this.DataContext = this;
        }

        public ICommand AddCatCommand => new RelayCommand(x => {
            var newCat = new Category { Name = "Im New" };
            newCat.SubCategories.Add(new Category { Name = "I'm new too" });
            this.Categories.Add(newCat);
        });

        public Category SelectedCategory {
            get { return _selectedCategory; }
            set {
                if (Equals(value, _selectedCategory)) return;
                _selectedCategory = value;
                OnPropertyChanged();
            }
        }

        public Category SelectedSubCategory {
            get { return _selectedSubCategory; }
            set {
                if (Equals(value, _selectedSubCategory)) return;
                _selectedSubCategory = value;
                OnPropertyChanged();
            }
        }

        public ObservableCollection<Category> Categories => this._categories;

        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

许可

您可能会注意到，所有使用的集合都没有 setter ，从而防止它们被覆盖。如果使用 ItemsSource，则绑定(bind)的 Collection 应该不重置，只是清除 .Clear() 并在上面的示例中添加新项目作为 Button会告诉你