Forums

Linear Gradient Brush in Border Class
Last Post 17 Mar 2018 02:01 PM by Jakub Mifek. 2 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages Not Resolved
Jakub MifekUser is Offline
New Member
New Member
Posts:2


--
11 Mar 2018 01:50 PM
    Hi,
    I am trying to create a linear gradient border brush around an image.

    I have a set of dynamically generated images and user should be able to select them. On selection I would like to create a linear gradient border brush that would fade from the border of the image. For that purpose I created a class called LinearBorder that inherits from the Border class and contains 4 Border fields Top, Right, Bottom and Left. The Top property points to LinearBorder. Others point to instances of Border. When the user clicks the generated image, OnClicked event is triggered and Select method on the assigned LinearBorder is called. The Select method should create 4 linear gradient brushes that should draw red gradient from the side of the image to the open space. Content of the LinearBorder class:

    using EmptyKeys.UserInterface;
    using EmptyKeys.UserInterface.Controls;
    using EmptyKeys.UserInterface.Media;

    namespace UniversalClientData.Features
    {
    public class LinearBorder : Border
    {
    public Border Top => this;
    public Border Right { get; }
    public Border Bottom { get; }
    public Border Left { get; }
    public Image Image { get; }

    public LinearBorder(Image image, float width, float height, PointF visualPosition, float thickness, SolidColorBrush solidColorBrush)
    {
    Image = image;

    Top.Width = width;
    Top.Height = height;
    Top.VisualPosition = visualPosition;
    Top.BorderThickness = new Thickness(0, thickness, 0, 0);
    Top.BorderBrush = solidColorBrush;

    Top.Child = Right = new Border
    {
    Width = width,
    Height = height,
    VisualPosition = visualPosition,
    BorderThickness = new Thickness(0, 0, thickness, 0),
    BorderBrush = solidColorBrush
    };

    Right.Child = Bottom = new Border
    {
    Width = width,
    Height = height,
    VisualPosition = visualPosition,
    BorderThickness = new Thickness(0, 0, 0, thickness),
    BorderBrush = solidColorBrush
    };

    Bottom.Child = Left = new Border
    {
    Width = width,
    Height = height,
    VisualPosition = visualPosition,
    BorderThickness = new Thickness(thickness, 0, 0, 0),
    BorderBrush = solidColorBrush,
    Child = image
    };
    }

    public void Select()
    {
    var tlgb = new LinearGradientBrush
    {
    StartPoint = new PointF(0.5, 1),
    EndPoint = new PointF(0.5, 0),
    SpreadMethod = GradientSpreadMethod.Pad
    };
    tlgb.GradientStops.Add(
    new GradientStop(new ColorW(1f, 0f, 0f), 0.0f));
    tlgb.GradientStops.Add(
    new GradientStop(ColorW.TransparentBlack, 1.0f));

    // var tlgb = new SolidColorBrush(new ColorW(1.0f, 0.0f, 0.0f));}}
    Top.BorderBrush = tlgb;

    Left.BorderBrush = tlgb;
    }
    }
    }

    For testing purposes the Select method contains just the top border that is assigned to the Top and Left properties. The Select method runs as described but no border is shown. When I replace the LinearGradientBrush with the commented SolidColorBrush, the border is shown as it should. So that implies that I have some mistake in LinearGradientBrush creation. But I am not able to figure out what did I do wrong.

    Thank you for any ideas.

    Cheers,
    Jakub M.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:693


    --
    17 Mar 2018 12:17 PM
    Hi, making controls like this it's actually not that simple. You would have to wire up all the inner stuff, use dependency properties etc. Very similar to WPF, but not simple.

    Easier would be to make this "new control" just with custom control template or it could be just simple user control with grid, borders and image.
    Jakub MifekUser is Offline
    New Member
    New Member
    Posts:2


    --
    17 Mar 2018 02:01 PM
    Hi, thank you for the answer.
    Actually I just found out that it works exactly as I wanted to. I just miscalculated the gradient stops

    Thank you one more time.
    You are not authorized to post a reply.