I want to know what would be a XAML windows phone "Border" to Xamarin Forms? there's no Border to use BorderThickness, i want to draw some "lines" and set inside of 5 row's.Thanks
XAML Windows Phone :
<Border Grid.Row="0" BorderThickness="0,0,0,2" BorderBrush="#fe98fe"/>
I found a Frame on xamarin it does almost the same thing as Border but is not looking good for me!
If you just want to draw a Line, you can use the BoxView https://developer.xamarin.com/api/type/Xamarin.Forms.BoxView/
Example for a horizontal line with height 2:
<BoxView Color="Red" HeightRequest="2" HorizontalOptions="FillAndExpand"></BoxView>
But there is currently no feature complete counterpart for Border.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand"></BoxView>
<BoxView Grid.Row="1" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand"></BoxView>
<BoxView Grid.Row="2" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand"></BoxView>
<BoxView Grid.Row="3" BackgroundColor="Red" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand"></BoxView>
</Grid>
I wouldn't do the same way as the accepted answer suggest.
The best thing to do (IMHO) is either to use a Frame or a Grid/StackLayout/AnyContainerHere.
Here is what I would do
<Grid BackgroundColor="YourBorderColorHere" Padding="YourBorderWidthValueWhichIsNotOfTypeThickness">
<YourContentHere [BackgroundColor="YourInnerBackgroundHere"]/>
<!-- If you don't have a content to set, use a BoxView with a different color (your background color)-->
</Grid>
This would do the same with less control, less rendering stuff so better perf.
If you want corner radius do the same thing with a Frame.
If the author didn't like the Frame appearance, he should had try to set on its Frame a CornerRadius to 0 and HasShadow to False.
The less control and content to render, the better !
I like to quote Van der Rohe : "Less is more"
If you just want to draw a Line (Border with Thickness = 0,0,0,2), use a BoxView.
Related
I am trying to achieve a layout that sits on top of all the other content views. And even when you navigate away from the current ContentView have the main layout remain on its position. I tried achieving this simply by showing a content view on top not in full screen, but even when I set a height property to the ContentView it will always display full screen.
So I decided to make three grids, two of which transparent and one with a solid background color.
Using the PopUp Plugin, this seemed to worked, however now you cannot click anything on the underlying content page because the transparent grid is still blocking the click.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="Transparent">
</Grid>
<Grid Grid.Row="1" BackgroundColor="Green">
</Grid>
<Grid Grid.Row="2" BackgroundColor="Transparent">
</Grid>
</Grid>
How would I go on about this?
I am fine with using a third party library.
Using the RG PopUp PlugIn this is achievable like so:
<pages:PopupPage
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns="http://xamarin.com/schemas/2014/forms"
HeightRequest="200"
BackgroundColor="#00000000"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
mc:Ignorable="d"
InputTransparent="True"
x:Class="InteriorCircle.Pages.PopUps.PopUp_FloatingInfo">
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<!-- takes whole page, so upper and lower grid are just to leave parts transparent-->
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="Transparent" InputTransparent="true" >
</Grid>
<Grid Grid.Row="1" BackgroundColor="Transparent">
<BoxView BackgroundColor="White" CornerRadius="20"/>
</Grid>
</Grid>
</pages:PopupPage>
this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.
An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:
I'm learning Xamarin and I want to display an image as background with some texto over this image...
Just that, I manage to acomplish, but the text is displayed at the top left corner of the image.
I'd like the text to be placed at the vertical center of the image, but stick to the left side of it.
My code so far XAML:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*" ></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<RelativeLayout Grid.Row="0">
<Image Source="login.png" Aspect="Fill" />
<Label Text="Bem vindo" TextColor="White" FontSize="22"></Label>
</RelativeLayout>
<Label Grid.Row="1" Text="linha 2" BackgroundColor="Coral"></Label>
<Button Grid.Row="2" Text="linha 3" BackgroundColor="DarkRed"></Button>
</Grid>
I've tried verticalOptions and such, but with no effect.
One thing that kind of worked is settin a Maring property to the label, but that way, the label would be centered only to the device I'm testing on. Other devices, smaller or greater, the label could (and probably would) be placed at the wrong place.
Any help?
You don't need a RelativeLayout inside the Grid. The Grid itself already is able to handle views overlay besides let your code clearer.
It may works:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*"></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="login.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="Fill" />
<Label Grid.Row="0" Grid.Column="0"
Text="Bem vindo"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="22"/>
<Label Grid.Row="1"
Text="linha 2"
BackgroundColor="Coral"/>
<Button Grid.Row="2"
Text="linha 3"
BackgroundColor="DarkRed"/>
</Grid>
Trying to produce a Xamarin.Forms page across all devices (iOS, Android, UWP) but need the contents to be displayed as card views side-by-side like the example below.
What is the best way to achieve this? Is there any OSS library out there since I can't seem to find anything like this out-of-the-box?
EDIT: Unfortunately I forgot to mention that this is to be bindable to an Ienumerable source. Number of items is not fixed. Contents inside each card will have the same template only from different items.
Thanks
Things have moved on since the question was first asked. You can now use a CollectionView with a GridItemsLayout with a span of 2 to achieve the layout required.: Link to Xamarin Forms CollectionView documentation
So as i understood from your comments what u need to do is a Grid within a ScrollView. Here is an exmaple;
<ScrollView Orientation="Vertical">
<Grid RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="AUTO"/>
<ColumnDefinition Width="AUTO"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0">
<!--DO YOUR DESIGN FOR FRAME No. 1 HERE-->
</Frame>
<Frame Grid.Row="1" Grid.Column="0">
<!--DO YOUR DESIGN FOR FRAME No. 2 HERE-->
</Frame>
<Frame Grid.Row="2" Grid.Column="0">
<!--DO YOUR DESIGN FOR FRAME No. 3 HERE-->
</Frame>
<Frame Grid.Row="3" Grid.Column="0">
<!--DO YOUR DESIGN FOR FRAME No. 4 HERE-->
</Frame>
<Frame Grid.Row="0" Grid.Column="1">
<!--DO YOUR DESIGN FOR FRAME No. 5 HERE-->
</Frame>
<Frame Grid.Row="1" Grid.Column="1">
<!--DO YOUR DESIGN FOR FRAME No. 6 HERE-->
</Frame>
<Frame Grid.Row="2" Grid.Column="1">
<!--DO YOUR DESIGN FOR FRAME No. 7 HERE-->
</Frame>
<Frame Grid.Row="3" Grid.Column="1">
<!--DO YOUR DESIGN FOR FRAME No. 8 HERE-->
</Frame>
</Grid>
</ScrollView>
What i would truly suggest though is to search for a library that would give you the possibility to do it in ListView. This way you will reduce your hardcoded design code and obtain better and easier access to your layout.
You can use the following library which is a ListView derivative with flowing, grid-like columns support.
https://github.com/daniel-luberda/DLToolkit.Forms.Controls
I've a problem. I've a textblock and my text is cropped. It seems to appear only when the text is too long cause when the text is shorter, there is no problem.
So there is my code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="447*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding TheContent.PathPicture}" />
<ScrollViewer Grid.Row="1">
<Grid>
<TextBlock Text="{Binding TheContent.Text}" TextWrapping="Wrap" FontSize="24" />
</Grid>
</ScrollViewer>
</Grid>
Text is croping like this :
Is the only solution to summary my content ?
The depth of a single textblock is limited to about 2000 pixels on WP7. You need to divide up your text into multiple blocks to display it all.
Controls are limited to 2k square, but there's a fairly straight forward resolution in breaking your text up and presenting the blocks in a stackpanel and wrapping that in a ScrollViewer.
Alex Yakhnin demonstrates here.
Creating Scrollable TextBlock for WP7.