The 2 labels should be at the bottom line, but the second label has some space to the bottom line. The only difference between them is the Fontsize.
How can I manage that both labels are at the same vertical position?
<StackLayout
Orientation="Horizontal"
Spacing="1">
<Label
Text="{Binding First}"
FontSize="{Binding FirstFontSize}"
LineBreakMode="NoWrap"
VerticalOptions="End"/>
<Label
Text="{Binding Second}"
FontSize="{Binding SecondFontSize}"
LineBreakMode="NoWrap"
VerticalOptions="End"/>
</StackLayout>
As you have well noted, this is how the text is rendered at different font sizes. The alignment is correct. You can only manually add padding if you prefer something different.
Related
How can i make a button resize itself to fit the entire text. Currently i have a CollectionView that gets populated with buttons with text from a collection. The issue i have is that the button does not expand to fit the text and for all buttons generated, the width is identical. Is it possible to make each button size itself just to fit in the text within it?
<CollectionView x:Name="TagsView"
Grid.Row="0">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Button Text="{Binding Name}"
CornerRadius="15"
HorizontalOptions="CenterAndExpand"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
What it looks like at the moment:
Thanks
Firstly, if you want to make a button resize itself to fit the entire text, you need to set propeties HorizontalOptions and VerticalOptions of this button like below:
HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"
And then,you should add a LinearItemsLayout with Horizontal Orientation like below:
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
I work on a Xamarin.Forms app that will contain a page with 2 CollectionView items:
an horizontal CollectionView that will display events
a vertical CollectionView that will display posts
I would like that the first list is progressively hidden as soon as the user starts to scroll on the second list.
We can found this behaviour on a sample from Syncfusion: but they use a SfRotator as control for the horizontal list:
I've tried to reproduce the same behaviour on my page, but it doesn't work as expected. My horizontal list is not hidden until I scroll vertically on this first list itself. If I scroll on the second vertical list, the first list is still visible:
My XAML looks like this:
<ContentPage.Content>
<RefreshView x:DataType="vm:NewsViewModel"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<ScrollView>
<StackLayout Padding="16" Spacing="16">
<CollectionView x:Name="EventsListView"
ItemsSource="{Binding Events}"
HeightRequest="250"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame BackgroundColor="Red">
<StackLayout x:DataType="model:Event" >
<Label Text="{Binding Name}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView x:Name="NewsListView"
ItemsSource="{Binding News}"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame>
<StackLayout x:DataType="model:News">
<Label Text="{Binding Description}" />
<Label Text="{Binding Date}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
=> Is there a way to achieve this?
Quick reminder that you Shouldn't use Scrollable Elements inside other Scrollable Element, it usually breaks how both work, Quoting:
Xamarin doesn't recommend using the ListView, WebView, or ScrollView
inside a ScrollView. Microsoft Xamarin.Forms Official Documentation
says that ScrollViews should not be nested. In addition, ScrollViews
should not be nested with other controls that provide scrolling, like
ListView and WebView.
And this is what happening:
The ScrollView isn't actually scrolling, the Vertical CollectionView is the one giving the Illusion that the page is scrolling, meaning that the Horizontal one is always on top.
How to fix it?
To fix this, you should remove the Vertical CollectionView and use some kind of Repeater View, this Post will guide you on how to achieve it.
I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.
this is my xaml code where i have 2 fields placed under one template column.
now i am getting the format the output like this so that i can specify the space betweeen these 2 columns
Color
red image1
green image2
green image2
white image6
so that output looks good.
How can i define space between them so that it looks like the above one
right now thw output is like this
color
Redimage1
greenimage2
greenimage2
whiteimage6
<sdk:DataGridTemplateColumn Header="Color" Width="80">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Loaded ="StackPanel_Loaded" Orientation="Horizontal" Background="Transparent">
<TextBlock Text="{Binding Color}" TextWrapping="NoWrap" HorizontalAlignment="Center" Foreground="Blue"></TextBlock>
<Image x:Name="imgTargetScore" Source ="{Binding ColorImage}" Width="20" Height="20" Stretch ="Fill"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
loking forward for an solution
thanks in advance
prince
You need to put a bit of Margin on your TextBlock and/or Image controls:
<TextBlock Text="{Binding Color}" Margin="0,0,5,0" TextWrapping="NoWrap" HorizontalAlignment="Center" Foreground="Blue" />
This example puts a 5px margin on the right edge of the TextBlock. If you want your images to line up vertically then you may want to also make the TextBlock a set width, by default it is only as long as the text in it.
In the following XAML, the word "Test" centers horizontally but not vertically.
How can I get it to center vertically?
<Window x:Class="TestVerticalAlign2343.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterScreen"
Title="Window1" Height="768" Width="1024">
<DockPanel LastChildFill="True">
<Slider x:Name="TheSlider"
DockPanel.Dock="Left"
Orientation="Vertical"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
Minimum="0"
Maximum="10"
Cursor="Hand"
Value="{Binding CurrentSliderValue}"
IsDirectionReversed="True"
IsSnapToTickEnabled="True"
Margin="10 10 0 10"/>
<Border DockPanel.Dock="Right" Background="Beige"
Padding="10"
Margin="10"
CornerRadius="5">
<StackPanel Height="700">
<TextBlock
Text="Test"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="200" x:Name="TheNumber"/>
</StackPanel>
</Border>
</DockPanel>
</Window>
A stackpanel, no matter how you stretch it, will collapse around the children. you can't make it grow more than that. Basically, that "Height=700" is not helping you.
So either set VerticalAlignment on the StackPanel to "center" so that the stackpanel goes into the center of the dockpanel...or remove the stackpanel altogether and set VerticalAlignment="Center" on the TextBlock.
Seems I asked this question 10 months ago, I got the above scenario to work by replacing the StackPanel with DockPanel LastChildFill=True like this:
<DockPanel LastChildFill="True">
<TextBlock
DockPanel.Dock="Top"
Text="Test"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="200" x:Name="TheNumber"/>
</DockPanel>
I stumbled across this which seems to work perfectly:
<Grid>
<TextBlock Text="My Centered Text"
TextAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The Grid ensures that the single TextBox within it fills the solitary cell in the grid and the VerticalAlignment in the TextBlock ensures that the text is centered within than.
Simply position/align your text horizontally however you require (the above snippet centers it in this axis also, but changing this doesn't alter the vertical centering).
Inside the StackPanel that surrounds the TextBlock, check out VerticalContentAlignment.