Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic CustomKeyTemplate Samples (Read 703 times)
Dan the Coder
YaBB Newbies
*
Offline


.NET and JS Dev

Posts: 6
Joined: Dec 18th, 2019
CustomKeyTemplate Samples
Mar 19th, 2020 at 1:12pm
Print Post  
Hello support,

I'm working on creating a custom template to get keys look and appearance similar to the picture attached. I've been working with the source code CustomTemplate example and I have a couple of questions.

Could you send a sample of a CustomTemplate that used the KeyTemplate CornerRadius property? The call to the needed method in the KeyTemplate class is static so I have trouble accessing it from outside class.

Secondly, could you also include a sample of a gradient color key background?

Are there an special things I need to know for creating CustomKeyTemplate for SpecialKey and UnicodeKey? I notice in the KeyTemplate source they are separate. Thanks in advance.
  

key_example.PNG ( 2 KB | 20 Downloads )
key_example.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2164
Joined: Oct 19th, 2005
Re: CustomKeyTemplate Samples
Reply #1 - Mar 20th, 2020 at 8:47am
Print Post  
Hi,

Do you mean the internal AddRoundRect method? I guess just add a copy to your derived class, we'll make it protected for next release -

Code
Select All
public override void Draw(Graphics grpx, Key key, Mode mode, Font font)
{
    .....
    var path = new GraphicsPath();
    AddRoundRect(r, CornerRadius, path);
	//grpx.FillRectangle(br, new Rectangle((int)key.Left, (int)key.Top, (int)key.Width, (int)key.Height));

    PathGradientBrush pgb = new PathGradientBrush(path);
    pgb.CenterPoint = new PointF(
        (float)(key.Left + key.Width / 2),
        (float)(key.Top + key.Height / 2));
    pgb.CenterColor = Color.White;
    pgb.SurroundColors = new Color[] { Color.Red };

    grpx.FillPath(pgb, path);
    .....
    grpx.DrawPath(Border, path);
}

static GraphicsPath AddRoundRect(
    Rectangle rect, float r, GraphicsPath gp)
{
    float x = rect.X;
    float y = rect.Y;
    float width = rect.Width;
    float height = rect.Height;
    try
    {
        float diameter = Math.Min(2 * r, Math.Min(width, height));
        r = diameter / 2;

        if (diameter < width)
            gp.AddLine(x + r, y, x + width - r, y);
        if (r > 0)
            gp.AddArc(x + width - diameter, y, diameter, diameter, 270, 90);
        if (diameter < height)
            gp.AddLine(x + width, y + r, x + width, y + height - r);
        if (r > 0)
            gp.AddArc(x + width - diameter, y + height - diameter, diameter, diameter, 0, 90);
        if (diameter < width)
            gp.AddLine(x + width - r, y + height, x + r, y + height);
        if (r > 0)
            gp.AddArc(x, y + height - diameter, diameter, diameter, 90, 90);
        if (diameter < height)
            gp.AddLine(x, y + height - r, x, y + r);
        if (r > 0)
            gp.AddArc(x, y, diameter, diameter, 180, 90);

        gp.CloseFigure();
    }
    catch (Exception)
    {
        gp.AddRectangle(rect);
    }
    return gp;
}
 



You can find more gradient examples here -
https://www.codeproject.com/Articles/20018/Gradients-made-easy
http://www.functionx.com/vbnet/gdi/gradientbrush.htm

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Dan the Coder
YaBB Newbies
*
Offline


.NET and JS Dev

Posts: 6
Joined: Dec 18th, 2019
Re: CustomKeyTemplate Samples
Reply #2 - Mar 20th, 2020 at 12:44pm
Print Post  
Slavcho,

Thanks for the info! Sounds good on the AddRoundRect method, this is what I chose to do and was wondering if there was a better way.

For the gradients, I think I understand how to get the look I want, when I create the GradientBrush object and set it to the Background property of the KeyTemplate it does not appear to be drawing. Setting it in the constructor of my CustomTemplate like so..

Code
Select All
public CustomKeyTemplate()
        {
            Background = new GradientBrush(new List<Color> {
                Color.Gray,
                Color.LightGray,
                Color.LightSlateGray,
                Color.LightSlateGray,
                Color.LightGray,
                Color.Gray
            },
            new List<float> {   0.0f, 0.1f, 0.2f, 0.8f, 0.9f, 1f },
            90f);
        } 



Then I have an override Draw() Method similar to the sample in the Mindfusion Library...

Code
Select All
public override void Draw(Graphics graphics, Key key, Mode mode, Font font)
		{
			var brush = Brushes.Gray;
			var rectangle = new Rectangle((int)key.Left, (int)key.Top, (int)key.Width, (int)key.Height);
			switch (mode)
			{
				case Mode.Normal:
					brush = Background.CreateBrush(rectangle);
					break;
				case Mode.Hover:
					brush = HoverBackground.CreateBrush(rectangle);
					break;
				case Mode.Pressed:
					brush = PressedBackground.CreateBrush(rectangle);
					break;
				default:
					break;
			}
.
.
.
}
 



What am I missing here?
  
Back to top
 
IP Logged
 
Dan the Coder
YaBB Newbies
*
Offline


.NET and JS Dev

Posts: 6
Joined: Dec 18th, 2019
Re: CustomKeyTemplate Samples
Reply #3 - Mar 20th, 2020 at 5:20pm
Print Post  
Slavcho,

I have sorted out the issues I had outlined above. I created a separate method to apply and design changes instead of attempting to assign in the constructor. All set now, thanks!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint