Xamarin forms align each texts on their baselines
Multi tool use
up vote
1
down vote
favorite
This is what I am currently having on screen with my texts:
Is there a way to align the 152
and bar
? Also the same with..
15
MinutesRemaining
and x
?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
c# xamarin xamarin.forms xamarin.forms-styles
add a comment |
up vote
1
down vote
favorite
This is what I am currently having on screen with my texts:
Is there a way to align the 152
and bar
? Also the same with..
15
MinutesRemaining
and x
?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
c# xamarin xamarin.forms xamarin.forms-styles
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This is what I am currently having on screen with my texts:
Is there a way to align the 152
and bar
? Also the same with..
15
MinutesRemaining
and x
?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
c# xamarin xamarin.forms xamarin.forms-styles
This is what I am currently having on screen with my texts:
Is there a way to align the 152
and bar
? Also the same with..
15
MinutesRemaining
and x
?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
c# xamarin xamarin.forms xamarin.forms-styles
c# xamarin xamarin.forms xamarin.forms-styles
edited Nov 13 at 9:09
asked Nov 12 at 17:28
Paula Kristin
325318
325318
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39
add a comment |
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
To avoid the issue that each of your labels vertical (Y
/ height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString
.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End"
your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString
just as if they were separate labels, you can assign x:Name
, BindingContext
, Binding
as a Span
is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
To avoid the issue that each of your labels vertical (Y
/ height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString
.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End"
your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString
just as if they were separate labels, you can assign x:Name
, BindingContext
, Binding
as a Span
is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
add a comment |
up vote
1
down vote
accepted
To avoid the issue that each of your labels vertical (Y
/ height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString
.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End"
your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString
just as if they were separate labels, you can assign x:Name
, BindingContext
, Binding
as a Span
is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
To avoid the issue that each of your labels vertical (Y
/ height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString
.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End"
your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString
just as if they were separate labels, you can assign x:Name
, BindingContext
, Binding
as a Span
is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
To avoid the issue that each of your labels vertical (Y
/ height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString
.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End"
your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString
just as if they were separate labels, you can assign x:Name
, BindingContext
, Binding
as a Span
is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
edited Nov 12 at 19:04
answered Nov 12 at 18:57
SushiHangover
49.1k53583
49.1k53583
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
add a comment |
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
Thanks @SushiHangover. I will check this one out. I want to ask, isn't YAlign already deprecated?
– Paula Kristin
Nov 13 at 8:40
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
@PaulaKristin Yes, it is, VerticalTextAlignment is the replacement, old habits.. ;-)
– SushiHangover
Nov 13 at 8:45
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
Ok Thanks @Sushi! I will try it out now!
– Paula Kristin
Nov 13 at 9:09
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267212%2fxamarin-forms-align-each-texts-on-their-baselines%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
zkGLGSoczB4I 3l 6D8B,7fVI OI5Kh Ub2nhZtpw20U8
Any chance you working on application called Musterd?
– Woj
Nov 12 at 17:41
set a BackgroundColor on your labels so you can see their size/alignment. I suspect they are different sizes, causing the mis-alignment. If that's the case then you could try either explicitly assigning a height value, or make them expand to fill their container vertically
– Jason
Nov 12 at 18:39
@Jason, yeah I already used the background color for that and I can see the alight has a problem.
– Paula Kristin
Nov 13 at 8:38
@Woj, no. What is Musterd?
– Paula Kristin
Nov 13 at 8:39