CODEWITHSUNDEEP
c#xamarin.forms
Jon
Jon

Reputation: 1727

Xamarin (XAML) how to place 2 labels side by side

I have 2 labels that need to use different fonts to make single label this "My Company (c)" (copywrite symbol). "My Company " will be a Large font and the '(c)' a small font. I can't get them to appear as 1 single label. There seems to be spacing issues. I have tried the following.

   <StackLayout Grid.Row="1" Orientation="Horizontal">
                  <Label
                      x:Name="lbCo" 
                      Text="My Company"
                      Style="{DynamicResource LargeLabel}"/>

                  <Label
                      x:Name="lbcopywrite" 
                      Text="©"
                      Margin="0,-7,0,0"
                      Style="{DynamicResource SmallLabel}"/>
                 </StackLayout>

But it appears like "My Company (spaces) (c)"

Any ideas how can make it look like "My Company(c)", always on the same line and together?

Upvotes: 5

Views: 20372

Answers (3)

Adam
Adam

Reputation: 16199

There is another way, but you can't assign a Style directly to the text, but you can choose numerous font options. You can still set a Style to the main label though.

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Company" FontAttributes="Bold"/>
            <Span Text=" ©" FontSize="Micro" />
        </FormattedString>
    </Label.FormattedText>
</Label>

If you want binding, you need to create a Converter, that returns a FormattedString, and assign to FormattedText. You could create a Converter with Parameters if you want to reuse it, with different styles.

<Label FormattedText="{Binding Text, Converter={StaticResource FormattedStringConverter}}" />

Upvotes: 17

TResponse
TResponse

Reputation: 4125

You should use the VerticalTextAlignment property and set it to center. You should also set the label margin to 0 for both.

<StackLayout Grid.Row="1" Orientation="Horizontal">
    <Label
        x:Name="lbCo" 
        Text="My Company"
        VerticalTextAlignment="Center"
        Style="{DynamicResource LargeLabel}"/>
    <Label
        x:Name="lbcopywrite" 
        Text="©"
        VerticalTextAlignment="Center"
        Style="{DynamicResource SmallLabel}"/>
</StackLayout>

Upvotes: 5

TaiT&#39;s
TaiT&#39;s

Reputation: 3216

You can specify the Spacing property on the StackLayout: 

<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
     <Label x:Name="lbCo" 
            Text="My Company"
            Style="{DynamicResource LargeLabel}"/>

     <Label x:Name="lbcopywrite" 
            Text="©"
            Margin="0,-7,0,0"
            Style="{DynamicResource SmallLabel}"/>
</StackLayout>

By default, the value is 6.

Upvotes: 16

Related Questions