CODEWITHSUNDEEP
xamluwpshapes
tavier
tavier

Reputation: 1794

How to fill Rectangle with lines in UWP

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?

Upvotes: 1

Views: 1205

Answers (1)

Chris W.
Chris W.

Reputation: 23290

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>

Upvotes: 2

Related Questions