I am using the latest xamarin forms.
I have a requirement that I need to position a frame between 2 rows in a grid.
I could not make it work with absolute layout or flex layout. Below is my simplified attempt with a grid
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="Red" Grid.Row="0">
<Label Text="Add some stuff here"></Label>
</Grid>
<Grid BackgroundColor="Blue" Grid.Row="1">
<Frame BackgroundColor="Green" HeightRequest="100" WidthRequest="100" Margin="20,-150,20,20"></Frame>
</Grid>
</Grid>
This is my UNWANTED RESULT
I cannot seem to set the heighrequest of the frame as it remains big.
What is the best approach to overlay a frame between 2 rows?
thanks
For your layout, you can use AbsoluteLayout in the following manner:
<AbsoluteLayout BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Pink" AbsoluteLayout.LayoutBounds="1,0,1,0.5" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Beige"/>
<Frame AbsoluteLayout.LayoutBounds="0.5,0.5,0.8,0.5" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CornerRadius="20" />
</AbsoluteLayout>
You will get the following design from the above implementation.
Related
I am trying to make the top carouselview fullscreen. However, there is a slight border to the left and to the upper part of the every picture in the carouselview. If I set a background color to the grid, it gets rendered into the corners, but not with the picture. This code works on Android, the problem exists only on iOS. Any Ideas?
<Grid>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="285"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<CarouselView VerticalOptions="Start" Margin="0,0,0,0" HorizontalOptions="Start" Loop="false" x:Name="carouselview" ItemTemplate="{StaticResource templateSelector}" />
</Grid>
The template selector:
<Grid RowSpacing="0" HeightRequest="280">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Grid.GestureRecognizers>
<Image
Source="{Binding fullPic}"
Aspect="Fill"
x:Name="img_pic"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Grid Margin="0,0,4,4"
HorizontalOptions="End"
VerticalOptions="End">
<BoxView
CornerRadius="20"
IsVisible="{Binding isNumberVisible}"
BackgroundColor="#99000000"/>
<Label
Text="{Binding number}"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
FontFamily="Font_11"
TextColor="White"
/>
</Grid>
</Grid>
Adding this to the main grid of the datatemplate of the carouselview fixed the issue:
Margin="-2"
in my XAML I have this grid:
<Grid Grid.Row="12" Grid.Column="1" ColumnSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<!--Label-->
<RowDefinition Height="3*" ></RowDefinition>
<!--ProfilePic-->
<RowDefinition Height="*"></RowDefinition>
<!-- Btn change-->
</Grid.RowDefinitions>
<BoxView BackgroundColor="Purple" Grid.Row="1"></BoxView>
<ImageButton
Grid.Row="2"
x:Name="row_forpic_editProfile"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Label
Grid.Row="0"
FontSize="16"
TextColor="#272727"
VerticalOptions="End"
Text="Proilfbild"
FontFamily="arial"
/>
<Button
Grid.Row="2"
x:Name="btn_changepic_editprofile"
Text="Ändern"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
</Grid>
This is the result of that:
The result
Now, I want to add an imageview into the purple row (which is Grid.Row="1") from code because I downloaded a picture from the internet.
How can I now add my new Image (ImageButton) into this exact row? (row 1)
And also have it maintain its dimensions (only the picture must full the container).
thank you:)
to add a View to a Grid
myGrid.Children.Add(view,col,row);
I created a CustomView to use in CollectionView's DataTemplate
<Frame CornerRadius="10" IsClippedToBounds="True" Padding="0" HasShadow="False" >
<AbsoluteLayout Padding="0" Margin="0">
<Image Source="image1.png" AbsoluteLayout.LayoutBounds="0,0,1,1" Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All"></Image>
<Frame BackgroundColor="#fedb0a" AbsoluteLayout.LayoutBounds="0,0,0.426,0.1177" AbsoluteLayout.LayoutFlags="All" HasShadow="False">
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0.682,0.29,AutoSize,0.05885">
<Label Text="Hi" FontSize="Medium" VerticalOptions="CenterAndExpand"></Label>
</StackLayout>
</Frame>
<StackLayout AbsoluteLayout.LayoutBounds="0,1,1,0.2" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#95000000" Orientation="Horizontal">
<StackLayout VerticalOptions="CenterAndExpand" Margin="5,0,5,0">
<Frame CornerRadius="20" IsClippedToBounds="True" Padding="0">
<Image Source="icon1.png" Aspect="AspectFill" WidthRequest="40" HeightRequest="40"></Image>
</Frame>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="hopeshow~" FontSize="Large" TextColor="#fedb0a"></Label>
<Label Text="2020 year" FontSize="Medium" TextColor="White"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</Frame>
I placed it in my DataTemplate <vi:MyCustomView HeightRequest="40"></vi:MyCustomView> but it seems that the HeightRequest is not sequenced.
the view autosized a large view.
The WidthRequest is ok when I set a value.
How to do with it?
The layout like StackLayout and AbsoluteLayout will not fit the size of its child elements . So if you want to implement it you can use Grid instead of them .
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//set them in the same Row and Column and they will be in the same position .
<Image Source="image1.png" Grid.Row="0" Grid.Column="0"></Image>
<Frame BackgroundColor="#fedb0a" HasShadow="False"Grid.Row="0" Grid.Column="0">
//...
</Frame>
//...other elements
</Grid>
For more details about layout you can check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid
enter image description hereI am not clear what am I missing. Extra space at the bottom of the list. please check the screenshot attached below.
<ListView ItemSelected="ListView_ItemSelected" VerticalOptions="Start" ItemsSource="{Binding RelayList}" SeparatorVisibility="Default" SeparatorColor="Gray" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid BackgroundColor="#E6E6E6" VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Column="0" Padding="10,10,10,0" VerticalOptions="Start">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding RelayName}" TextColor="Black" FontSize="Small" />
<Label Text="{Binding RelayType}" TextColor="Black" FontSize="Small" />
</StackLayout>
</StackLayout>
<Image Grid.Column="1" Source="nextbtn.png" HorizontalOptions="EndAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</StackLayout>
This is happening because you are using a Frame, A Frame has a default Padding of 20.
Which can be confirmed here
So now the there are two things you can do set the Padding to 0 in the Frame so you do not see this spacing(Can be done on L,T,R,B differently using the 4 parameters)
Or you can remove the Frame all together.
I'm trying to create a grid layout with a height of 8px with cornered radius horizontally as below snapshot.
: https://ibb.co/s1dkpnw
<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Frame>
</Grid>
I'm able to get the UI as in the below snapshot.
: https://ibb.co/7nLTgdL
I'm not able to get the UI displyed within the frame visible, although i'm getting a cornered radius for a two columned layout. It just shows a empty frame.
Please let me know how to design the XAML UI to get the UI as in the design snapshot.
Got the UI aligned by pushing the Grid within the frame control as below,
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Grid>
</Frame>
AbsoluteLayout can help you:
<AbsoluteLayout HorizontalOptions="Center">
<Frame
AbsoluteLayout.LayoutBounds="0,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#D8D8D8"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,30,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="1" />
</AbsoluteLayout>
Output: https://i.ibb.co/jh6QmBL/ss.png