1

I am sure I could do better with the title but here is what I am looking for. I have a UWP app where I want to achieve something like this screenshot: enter image description here

Here is a snippet from my code:

<Border BorderBrush="Black">
    <Grid>
        <Rectangle Fill="Green" />
    </Grid>
</Border>

I am trying to fill the Rectangle in the Grid with the shapes given in the screenshot. How can I do that?

Clemens
  • 123,504
  • 12
  • 155
  • 268
tavier
  • 1,744
  • 4
  • 24
  • 53
  • When I try to add VisualBrush Resource in the Page.Resources it says 'Cannot resolve symbol 'VisualBrush'' – tavier Jul 14 '16 at 11:46
  • 2
    This is not a duplicate because it's about UWP, not WPF. There is no VisualBrush in UWP. – Clemens Jul 14 '16 at 11:51
  • If the Rectangle isn't extremely large, you could prepare a BitmapImage resource and use it with an ImageBrush. – Clemens Jul 14 '16 at 12:58

1 Answers1

2

So, while I don't have a way to test on UWP at the moment, I assume things like LinearGradientBrush and MappingMode are supported since this way would work on WPF, Silverlight, whatever else... With that assumption, give this a shot.

<Rectangle Stroke="LightBlue" StrokeThickness="5">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="6,4" 
                             MappingMode="Absolute" SpreadMethod="Repeat">
            <GradientStop Color="LightBlue" Offset="0.25"/>
            <GradientStop Color="#00000000" Offset="0.15"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

enter image description here

You might tweak your Starts/Ends/Offsets for desired angle and size but it conveys the concept. For example if you increase your EndPoint numbers you'll get the thicker lines like in your example.

You can also turn the brush into a resource and use it as a resource for Paths, or Backgrounds, or whatever supports LinearGradientBrush usually. Hope this helps, cheers.

PS - Some other neat things you can do with them that should be easy to port to UWP.

Addendum:

This is closer to your example to save you a little trouble, notice the differences.

<Rectangle Stroke="LightBlue" StrokeThickness="5">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="8,0" EndPoint="18,8" 
                     MappingMode="Absolute" SpreadMethod="Repeat">
            <GradientStop Color="LightBlue" Offset="0.15"/>
            <GradientStop Color="White" Offset="0.05"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>
Community
  • 1
  • 1
Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • It works fine. Thanks Chris. I possible I would like to keep the thickness of white lines as it is but increase it for the blue ones. – tavier Jul 15 '16 at 09:34
  • @AshishAgrawal Just play around with increasing the numbers on Endpoint like I suggested, right around 20 or so for one of them should do it. But if you tinker with it you'll get exactly what you want and learn something in the process too. ;) – Chris W. Jul 15 '16 at 11:44
  • :) I tried doing that but the thing is as I change the EndPoint to something like {12,6} it also makes the White line thicker (which I don't want). Anyway, thanks a lot for the code, I will try and tweak it to match it exactly with the screenshot. Thanks again :) – tavier Jul 18 '16 at 08:08
  • @AshishAgrawal See updated answer, I added another example to bring it to your example or close, notice the differences. :) – Chris W. Jul 18 '16 at 13:36
  • thanks a ton for doing it. I was close but this is perfect :) – tavier Jul 19 '16 at 06:36