0

I have created a stack panel with 3 rectangles. I am trying to make a horizontal stack bar graph in UWP. so that the width of the rectangle is set through c program depending on the percentage.

<StackPanel Name="Graph" Orientation="Horizontal">
            <Rectangle Name="PosBlock" Fill="#9EE000" Height="20" RadiusX="10" RadiusY="20" />
            <Rectangle Name="NeuBlock" Fill="#FFBA00" Height="20" RadiusX="10" RadiusY="20"/>
            <Rectangle Name="NegBlock" Fill="#D61602" Height="20" RadiusX="10" RadiusY="20"/>
            </StackPanel>

Using this code I can get 3 rectangles with individually round corners like this image. See Image, 3rd rectangle width set to 0 . I dont want a gap between these rectangles. But i want rounded corners at the 2 ends. so i did this

<StackPanel Name="Graph" Orientation="Horizontal" CornerRadius="12,12,12,12">
            <Rectangle Name="PosBlock" Fill="#9EE000" Height="20"/>
            <Rectangle Name="NeuBlock" Fill="#FFBA00" Height="20"/>
            <Rectangle Name="NegBlock" Fill="#D61602" Height="20"/>
            </StackPanel>

But the rectangle corners are not cropped even if the stack panel corners are rounded. it looks like this

See Image here .

what should i do now?

Ajai
  • 1,049
  • 1
  • 11
  • 23
  • See:https://stackoverflow.com/questions/16341788/how-to-clip-content-with-rounded-corners-in-windows-store-app – lindexi Jun 21 '17 at 12:07
  • See:https://stackoverflow.com/a/42432266/6116637 – lindexi Jun 21 '17 at 12:15
  • The path method you suggested can't be used in my case. the rectangles are placed as an overlay to the camera image. so just by masking it with some other colors wont help. – Ajai Jun 21 '17 at 12:34
  • I'm having trouble visualizing exactly what you're trying to achieve. If you can share a quick visual example of what you want I'll show how to do it. – Chris W. Jun 21 '17 at 14:32
  • I don't know what you're trying to achieve exactly. It's not that you're doing it wrong but even with the image I'm not understanding. I believe I could answer this for you if you were a bit more descriptive or something. Can you give a mocked up example of what you're trying to do? – Michael Puckett II Jun 21 '17 at 23:59
  • 1
    You need to use Border instead of rectangle. Because Borders allow you to have rounded corners for one side. – Justin XL Jun 22 '17 at 06:49
  • I have created what i wanted by usinf 8 if else statements to set the various corner radius for the different rectangles. I hope there are easier methods to do it. – Ajai Jun 27 '17 at 11:27

0 Answers0