I use the following code to create a xamarin form using visual studio for android when i look into the output lot of spaces between the controls.
Attachment contains output in emulator. Please let me know how to reduce the space between the controls:
.
Code use to create a form:
You can add the specific value for your Height in Grid.(If you do not set it, the default value of the RowDefinition.Height property is *). If you do not want to set the specific Height, please change the value of VerticalOptions from CenterAndExpand to Center(Row 1 and Row 3's Lable).
Here is code.
<ContentPage Title="Home" >
<StackLayout>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<CarouselView x:Name="Imageslider">
<CarouselView.ItemTemplate>
<DataTemplate>
<Image Source="MonkeyFace.jpg" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
<Label Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="About Us" VerticalTextAlignment="Center" FontSize="Large" />
<Label Grid.Row="2" Padding="2,0,2,0" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" Text="Surabi Institute of Hotel Management and Fashion Technology recognized by Bharathidhasan University. Surabi Institute of Hotel Management and Fashion Technology was established in the year of 2006. The aim of the Founder is to Provide Hotel Management / Fashion Technology to the poor and Need of the Society">
</Label>
<!-- Place new controls here -->
<Label Grid.Row="3" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="Saravana Educational Welfare Trust" />
</Grid>
</StackLayout>
</ContentPage>
Here is running screenshot.
Related
I just want to put the icon on the begging of the Entry, there is not way, i had read and i can not, please i need any help
Here you have part of the code where i want to insert the ico
<ContentPage.Content>
<Grid RowSpacing="{OnPlatform iOS=25,Android=20}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="3" HorizontalOptions="Center"
WidthRequest="{OnPlatform iOS=300,Android=300}"
Orientation="Vertical">
<!-- Here where i insert the image -->
<Image Grid.Column="1" Source="userImage.png"></Image>
<Label
Text="Usuario"
FontSize="{OnPlatform Android=13}"
TextColor="Black"
/>
<Frame
HasShadow="{OnPlatform Android=true, iOS=false}"
Padding="{OnPlatform Android=6,iOS=0}"
CornerRadius="{OnPlatform Android=7}">
<Entry
Placeholder="Usuario"
ClearButtonVisibility="WhileEditing"
MaxLength="25"
FontSize="{OnPlatform Android=15,iOS=16}"
TextColor="Blue"
x:Name="txtUser">
</Entry>
</Frame>
</StackLayout>
You seem to be using Grids and StackLayouts somewhat haphazardly.
Your problem indeed comes from trying to left align an element in a vertical StackLayout. Simply having this in an horizontal StackLayout should fix your problem.
<StackLayout>
<StackLayout HorizontalOptions="Center"
WidthRequest="{OnPlatform iOS=300,Android=300}"
Orientation="Horizontal">
<Image Grid.Column="1"
Source="userImage.png"/>
<Label Text="Usuario"
FontSize="{OnPlatform Android=13}"
TextColor="Black" />
</StackLayout>
<Frame HasShadow="{OnPlatform Android=true, iOS=false}"
Padding="{OnPlatform Android=6,iOS=0}"
CornerRadius="{OnPlatform Android=7}">
<Entry Placeholder="Usuario"
ClearButtonVisibility="WhileEditing"
MaxLength="25"
FontSize="{OnPlatform Android=15,iOS=16}"
TextColor="Blue"
x:Name="txtUser" />
</Frame>
</StackLayout>
Watch out when you are defining a "Grid.Row" or a "Grid.Column" in a xaml element that is not directly "underneath" your Grid. In your example, assigning a grid column to your image element does not work since it is a child of the StackLayout and not the Grid. This will not assign the element to any of the grid's row or column since it is not a child of it. You can look into Xamarin's Grid Control documentation for more information.
I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help
You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q
I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?
As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.
I am getting the following error when I try to call the expander control in Xamarin forms:
Xamarin.Forms.WeakEventManager..ctor()' is inaccessible from method Xamarin.CommunityToolkit.UI.Views.Expander..ctor()''
I have installed the Xamarin Community Toolkit nuget package and I'm referencing the namespace in my XAML file.
Control wise, I don't think I'm doing anything too crazy - does anybody know how I resolve this error?
My code is as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
xmlns:Services="clr-namespace:My_App.Services"
xmlns:ViewModel="clr-namespace:My_App.ViewModels"
x:Class="My_App.Views.MyPage"
NavigationPage.HasNavigationBar="false"
ControlTemplate="{StaticResource ContentPageTemplate}"
>
.
.
.
<xct:Expander HorizontalOptions="FillAndExpand"
Margin="{StaticResource UniversalMargin}"
BackgroundColor="Gray">
<xct:Expander.Header>
<StackLayout Orientation="Horizontal" Margin="{StaticResource UniversalMargin}">
<Label HorizontalOptions="StartAndExpand"
VerticalOptions="CenterAndExpand"
Text="{Binding Name, Converter={Services:NullToUnnamedDeviceConverter}}" FontSize="Medium" TextColor="White" />
<Label HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand"
Text="{Binding BondState, Converter={Services:BondedStateToStringConverter}}" FontSize="Medium" TextColor="{StaticResource DarkBorder}" />
</StackLayout>
</xct:Expander.Header>
<xct:Expander.Content>
<Grid HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "*" />
<ColumnDefinition Width = "*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Info text goes here"
TextColor="White"
FontSize="Medium"/>
</Grid>
</xct:Expander.Content>
</xct:Expander>
Solution:
Update Xamarin forms from version 4.8 to 5.0 could solve this issue.
I'm trying to put a label inside of my image, I couldn't use a Margin property, because some reason it's not working, untill now I have this :
And what I want is this :
XAML :
<StackLayout Orientation="Vertical">
<Label HorizontalOptions="Center" Text="something" TextColor="Black"/>
<Image HorizontalOptions="Center" Source="spin.png"/>
</StackLayout>
You need a Grid instead of a StackLayout (notice how both the Label and the Image are in the same row and column):
<Grid HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image HorizontalOptions="Center"
Source="spin.png"
Grid.Row="0"
Grid.Column="0"/>
<Label HorizontalOptions="Center"
Text="something"
TextColor="Black"
Grid.Row="0"
Grid.Column="0"/>
</Grid>
Because the Label is listed beneath the Image in the XAML code above, the Label will be drawn on top of the Image.
You also could have used an AbsoluteLayout, which is another layout that is good at layering things.