I have a StackLayout with one button and two labels.
I want to remove the empty space between StackLayout and the button.
I using Spacing = "0" but this isn't work for me.
<StackLayout VerticalOptions="EndAndExpand"
HorizontalOptions="EndAndExpand"
Spacing="0">
<Button Text="ОФИЦИАЛЕН WEB САЙТ"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClickedWeb"
x:Name="webButton"
WidthRequest="150"
HeightRequest="30"
FontSize="10"/>
<Label Text="Създаден от Благовест Пижев, тел: +359 899 91 66 79, е-mail: pizhevsoft#gmail.com"
HorizontalOptions="CenterAndExpand"
VerticalOptions="EndAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="10"
TextColor="White"/>
<Label Text="Финансирано по програма ННП 'Млади учени, докторанти и постдокторанти.' от МОН. НИМХ - Филиал Пловдив."
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="10"
TextColor="White"/>
</StackLayout>
When I use HeighRequest the lyrics of the labels are not visible and go down.
you can add Padding Property
Padding="0"
you can also(if you want) add Margin="0,-10,0,0"
Related
I want to create a button using fontawesome library in xamarin
(expected output)
(this is mine)
<Button Text=" Bireysel"
TextColor="Black"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="30"
Margin="15,0,0,0"
FontFamily="{StaticResource FontAwesomeSolid}"
BackgroundColor="Transparent"/>
I wanna change text style how can i do that?
Button can have both text and image with FontImageSource:
<Button Text="Left">
<Button.ImageSource>
<FontImageSource Glyph=""
FontFamily="{StaticResource FontAwesomeSolid}" />
</Button.ImageSource>
</Button>
Try this TextTransform="None"
<Button Text=" Bireysel"
TextColor="Black"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="30"
Margin="15,0,0,0"
FontFamily="{StaticResource FontAwesomeSolid}"
BackgroundColor="Transparent"
TextTransform="None"/>
My project is in Xamarin Forms and i have a very simple code.
<SwipeView x:Name="MainSwipe" BackgroundColor="#dcdde1">
<SwipeView.LeftItems>
<SwipeItems Mode="Reveal">
<SwipeItemView>
<StackLayout BackgroundColor="#208b55" Orientation="Vertical" Margin="20">
<Label Text="HITÉLET" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_hitelet" Padding="10"/>
<Label Text="KULTÚRA" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_kultura" Padding="10"/>
<Label Text="KÖZÉLET" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_kozelet" Padding="10"/>
<Label Text="ÉLETMÓD" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_eletmod" Padding="10"/>
<Label Text="GAZDASÁG" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_gazdasag" Padding="10"/>
<Label Text="SZÍNES" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_szines" Padding="10"/>
<Label Text="RÓLUNK" Style="{x:StaticResource LabelLeftMenu}" x:Name="open_rolunk" Padding="10"/>
</StackLayout>
</SwipeItemView>
</SwipeItems>
</SwipeView.LeftItems>
</SwipeView>
And i have a method to open left menu:
MainSwipe.Open(OpenSwipeItem.LeftItems);
But it isn't work perfectly.(does not open completely)
I have tested with shared coed, it's interesting. It shows the same with yours. Maybe it's an issue of SwipeView.
However, I have a workaround to solve this. You could add WidthRequest for the child view of SwipeItemView. As follows:(set WidthRequest="100")
<SwipeView x:Name="swipeView" HeightRequest="300">
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItemView>
<StackLayout BackgroundColor="#208b55"
Orientation="Vertical"
WidthRequest="100"
Margin="20">
...
</StackLayout>
</SwipeItemView>
</SwipeItems>
</SwipeView.LeftItems>
The effect:
In addition, you could submit it as an issue here in Github to follow it up there to know whether it has been sloved.
Using Xamarin.Forms. I have a ListView containing multiple ViewCells and in each one is a Picker and an Editor. Tapping the Editor fires Editor_Focused, but for some reason also fires Picker_Focused and Picker_Unfocused. I use the Picker_Unfocused event handler to add some data to a SQLite database and then refresh the ListView, so I can't have it firing every time the Editor is tapped. Following along with breakpoints, my refresher method is called twice, because Picker_Unfocused is also called twice for unknown reaons. Also worth noting is that Editor_Completed won't fire no matter what I do.
Things I have tried:
Adding a TapGestureRecognizer to the Editor which would set a property, which would then stop Picker_Unfocused from continuing its execution, but the TapGestureRecognizer never fires when the Editor is tapped.
Assigning a value to a property when Editor_Focused is fired that would do the same as above. Editor_Focused does fire first, but then leaves that property in the "don't fire Picker_Unfocused" state even when the Picker actually needs to be used. Countering that by setting the property back to "do fire" state in Picker_Focused doesn't work, as the order goes Editor_Focused -> Picker_Focused -> Picker_Unfocused -> Refresh list method.
Update: Forgot to include any code.
ListView defined in XAML.
<ListView x:Name="ListView"
HasUnevenRows="True"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,5,0,0">
<Label Text="{Binding Prop0}"
TextColor="DodgerBlue"
VerticalOptions="Center"/>
<Label Text="{Binding Prop1}"
TextColor="Black"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center"/>
<Label Text="Task Time:" TextColor="Black" HorizontalOptions="End"
VerticalOptions="Center"/>
<Picker x:Name="Picker" WidthRequest="80"
Title="Enter time"
FontSize="15"
Focused="Picker_Focused"
Unfocused="Picker_Unfocused"
SelectedItem="{Binding Prop2}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>0.25</x:String>
<x:String>0.50</x:String>
<x:String>0.75</x:String>
<x:String>1.00</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
IsVisible="{Binding Prop3}">
<Label Text="Comments:" TextColor="Black" VerticalOptions="Center"/>
<Editor x:Name="Editor" Text="{Binding Prop4}" TextColor="Black"
VerticalOptions="Center" HorizontalOptions="StartAndExpand" Focused="Editor_Focused"/>
</StackLayout>
</StackLayout>
<ViewCell.ContextActions>
<MenuItem Text="Delete"
x:Name="DeleteButton"
Clicked="DeleteButton_Clicked"
IsDestructive="True"
CommandParameter="{Binding .}"/>
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This used to work for me but no longer does. Maybe because of updates? But I am just trying to get a tap event attached to my label called JournalWarning. I was using TapGestureRecognizer.
Before I had the TapGestureRecognizer calling an OnReconnect method in xaml like so
<StackLayout x:Name="Journal" IsVisible="false" VerticalOptions="FillAndExpand" Padding="20, 0, 20, 20" Spacing="10">
<StackLayout Orientation="Horizontal">
<Label x:Name="JournalTitle" FontSize="Micro" />
<Label x:Name="AboutFormat" Text="About Formatted Text" FontSize="Micro" TextColor="{StaticResource InputBackgroundColor}" HorizontalTextAlignment="End" HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout>
<local:DarkKeyboardEditor x:Name="JournalContent" Text="{Binding Source={x:Static local:JournalTracker.Current}, Path=Content}" TextChanged="OnJournalChanged" Focused="OnEdit" Unfocused="OffEdit" FontSize="Small" HeightRequest="{Binding Source={x:Static local:JournalTracker.Current}, Path=EntryHeight}" />
<Label x:Name="JournalWarning" Text="Your device has lost its connection to the journal server. Journals cannot be viewed or edited at this time. Tap here to try and reconnect." FontSize="Medium" Style="{StaticResource warningLabelStyle}" IsVisible="{Binding Source={x:Static local:JournalTracker.Current}, Path=IsConnected, Converter={StaticResource inverser}}" VerticalOptions="EndAndExpand" AutomationProperties.IsInAccessibleTree="true">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnReconnect" />
</Label.GestureRecognizers>
</Label>
<BoxView x:Name="spacer" Style="{StaticResource SpacerStyle}" />
</StackLayout>
</StackLayout>
This stopped working so I thought maybe my padding was in the way and started to take away padding and margins but that made no difference so far. I also tried making the TapGestureRecognizer in C# like...
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
OnReconnect();
};
JournalWarning.GestureRecognizers.Add(tapGestureRecognizer);
Thought about making a command instead to see if that would make a difference. I'll probably try that next idk, this seems like a really noob question and I'm not sure why this isn't getting hit at all.
Can you see anything that might be an issue? Or did something changed in an update that I missed? Thanks
I have an background image that I have to set to my ContentPage however the image is zoomed in. I need it to be at Aspect="Fill" so it appears properly. I looked online and the solution was to have either an AbsoluteLayout or RelativeLayout with an image. But when adding this, an image which is supposed to be at the bottom of the page is no longer there.
<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>
<StackLayout>
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="End" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</RelativeLayout>
However, that share button should be at the bottom of the page because of the VerticalOptions="End" property. How do I fix this?
AbsoluteLayout is better for performance reasons. Plus you are asking about AbsoluteLayout, but using RelativeLayout in the code you shared.
Regardless, you need the VerticalOptions for that last image to be VerticalOptions="EndAndExpand" which will expand the area to fill the available space and then place the image at the vertical end of that area.
Basically the Start, Center, End, and Fill layout options say where to place the element in the available space or whether to enlarge the element to fill the available space, where StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand will expand the available space, if possible, and then set the item in that space to Start, Center, etc. AndExpand options are only applicable in a StackLayout
Here's the code if you want to use an AbsoluteLayout instead (recommended by the Forms engineering team):
<AbsoluteLayout>
<Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</AbsoluteLayout>