设置RibbonComboBox内容的样式

本文关键字：样式 RibbonComboBox 设置 | 更新日期: 2023-09-27 18:00:02

我正在学习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属性（以及其他注释属性）。我如何知道应该为哪个元素设置这些属性？

设置RibbonComboBox内容的样式

要实现目标，请执行以下操作：

<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"才能使项目延伸到ComboBox。这样可以确保布局正确。

上面的例子向您展示了差异，因为我没有在您的第二个ComboBox上设置该属性。

希望这能有所帮助。

编辑

这里有一个简单的模型

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

现在，我在CodeBehind 中放入了一些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，则绑定的Collection应该而不是重置，只需清除.Clear()，并且添加的新项目作为上例中的按钮将显示

相关文章：