TextMask Alignment

[gviddy]

I am having issues getting text to align to the start of a row. Is this a limitation of the system? Or am I doing it wrong?

Text always appears to be centered.

            <Grid HeightRequest="32">
                <magic:GradientView HorizontalOptions="Start" WidthRequest="400" BackgroundColor="Red">
                    <magic:GradientView.Mask>
                        <magic:TextMask Text="{Binding WalletTypeStr}" 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>

[mgierlasinski]

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.

[mgierlasinski]

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

[gviddy]

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.