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?
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}}" />
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.
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>
Related
Please I need help.
I have my Xamarin Form app that works very well with DataBinding to its View Model named OrderDetailViewModel.
But today I have to add another DataBinding field in line 10 Binding OrderStatusMessage that is bind to its Xaml.cs file (code behind) but out of curiosity this field doesn't work I mean it is not changing the Label Text dynamically after binding the label text to a property located in its xaml.cs file (code behind file).
In line 4 you can find the data binding to MVVM file called OrderDetailViewModel which works well.
But the issue is in line 10 Binding OrderStatusMessage which is a DataBinding to its own xaml.cs file doesn't change the Label text to new message.
I tested the same code Binding OrderStatusMessage outside of the CollectionView.ItemTemplate tag and it's working properly, so only when I put inside CollectionView.ItemTemplate tag that's is not pulling the updated text.
In the below code there's only one property that is bind to its xaml.cs file (code behind) which is in line 10 {Binding OrderStatusMessage} that doesn't get the updated text, the rest are bind to the MVVM which works well.
PS : I would like to add Multiple Binding to this below code in line 4 :
filename : OrderDetailViewPage.xaml
<CollectionView.ItemTemplate >
<DataTemplate >
<StackLayout
xct:TouchEffect.LongPressCommand="{Binding LongPressCommand, Source={RelativeSource AncestorType={x:Type local:OrderDetailViewModel}}}"
xct:TouchEffect.LongPressCommandParameter="{Binding .}"
xct:TouchEffect.PressedScale="1.2"
xct:TouchEffect.NativeAnimation="True">
<StackLayout>
<Label Text="{Binding OrderStatusMessage}" HorizontalOptions="CenterAndExpand" FontFamily="fasolid" FontSize="18" FontAttributes="Bold" TextColor="Black"/>
</StackLayout>
<Label Text="{Binding Id}"
FontSize="Medium"/>
<Label Text="Order number" HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding OrderId}"
TextColor="Purple" FontAttributes="Bold"
FontSize="Large" HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding OrderDetail}"
TextColor="Purple"
FontSize="Small" />
<Label Text="{Binding OrderDate}"
TextColor="Purple"
FontSize="Small" />
<Label Text="{Binding IsOrderComplete}"
TextColor="Purple"
FontSize="Small" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
Have you tried bind your Label inside CollectionView.ItemTemplate using Path property?
Like this : <Label Text = "{Binding Path=OrderStatusMessage, Source = {x:Reference pageName}}"/>
I am trying to create a simple ListView with custom ItemTemplate which consists of a Grid with some information. Each item in the ListView should have a larger space than that of the default. I've tried messing around with Margins/Padding but can't seem to create a larger space between items.
Does anyone have any tips how to achieve a greater whitespace between items in a ListView? From what I've found online and in documentation seems to be lacking. But there must be something I'm missing since this should be a pretty obvious use case of a ListView.
Code in the xaml page which the user sees:
<ListView ItemsSource="{Binding List, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
HasUnevenRows="True"
WidthRequest="455"
SeparatorVisibility="Default"
SeparatorColor="Transparent"
BackgroundColor="WhiteSmoke"
IsGroupingEnabled="True"
>
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<controls:CustomItemTextTable NameText="Name Name"
IdentityText="NUMBER IDENTITY"
IssuerText="TEST"
IssuerOrganisationText="TEST ORG"
CreatedText="2022-10-10 20:24"
ExpireText="2042-04-06 22:58"
StatusText="Inactive"
TrustLevelText="3"
IsClippedToBounds="False"
/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code in the CustomItemTextTable
<Border StrokeThickness="0"
StrokeShape="RoundRectangle 10"
BackgroundColor="WhiteSmoke"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"
Padding="11"
>
<Grid ColumnDefinitions="155,10,171"
RowDefinitions="*,*,*,*,*,*,*,*"
Padding="0,0,0,0"
>
<Label Text="Name"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Identity"
Grid.Row="1"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Issuer"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Issuer org"
Grid.Row="3"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Created"
Grid.Row="4"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Expire"
Grid.Row="5"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="Status"
Grid.Row="6"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Text="TrustLevel"
Grid.Row="7"
Grid.Column="0"
HorizontalOptions="End"
/>
<Label Grid.Row="0"
Grid.Column="2"
x:Name="name"
/>
<Label Grid.Row="1"
Grid.Column="2"
x:Name="identity"
/>
<Label Grid.Row="2"
Grid.Column="2"
x:Name="issuer"
/>
<Label Grid.Row="3"
Grid.Column="2"
x:Name="issuerOrg"
/>
<Label Grid.Row="4"
Grid.Column="2"
x:Name="created"
/>
<Label Grid.Row="5"
Grid.Column="21"
x:Name="expire"
/>
<Label Grid.Row="6"
Grid.Column="2"
x:Name="status"
/>
<Label Grid.Row="7"
Grid.Column="2"
x:Name="trustLevel"
/>
</Grid>
Any help/tips would be greatly appreciated...
I tried increasing Padding/Margin in both Xaml-pages.
IMPORTANT: You don't show the first few lines of CustomItemTextTable's xaml -
The header element that defines x:Class. Remove any BackgroundColor there, or change it to something obvious like "HotPink", to see if it is filling an area you are trying to make "show through".
That XAML doesn't give LayoutManager enough information to do what you want:
You've told Grid to make all rows same height (*), but nowhere is a total height stated.
Then you ask for a Margin, but that gets taken from the default total height assigned to the item.
The safest solution is to explicitly Request a Height. Make it large enough to include the desired Margin:
<CustomItemTextTable HeightRequest="210" Margin="0,0,0,10" ... />
NOTE: An alternative location for HeightRequest and/or Margin is in the custom view's header:
<SomeUIClass
xmlns:...
x:Class="...CustomItemTextTable"
HeightRequest="210" <-- these can be above x:Class property if you prefer.
Margin="0,0,0,10"
/>
If that doesn't fix it, remove that Margin. Instead, add a TRANSPARENT area within the item. Thus allowing color behind to show through. There are various ways to do this. Here is one:
<StackLayout
<Border ... <-- your existing code
</Border>
<BoxView HeightRequest="10" />
</StackLayout>
I'm trying to create a label with entry next to it, I'm trying to achieve the effect below (My entry has the border set to transparent which is why there's no lines under it):
Where the entry text and label text are both aligned, the entry should "grow" to the left as more numbers are typed and move the "£" symbol to the left, this is the best Ive been able to do so far though:
This is using the code:
<StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
<Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Text="£" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="0"/>
<controls:BorderlessEntry Text="{Binding Income.MonthlyIncome}" WidthRequest="80" HorizontalOptions="EndAndExpand" PlaceholderColor="#C7C7C7" Placeholder="0" VerticalOptions="CenterAndExpand" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="1"/>
</StackLayout>
But despite both being centred, the entry text is just slightly above the label text, I also cant figure out how to make the Entry extend the width depending on the text, or how to align it to the right (or stacklayout end).
I know I've bundled 3 questions into one here, so if anyone can help with even just 1 part of it it'd be a big help.
i test with a simple Entry and Label,you could use HorizontalOptions property and set to EndAndExpand or End to let the label and Entry align right like :
<StackLayout Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<StackLayout Grid.Column="0" VerticalOptions="Start" HeightRequest="60">
<Label Text="Monthly Income" VerticalOptions="CenterAndExpand"></Label>
</StackLayout>
<StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="60" >
<Label HorizontalOptions="EndAndExpand" VerticalOptions="Center" Text="£" FontSize="20" TextColor="#C7C7C7" />
<Entry PlaceholderColor="#C7C7C7" HorizontalOptions="End" WidthRequest="100" VerticalOptions="Center" FontSize="18" TextColor="#C7C7C7" />
</StackLayout>
</StackLayout>
and the effect like :
and make entry autosize width,maybe you should use custom renderer to achive it
So for the entry to grow on the left side as you mentioned, you can try giving HorizontalOptions as EndAndExpand to the StackLayout, Label and Entry.
Also for "entry text is just slightly above the label text" you can give some Margin from the bottom to the Label. Like Margin="0,0,0,5" you can try with 3,4,5 which works the best for the Margin. This is happening because the Entry Border is set to transparent so it is there but not visible.
Let me know if you have further issues.
I have a ListView that shows chemical residues, the problem is that when I add a particular residue ("BORRAS") my column configuration goes to shit as shown in the following figure
I think there is a nomenclature to set the width of the columns, how can I solve this? How can I make my ListView look homogenous?
I attach my ListView.XAML:
<ListView
SelectionMode="None"
Margin="5,0,10,10"
IsRefreshing="{Binding IsRefreshing}"
HeightRequest="{Binding AltoListaResiduos}"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding ListaResiduos}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<!--NOMBRE RESIDUO-->
<ColumnDefinition Width="3*"/>
<!--CANTIDAD ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE ESTIMADA-->
<ColumnDefinition Width="1.5*"/>
<!--CANTIDAD CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
<!--NOMBRE CONTENEDOR-->
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding NombreResiduo}"
HorizontalOptions="FillAndExpand"
MaxLines="3"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0"
Margin="4,0">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="11" Android="11" />
</Label.FontSize>
</Label>
<Label Text="{Binding formattedCantidadEstimada}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="1"
Margin="4,0">
</Label>
<Label Text="{Binding Estimado}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="2"
Margin="4,0">
</Label>
<Label Text="{Binding CantidadContenedor}"
HorizontalTextAlignment="End"
FontSize="Small"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="3"
Margin="4,0">
</Label>
<Label Text="{Binding Contenedor}"
HorizontalTextAlignment="End"
FontSize="Micro"
VerticalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="4"
Margin="4,0">
</Label>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm new to Xamarin.Forms and I hope this question helps others, how can I make my list look the same with all the waste? (independent of the name) any help for me?
You shouldn't need the StackLayout at all since you are defining a Grid with the appropriate columns.
This should help your Grid to span properly and fill the entire space
I have a feeling this is happening because you are using VerticalTextAlignment now for some reason both the TextAlignment Properties(H, V) have weird behaviors in them, even though Xamarin says for VerticalTextAlignment that it
Gets or sets the vertical alignment of the Text property.
I would rather use YAlign instead as it does not have this behavior and Xamarin says about YAling that it
Gets or sets the vertical alignment for the Text inside of the Label bound.
Secondly, when you use a grid layout a define the columns and rows you should never use AndExpand types as you have already defined the max area and it will not overlay that. Now what the LayoutOptions docs say is CenterAndExpand or FillAndExpand do is
A LayoutOptions structure that describes an element that is centered and expands.
Also, Remove the StackLayout just keep the Grid in your ViewCell.
<Label Text="{Binding Contenedor}"
XAlign="End"
FontSize="Micro"
YAlign="Center"
TextColor="{StaticResource das.color.texto}"
Grid.Column="4"
Margin="4,0"/>
Want to learn the best practices with Xamarin forms? Check my blog here: https://heartbeat.fritz.ai/techniques-for-improving-performance-in-a-xamarin-forms-application-b439f2f04156
Here is the issue I've been busting my head over for the better part of a day - I've got a very simple page that is comprised of a StackLayout with two elements inside it - an SVG image(FFImageLoading.Svg.Forms) and a Label. The Label needs to have its text aligned to the right - that's just how the design is. On Android I have no issue - HorizontalTextAlignment="End" works right away. On iOS however, it does not. The text is there, the space is there - I've checked by setting the BackgroundColor of the Label - but the text is not aligned to the right. Here are some code snippets below of the XAML:
<StackLayout Spacing="0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
Margin="50">
<svgImageLib:SvgCachedImage x:Name="Logo"
Source="logo.svg"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
AutomationId="Login"
WidthRequest="160" />
<Label VerticalOptions="EndAndExpand"
HorizontalOptions="End"
HorizontalTextAlignment="End"
LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="SOME VERY BIG APPLICATION TEXT"
FontAttributes="Bold"
TextColor="White">
<Span.LineHeight>
<OnPlatform Android="2.4"
iOS="0.8" />
</Span.LineHeight>
<Span.FontSize>
<OnPlatform Android="45"
iOS="40" />
</Span.FontSize>
</Span>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
Again, this works fine on Android, on iOS it fails. I have not tested on an actual device - only in the Simulator. I'm open to suggestions if anybody has any idea why this is not working only on iOS. Also, if it matters, Center also does not work there.