Newbie here. Am adding a label on the top of a page using XAML & Xamarin, but the label is too near the top of the page, so it's obscured by the iPad current time.
XAML code being used is:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamlSamples.HelloXamlPage"
Title="XAML + Code Page">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">
<Label Text="Text here"
Font="Large"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{DynamicResource TitleStyle}"/>
</StackLayout>
</ContentPage>
Take a look on you Stack Padding (Padding="-300,-1,-300,29") it's a little weird,
Also, you can add some layout with a padding before
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#000000" Spacing="0" Padding="-300,-1,-300,29">
<Grid Padding="20 "/>
<Label Text="Text here"
Font="Large"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{DynamicResource TitleStyle}"/>
Change your padding to
Padding="x, 20, y, z"
In iOS, the height of the status bar is 20 pixels and is included when determining the position on the page (meaning a y location of y is at the top of the status bar and similarly the page). Windows and Android do not include the height of the status bar when determining the location on the page (meaning a y location of 0 is at the bottom of the status bar). It should also be noted that in some situations the status bar may actually be 40 pixels tall (in a call from what I've read).
Suggested use for a cross-platform option is to do something like this:
< ContentPage.Padding >
<!-- set platform - specific padding
iOS needs an additional
20px top padding to account for
iPhone status bar -->
< OnPlatform x:TypeArguments ="Thickness"
iOS ="0, 20, 0, 0"
Android ="0, 0, 0, 0"
WinPhone ="0, 0, 0, 0" />
</ ContentPage.Padding >
Note: this padding is being added to your ContentPage tag rather than the StackLayout tag. Code retrieved from here.
Related
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="clr-namespace:Sharpnado.Tabs;assembly=Sharpnado.Tabs"
xmlns:sh="clr-namespace:Sharpnado.Shades;assembly=Sharpnado.Shadows"
x:Class="SplashTest.Segment">
<ContentPage.Content>
<StackLayout>
<tabs:ViewSwitcher x:Name="Switcher"
Grid.Row="1"
SelectedIndex="1"
Grid.Column="1"
Animate="True"
>
</tabs:ViewSwitcher>
<tabs:TabHostView x:Name="TabHost"
Grid.Row="4"
HeightRequest="54"
Margin="20,15,20,0"
VerticalOptions="Center"
Padding="60,0,60,0"
BackgroundColor="#F0F0F3"
Shades="{sh:SingleShade Offset='0,8',
BlurRadius=10,
Color=Gray
}"
CornerRadius="100"
IsSegmented="True"
SegmentedHasSeparator="False"
TabType="Fixed"
SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
<tabs:TabHostView.Tabs >
<tabs:SegmentedTabItem Style="{StaticResource SegmentedTabStyle}" Label="Male" />
<tabs:SegmentedTabItem Style="{StaticResource SegmentedTabStyle}" Label="Female" />
</tabs:TabHostView.Tabs>
</tabs:TabHostView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Above Xaml The Male Tab is corner radius working only left side not in
the Right side how to i give corner radius in both left and right side
in xamrin forms .Note I have install Sharpnado plugin and intilizing
in App.Xaml.
you can use Frame and apply corner radius for all corners by making custom rendererfor the same. Overlap those two frames based on the selection type.
Refer:Customizing Frame corner radius with Xamarin.Forms
Overlap elements in Xamarin.Forms [you can use absolute layout as well, if you want]
I have a problem. I used the following code to create a Floating Action Button Menu: https://github.com/Polarts/CrossFAB
Now, I added it to my code like this:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
I used an AbsoluteLayout, because the FloatingMenu needs to be in the bottom right corner, but the problem is that right now, I can use the Floating Action Button, but the scroll of the ScrollView isn't working. When I put the FloatingMenu code above the ScrollView, the FloatingMenu stops working and I can only scroll.
How can I use both items for clicks?
When you set the AbsoluteLayout.LayoutBounds="0,0,1,1" and AbsoluteLayout.LayoutFlags="All" on a view, you're saying that you want you want the view to start in the top left corner and you want it to take up the full width and height of the view.
Since you set the LayoutBounds on both your views to this, you essentially have two views that take up the entire screen stacked on top of each other. You can test this out by adding a background color to either of the views and see what happens. Because of this, whichever view you put second is getting the touches, because it's the one on top.
If you want your FloatingMenu to be in the bottom right hand corner, you need to fix the layout bounds on that view to reflect that.
Something like this might get you started:
<c:FloatingMenu
Margin="0, 0, 10, 10"
BGColor="Gray"
OpenIcon="Share.png"
CloseIcon="X.png"
AbsoluteLayout.LayoutBounds=".95,.95,50,50"
AbsoluteLayout.LayoutFlags="PositionProportional">
This says that we want to put the view 95% over and 95% down the screen with a set width and height of 50. We say PositionProportional because we want the position, the first 2 numbers to be read as a proportion, not as absolute values.
You may also need to adjust the layout of the Floating Menu view. I suspect you're doing something like EndAndExpand for your Vertical and Horiztonal options that may not work like you expect when you fix the absolute layout.
Make sure to also take a look at the documentation on AbsoluteLayout.
PositionProportional, indicates that the x and y values will be
interpreted as proportional, while the size values are interpreted as
absolute.
A position of (0,0) puts the child in the upper-left corner, while a position of (1,1) puts the child in the lower-right corner, and a position of (0.5,0.5) centers the child within the AbsoluteLayout.
So you could try to change like below:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
How to make paddings for the source image inside image button?
UPDATE:
<ImageButton Source="cell_arrow_right.png" IsVisible="{Binding IsNotLeaf}"
VerticalOptions="Center" HorizontalOptions="Center"
WidthRequest="40" HeightRequest="40" Aspect="Fill"
Clicked="ImageButton_Clicked" Margin="0, 0, 15, 0"
BackgroundColor="Transparent" BorderColor="Accent"
BorderWidth="1" Scale="0.9" CornerRadius="5" />
I tried to use Padding, not working.. It just moves the source image. Also I tried to edit margin - still no result.
Now I've just edited the image itself, made it with paddings. But that's bad decision..(
I suspect the problem is actually HorizontalOptions and VerticalOptions, both are set to Center, which will position the ImageButton in the center of it's containing element.
Try removing them completely (they default to HorizontalOptions=Fill, same for vertical). Or you could try:
<ImageButton VerticalOptions="Start" HorizontalOptions="Start" Margin="10" />
This will give a margin of 10 around the ImageButton and position the image at the start of its containing element (horizontally and vertically, ie Top and Left).
Padding represents the distance between an element and it's child elements.
Margin represents the distance between an element and adjacent elements.
There is a good guide here.
Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.
I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);
With Rg.Plugins.Popup Nuget you can customize the popup.
Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you