Forums Home / ComponentOne / WinForms Edition
Posted by: paulhaffner on 4 December 2019, 11:41 am EST
paulhaffner
Posted 4 December 2019, 11:41 am EST
How are we supposed to create icons using our own path/vector?
For example, here is a very simple SVG clip:
<svg width="32" height="32">
<circle cx="16" cy="16" r="15" stroke="dodgerblue" stroke-width="1" fill="silver"/>
</svg>
How can this be used to create an icon for the new ribbon?
Ruchir.Agarwal
Posted 5 December 2019, 7:15 am EST
Hello,
To implement your requirement, please refer to the developer comment here: https://www.grapecity.com/forums/winforms-edition/questions-about-the-new-ri#hello-kingmanthe-c1pathico
Also, for details please refer to documentation page: https://www.grapecity.com/componentone/docs/win/online-ribbon/icon.html
Regards,
Ruchir
paulhaffner
Posted 5 December 2019, 7:59 am EST
In addition to the request to information about how to create path icons, would you also please explain how the outlines of the bitmap icons change color depending on the ribbon theme applied. What I mean by this is, when the theme is colorful or white, icon outlines are black, whereas when the theme is black, the same icon has outlines in white. How do I achieve the same effect in any bitmap icons I provide myself?
paulhaffner
Posted 5 December 2019, 8:06 am EST - Updated 4 October 2022, 12:19 am EST
Here is an example of what I mean by the icon outlines changing color depending on the ribbon theme. How do I do this with my own supplied bitmaps?
paulhaffner
Posted 5 December 2019, 2:07 pm EST
Thanks for your response Ruchir, but it doesn’t help. The documentation makes no mention of SVG at all. The API documentation mentions about reading XML (presumably SVG), but there are no examples of how to get it working. As for the example in the link you’ve provided, it shows a path icon being defined by using this string: “M24.5,12.5 C24.5,19.127417 19.127417,24.5 12.5,24.5 C5.872583,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 5.872583,0.5 12.5,0.5 C19.127417,0.5 24.5,5.872583 24.5,12.5 z”
It may be an SVG d-attribute path, but there’s no indication of how to specify stroke width or color, so does that mean path icons have to be monochrome? As usual with C1 documentation there’s no explanation of anything that isn’t already blindingly obvious.
Ruchir.Agarwal
Posted 11 December 2019, 8:55 am EST
Thank you Paul. I understand now, what you meant to ask and implement.
Regarding the requirement, we are discussing with the developers and will get back to you with some information soon.
Regards, Ruchir
konstantin.pletnev
Posted 6 January 2020, 6:45 am EST
Hi Paul,
Sorry for delay, C1PathIcon don’t support full SVG features, we will work on it.
C1PathIcon is monochrome, this class have Stroke, StrokeThickness, Color, etc. properties for customization.
https://www.grapecity.com/componentone/docs/win/online-ribbon/C1.Win.4.5.2~C1.Framework.C1PathIcon_members.html
You are right, C1PathIcon.Data uses a string value of ‘d’ attribute of the Path node.
“The API documentation mentions about reading XML (presumably SVG)”
Can you show this place? I think it’s mistake.
From documentation:
Data property - Gets or sets the svg string describing the shape.
PathIcon allows to draw SVG paths (or XAML paths which have the same syntax).
As workaround we have C1CompositeIcon, this icon can include several C1PathIcon or other icons.
https://www.grapecity.com/componentone/docs/win/online-ribbon/C1.Win.4.5.2~C1.Framework.C1CompositeIcon.html
We have demo for C1Icon: https://www.grapecity.com/samples/c1icondemo
Here is an example of what I mean by the icon outlines changing color depending on the ribbon theme. How do I do this with my own supplied bitmaps?
Ribbon sets the ThemeLightness value for theme, we use this value to change icons sets, but I don’t see API for get this value. I will create task for this case.
Workaround for this case:
// use your theme name
C1.Win.C1Themes.C1Theme theme = C1.Win.C1Themes.C1ThemeController.GetThemeByName("Office2016Colorful", false);
var lightness = theme.GetEnum<C1.Win.C1Ribbon.ThemeLightness>("C1Ribbon365\\Palette\\ThemeLightness", C1.Win.C1Ribbon.ThemeLightness.Colorful);
paulhaffner
Posted 6 January 2020, 8:37 am EST
Thank you, Konstantin, that helps, particularly the C1IconDemo app. I will look at where I found the reference to SVG in your documentation and get back to you soonest.
In the meantime, please could you explain something I’ve seen in the C1IconDemo app (nothing about this in the official C1 documenation as usual!). There is a class in C1.Framework that can be used to obtain icons in an assembly, as shown by this snippet of code from your demo app.
// load all images embedded into application resources
var imageDictionary = ResourceLoader.GetImages(typeof(Form1).Assembly);
Can this be used to get hold of the icons used by the new ribbon? I need to do this for several very important reasons. Here is just one example that I currently have open on another C1 support thread:
https://supportone.componentone.com/casedetail/415281
As you’ll see, the new SmallImage and LargeImage properties seem to be broken (it also seems to be theme/lightness related, but I am not yet certain) and I cannot find any other way to gain access to images already in a ribbon.
So could I point the ResourceLoader at the assembly with the ribbon’s built-in image lists in it? If so, perhaps you would be kind enough to let me know exactly where to look. Time is important because the QAT panel (we don’t use the ribbon’s own QAT tools, because they are too crude - sorry) in the applications we have upgraded to the new ribbon no longer work, and it’s the only major feature holding us up. We have workarounds for other problems with the new ribbon, but not icon access. When time allows, I’ll submit the full list of bugs we’ve found with the new ribbon. The lack of access to internal icons is the real killer for us at the moment, so anything you can tell me about how to do it using the current 2019v3 feature set would be enormously helpful.
konstantin.pletnev
Posted 6 January 2020, 9:02 am EST
Paul,
In the meantime, please could you explain something I’ve seen in the C1IconDemo app (nothing about this in the official C1 documenation as usual!). There is a class in C1.Framework that can be used to obtain icons in an assembly, as shown by this snippet of code from your demo app.
It’s a class-helper, this class wrapps default ways for take resources from application in one API. I cheked your request: New ribbon uses different pressets for bitmap icons, currently we have 16_white, 20_white, 32_white, 16_black, 20_black, 32_black presets. Icon gets bitmap from preset (uses the element size and the color of theme). Then you set the Source property, this logic is disabled.
I see that do you need bitmaps, what do you think about this solution: we’ll add API like GetImage(string key, int size, bool isDark = false) (this API is example) ?
As you’ll see, the new SmallImage and LargeImage properties seem to be broken
This properties was add only for migration from old ribbon and can’t help you.
Time is important …
I understand you and will try to find a workaround with the current API.
konstantin.pletnev
Posted 6 January 2020, 9:06 am EST
we don’t use the ribbon’s own QAT tools, because they are too crude - sorry
We can improve them, you can create request with you ideas about it.
paulhaffner
Posted 6 January 2020, 9:16 am EST
Konstantin, thank you for the quick response.
what do you think about this solution: we’ll add API like GetImage(string key, int size, bool isDark = false)
That would be extremely helpful for some our of other requirements, such as obtaining ribbon image resources for use elsewhere in non-ribbon item such as sub-toolbars, because then it would be super easy to maintain a common graphical look through an entire application, not just the ribbon.
However it would also help very much to be able to provide an existing item, such as a ribbon button, as a parameter, and have its IconSet collection of images returned as bitmaps. That way we would be able to proceed with our QAT panel very quickly. Or would it be possible to make the Source property in the items returned from the IconSet property be readable?
I look forward to hearing from you. If you could let me know when any new icon-reading features appear in a hot fix, I would be very eager to help test it.
konstantin.pletnev
Posted 6 January 2020, 10:30 am EST
Paul,
I attached workaround for your case. I added extension method for ribbon, for easier migration to API in 20v1.
RibbonIcons.zip
paulhaffner
Posted 6 January 2020, 2:17 pm EST
Konstantin, thank you! Thank you!
That works brilliantly and we are up and running as good as before.
paulhaffner
Posted 16 January 2020, 7:00 pm EST
Konstantin, here is a little feedback following the information you provided on how to gain access to the ribbon icons.
There are a few incorrect spellings for the image keys as follows;
SchDeteleAppointment … SchDeleteAppointment
InsertCitration … InsertCitation
MarkCitration … MarkCitation
Not incorrect spelling, but the casing is inconsistent for this one:
ArrangeSidebySide … ArrangeSideBySide
I know it doesn’t affect functionality, but it grates!
Ruchir.Agarwal
Posted 20 January 2020, 10:08 am EST
Hi Paul,
Thank you for the suggestions. The typos have been fixed and the fix shall be available in one of the future releases.
~Ruchir
