Click here to Skip to main content
15,846,346 members
Please Sign up or sign in to vote.
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
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

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>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900