Resolved CustomCollectionEditor - Customize the look and feel

tim8w

Well-known member
Joined
Sep 8, 2020
Messages
129
Programming Experience
10+
Hi,
I wanted to be able to control most of the aspects of the Collection Editor. First, I will admit, most of the ideas presented here came from various posts and examples found scouring the web. At this point, I don't remember where each idea came from, so if any of them are yours, let me know and I'll add credit in this post. Anyway, I will simply post the CustomerCollectionEditor. Comments explain most of what it is doing. If you need more clarification, just send me a note.

C#:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Drawing;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Security;
using System.Text;
using System.Threading.Tasks;
using Microsoft.VisualBasic;
using System.ComponentModel.Design;
using System.Windows.Forms;

namespace Defects
{
    public class MyCollectionEditor : CollectionEditor
    {
        public static bool bEditingCollection = false;

        public delegate void MyFormClosedEventHandler(object sender, FormClosedEventArgs e);

        public event MyFormClosedEventHandler MyFormClosed;

        public delegate void MyFormLoadEventHandler(object sender, System.EventArgs e);

        public event MyFormLoadEventHandler MyFormLoad;


        public delegate void MyFormControlAddedEventHandler(object sender, System.EventArgs e);

        public event MyFormControlAddedEventHandler MyFormControlAdded;

        public MyCollectionEditor(Type type)
            : base(type)
        {
        }

        protected override string GetDisplayText(object value)
        {
            Defect item = new Defect();
            item = (Defect)value;

            if (String.IsNullOrEmpty(item.DefectCode))
                return base.GetDisplayText(" ");
            else
            {
                String sDisplay = item.DefectCode.ToString().Substring(0, item.DefectCode.ToString().IndexOf(":"));
                return base.GetDisplayText(string.Format("{0}", sDisplay));
            }
        }

        protected override CollectionForm CreateCollectionForm()
        {
            CollectionForm collectionForm = base.CreateCollectionForm();

            // Turn OFF Help Button
            collectionForm.HelpButton = false;

            // Set the BackColor, StartPosition and Size of the form
            collectionForm.BackColor = Color.FromName("SteelBlue");
            collectionForm.StartPosition = FormStartPosition.CenterParent;
            collectionForm.Size = new Size(660, 500);

            // Add Form Handlers for trapping Load and Close
            collectionForm.FormClosed += this.collection_FormClosed;
            collectionForm.Load += this.collection_FormLoad;

            var overArchingTableLayoutPanel = collectionForm.Controls["overArchingTableLayoutPanel"];

            var addRemoveTableLayoutPanel = overArchingTableLayoutPanel.Controls["addRemoveTableLayoutPanel"];
            // Set the BackColor of the Buttons - It appears that they get set by default to the form's BackColor
            addRemoveTableLayoutPanel.Controls["addButton"].BackColor = Color.FromName("Control");
            addRemoveTableLayoutPanel.Controls["removeButton"].BackColor = Color.FromName("Control");
            // Add Handlers for trapping Add and Remove Buttons
            addRemoveTableLayoutPanel.Controls["addButton"].Click += AddButton_Click;
            addRemoveTableLayoutPanel.Controls["removeButton"].Click += RemoveButton_Click;

            var okCancelTableLayoutPanel = overArchingTableLayoutPanel.Controls["okCancelTableLayoutPanel"];
            // Set the BackColor of the Buttons - It appears that they get set by default to the form's BackColor
            okCancelTableLayoutPanel.Controls["okButton"].BackColor = Color.FromName("Control");
            okCancelTableLayoutPanel.Controls["cancelButton"].BackColor = Color.FromName("Control");
            // Add Handlers for trapping OK and Cancel Buttons
            okCancelTableLayoutPanel.Controls["okButton"].Click += OKButton_Click;
            okCancelTableLayoutPanel.Controls["cancelButton"].Click += CancelButton_Click;

            // Change the Member Labels' Text and Color
            overArchingTableLayoutPanel.Controls["membersLabel"].Text = "&Defect List:";
            overArchingTableLayoutPanel.Controls["membersLabel"].ForeColor = Color.FromName("White");
            // Change the Properties Labels' Text and Color
            overArchingTableLayoutPanel.Controls["propertiesLabel"].Text = "&Properties:";
            overArchingTableLayoutPanel.Controls["propertiesLabel"].ForeColor = Color.FromName("White");
            // Set the BackColor of the Buttons - It appears that they get set by default to the form's BackColor
            overArchingTableLayoutPanel.Controls["upButton"].BackColor = Color.FromName("Control");
            overArchingTableLayoutPanel.Controls["downButton"].BackColor = Color.FromName("Control");
            // Add Handlers for trapping Up and Down Buttons
            overArchingTableLayoutPanel.Controls["upButton"].Click += UpButton_Click;
            overArchingTableLayoutPanel.Controls["downButton"].Click += DownButton_Click;

            var propertyBrowser = overArchingTableLayoutPanel.Controls["propertyBrowser"] as PropertyGrid;
            if (propertyBrowser.Controls.Count != 0)
            {
                // Set the PropertySorting and ToolbarVisibilty
                propertyBrowser.PropertySort = PropertySort.NoSort;
                propertyBrowser.ToolbarVisible = false;
            }

            // Do something based on which Collection Editor was called
            switch (collectionForm.Text)
            {
                case "Defect Collection Editor":
                    {
                        break;
                    }
            }

            // Hide Add, Remove, Up and Down Buttons
            //collectionForm.Controls["overArchingTableLayoutPanel"].Controls["addRemoveTableLayoutPanel"].Controls["addButton"].Visible = false;
            //collectionForm.Controls["overArchingTableLayoutPanel"].Controls["addRemoveTableLayoutPanel"].Controls["removeButton"].Visible = false;
            //collectionForm.Controls["overArchingTableLayoutPanel"].Controls["upButton"].Visible = false;
            //collectionForm.Controls["overArchingTableLayoutPanel"].Controls["downButton"].Visible = false;

            return collectionForm;
        }

        private void collection_FormLoad(object sender, System.EventArgs e)
        {
            bEditingCollection = true;
        }

        private void AddButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Add Button Clicked");
        }

        private void RemoveButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Remove Button Clicked");
        }

        private void OKButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("OK Button Clicked");
        }

        private void CancelButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Cancel Button Clicked");
        }

        private void UpButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Up Button Clicked");
        }

        private void DownButton_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Down Button Clicked");
        }

        private void collection_FormClosed(object sender, FormClosedEventArgs e)
        {
            bEditingCollection = false;
        }
    }
}

There are a few things I wish I could change (mostly Font Sizes), but many of the items are "Read-only". I even tried creating new control to cover the ones I couldn't customize, but I could not get them positioned where I wanted. If anyone has any ideas, let me know.
 
Font size is readonly because you must create a new Font object set it's size. Font Constructor (System.Drawing)
John,
Awesome! That worked for form's font. It also worked for the individual 'membersLabel' and 'propertiesLabel' for the initial load when the list is empty. When there are members in the list, the member name is prepended to the 'propertiesLabel' and the font returns to it's original font .
 
Last edited:
One other thing that would be nice to modify is the width of the members area ("listbox") and the property area ("propertyBrowser"). Both have Size() properties, but when you edit them, they do not change. Do you have to use Reflection or something to do this?
 
Last edited:
One other thing that would be nice to modify is the width of the members area ("listbox") and the property area ("propertyBrowser"). Both have Size() properties, but when you edit them, they do not change. Do you have to use Reflection or something to do this?
I got an Email from Reza Aghaei that pointed out that bot "listbox" and "propertyBrowser" have the Anchor set to "Top,Bottom,Left,Right". He suggested that setting them to "Top,Left" would allow me to set the new Size() of the "listbox". Then it was simply a matter of doing the same with the "addButton" and "removeButton" and adjusting the Width() of the "addButton" and "removeButton"s and everything adjusted accordingly. Below is the result of all the customizations:

CollectionEditor Resized.png
 
Is this topic code you are sharing for others to use or is this a topic where you are looking for support?

Generally its a good idea to do your research before sharing tips.

Just wondering so we can set an appropriate tag on your topic so not to mislead readers.
 
Is this topic code you are sharing for others to use or is this a topic where you are looking for support?

Generally its a good idea to do your research before sharing tips.

Just wondering so we can set an appropriate tag on your topic so not to mislead readers.
I thought it was complete. I found some additional info for specific cases. If you want, I can delete it and enter in the complete solution I have now.
 
Just repost your new code as a TIP with the changes you have made, and explain its use and functionality.

I have set this topic to resolved.
 
I got an Email from Reza Aghaei that pointed out that bot "listbox" and "propertyBrowser" have the Anchor set to "Top,Bottom,Left,Right". He suggested that setting them to "Top,Left" would allow me to set the new Size() of the "listbox". Then it was simply a matter of doing the same with the "addButton" and "removeButton" and adjusting the Width() of the "addButton" and "removeButton"s and everything adjusted accordingly. Below is the result of all the customizations:

View attachment 1156

any way to change the font size of the items in the ListBox? I set the Font....but it just defaults to the original font type and size
 
Show us exactly how you set the font.

here's the code...
C#:
protected override CollectionForm CreateCollectionForm()
        {
            form = base.CreateCollectionForm();
            form.Shown += delegate
            {
                ShowDescription(form);
            };

            Font myDialogFont = new Font("Segoe UI", 9.0f, FontStyle.Regular); // Form's Font
            Font myFont = new Font("Tahoma", 9.0f, FontStyle.Regular);       // Individual Item's Font

            // Set the Dialog Font
            form.Font = myDialogFont;

            // Turn OFF Help Button
            form.HelpButton = false;

            //form.BackColor = Color.FromName("SteelBlue");
            form.StartPosition = FormStartPosition.CenterParent;
            form.Size = new Size(660, 500);


            var overArchingTableLayoutPanel = form.Controls["overArchingTableLayoutPanel"];
            var propertyBrowser = overArchingTableLayoutPanel.Controls["propertyBrowser"] as PropertyGrid;
            propertyBrowser.PropertyValueChanged += PropertyBrowser_PropertyValueChanged;
            // Change the size of the "listbox"
            Size mySize = new Size(250, 337);

            var listView = (ListBox)overArchingTableLayoutPanel.Controls["listbox"];
            listView.Font = myFont;
            listView.Anchor = System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left;
            listView.Size =  mySize;


            // Change the Member Labels' Text, Color and Font
            overArchingTableLayoutPanel.Font = myFont;
            overArchingTableLayoutPanel.Controls["membersLabel"].ForeColor = Color.FromName("Black");
            overArchingTableLayoutPanel.Controls["membersLabel"].Font = myFont;
           
            // Change the Properties Labels' Text, Color and Font
            overArchingTableLayoutPanel.Controls["propertiesLabel"].Text = "Custom Property:";
            overArchingTableLayoutPanel.Controls["propertiesLabel"].ForeColor = Color.FromName("Black");
            overArchingTableLayoutPanel.Controls["propertiesLabel"].Font = myFont;
            overArchingTableLayoutPanel.Controls["propertiesLabel"].Refresh();

            if (propertyBrowser.Controls.Count != 0)
            {
                // Set the PropertySorting and ToolbarVisibilty
                propertyBrowser.PropertySort = PropertySort.NoSort;
                propertyBrowser.ToolbarVisible = false;
                propertyBrowser.Font = myFont;
            }
            propertyBrowser.Size = mySize;

            SetCustomFormProperties(form);

            return form;
        }
 
Last edited by a moderator:
I also found that setting the following line doesn't appear to work. The label always reverts to either "Property" or "properties"
C#:
overArchingTableLayoutPanel.Controls["propertiesLabel"].Text = "Custom Property:";
 
Last edited by a moderator:
I would have expected replacing the Font of the ListBox to work. But who knows if you are replacing it too early and some other subsequent code is setting the font after your code runs, or if the ListBox that you are trying to access has been subclassed and it ignores the Font property.
 
I got an Email from Reza Aghaei that pointed out that bot "listbox" and "propertyBrowser" have the Anchor set to "Top,Bottom,Left,Right". He suggested that setting them to "Top,Left" would allow me to set the new Size() of the "listbox". Then it was simply a matter of doing the same with the "addButton" and "removeButton" and adjusting the Width() of the "addButton" and "removeButton"s and everything adjusted accordingly. Below is the result of all the customizations:

View attachment 1156

any way to change the font size of the items in the ListBox? I set the Font....but it just defaults to the original font type and size
 
Back
Top Bottom