Can I add a border to a stroke?

Question

0.00/5 (No votes)

See more:

Somewhat bizarre I know, but I used a very thick line stroke (stroking a path) to draw an arc segment 'shape'. Now the client wants a border around the 'shape'. My immediate thought was to fake it by drawing a slightly wider black stroke behind it.

However, I'm curious. Is there a 'proper' way to add a border to a line/stroke?

Posted 20-Jan-14 16:04pm

Kyudos

Add a Solution

Comments

Ron Beyer 20-Jan-14 22:23pm

Is there some way to give us a picture of what you want? The Border control in WPF is a square border around the bounding box of the control, and I don't think thats what you want. Are you wanting an outline around the arc segment?

Kyudos 20-Jan-14 22:34pm

Ron, yeah an outlined arc segment. I could add another path with the two top and bottom arcs and the two straight end segments, but I wondered if there was a built in way to draw an 'outlined' line.

Ron Beyer 20-Jan-14 22:38pm

The best way to do it would be to draw it three times. First with a really thick stroke in the outline color, then again with a slightly thinner stroke in the background color, and last your segment in its normal color. This would give the appearance of an outline around the stroke. As far as I know there is no built-in way to outline a geometry path, just a bounding box.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gauri Renake · Answer 1 · 2014-01-20T20:22:00

You can try like this. This code will give you rectangular border to stroke.

<window x:class="WpfApplication3.MainWindow" xmlns:x="#unknown">
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" AllowsTransparency="True" WindowStyle="None" 
        Title="MainWindow" Height="406" Width="1076" Loaded="Window_Loaded" Background="Transparent" BorderBrush="White">
    <canvas height="346" width="1032" opacity="0.8">
          <border borderbrush="Black" borderthickness="1" horizontalalignment="Center" verticalalignment="Center"></border>
        <!--Non-Rectangular window edge, created with PathGeometry-->
            <path stroke="DarkGray" strokethickness="2" height="346" width="1032" opacity="0.9">
                <path.fill>
                    <lineargradientbrush startpoint=".2,0" endpoint="0.8,1">
                        <gradientstop color="Lightgray" offset="0"></gradientstop>
                        <gradientstop color="PaleGoldenrod" offset="1.0"></gradientstop>
                        <gradientstop color="AliceBlue" offset="0.4"></gradientstop>
                        <gradientstop color="LightGoldenrodYellow" offset="0.5"></gradientstop>
                    </lineargradientbrush>
                </path.fill>
                <path.data>
                    <pathgeometry>
                        <pathfigure startpoint="40,20" isclosed="True">
                            <linesegment point="990,20"></linesegment>
                            <arcsegment point="1020,50" size="40,55" sweepdirection="Clockwise"></arcsegment>
                            <linesegment point="1020,300"></linesegment>
                            <arcsegment point="990,330" size="40,55" sweepdirection="Clockwise"></arcsegment>
                            <linesegment point="40,330"></linesegment>
                            <arcsegment point="10,290" size="40,55" sweepdirection="Clockwise"></arcsegment>
                            <linesegment point="10,45"></linesegment>
                            <arcsegment point="40,20" size="40,55" sweepdirection="Clockwise"></arcsegment>
                        </pathfigure>
                    </pathgeometry>
                </path.data>
            </path>
        
       
    </canvas>
</window>