TextMask Alignment about magicgradients HOT 3 CLOSED

Hi @gviddy
Clipping always works from the center of GradientView by design, there is no layout or alignment options at the moment. For proper positioning you need to put GradientView inside one of Xamarin.Forms layout containers, something like:

         <Grid HeightRequest="32" WidthRequest="400" BackgroundColor="Red">
                <magic:GradientView HorizontalOptions="Start" WidthRequest="60">
                    <magic:GradientView.Mask>
                        <magic:TextMask Text="Hello" FontSize="22"/>
                    </magic:GradientView.Mask>
                    <magic:LinearGradient Angle="-90">
                        <magic:GradientStop Color="#A9CDFF" Offset="0" />
                        <magic:GradientStop Color="#72F6D1" Offset="0.25"/>
                        <magic:GradientStop Color="#A0ED8D" Offset="0.5"/>
                        <magic:GradientStop Color="#FED365" Offset="0.75"/>
                        <magic:GradientStop Color="#FAA49E" Offset="1.0"/>
                    </magic:LinearGradient>
                </magic:GradientView>
            </Grid>

Unfortunately because you have binding here and WalletTypeStr can be anything, you have to measure text and set correct width instead of WidthRequest="60".

You can also extend TextMask and do your custom drawing. TextMask is really a PathMask with some text related properties. There is a method LayoutBounds in GradientMask base class which does the positioning and stretching:
LayoutBounds

I will improve positioning in next update by adding TextAlignment for text mask.

from magicgradients.

Hi @gviddy
New version has just been released. Two properties were added to TextMask: HorizontalTextAlignment and VerticalTextAlignment.

from magicgradients.

Hi @gviddy
New version has just been released. Two properties were added to TextMask: HorizontalTextAlignment and VerticalTextAlignment.

Oh that's awesome. Thank you. I will give it a go.

from magicgradients.