Lets say I've created a custom component and want to place it inside AbsoluteLayout of parent component. So basically I would do something like this:
<AbsoluteLayout>
<custom-component></custom-component>
</AbsoluteLayout>
But what if I want to adjust a position of the custom component and use AbsoluteLayout's top and left attributes on the child? The problem is that I can't put this attributes directly on custom child tag. The only solution I found is to wrap custom component with StackLayout:
<AbsoluteLayout>
<StackLayout top="50">
<custom-component></custom-component>
</StackLayout>
</AbsoluteLayout>
So my question is how can I position custom child without adding additional wrapper layout and make code like below work:
<AbsoluteLayout>
<custom-component top="50"></custom-component>
</AbsoluteLayout>
Should I make any changes to my child component? Or maybe it's not possible to get rid of wrapper layout at all?
Related
I want normal cancel functionality on cancel button click of sfdatepicker footer, I am trying to achieve it by binding command but it is not working. Could any one suggest me any solution for that ?
You can use code like below:
<datePicker:SfDatePicker.FooterView>
<Grid>
<Button Text="Ok"
x:Name="footerViewButton"
Clicked="footerViewButton_Clicked"/>
</Grid>
</datePicker:SfDatePicker.FooterView>
Created in this way, and then create the corresponding method in the ViewModel to achieve logical operations.
In Xamarin.Forms 3.5 Microsoft introduced us to bindable layouts which can be used to dynamically fill layouts (e.g. StackLayout, Grid, etc.).
To use this in a grid with a single column is pretty straightforward:
<Grid BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding MyProperty}"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
Now my question is how this can be used to populate a grid with more than one column due to the fact that DataTemplate only allows one view as content. Sure I could but another Grid in it but this would totally nullify the value of bindable layout in a Grid.
Now my question is how this can be used to populate a grid with more than one column due to the fact that DataTemplate only allows one view as content.
From Bindable Layouts, we can see:
While it's technically possible to attach a bindable layout to any layout class that derives from the Layout class, it's not always practical to do so, particularly for the AbsoluteLayout, Grid, and RelativeLayout classes. For example, consider the scenario of wanting to display a collection of data in a Grid using a bindable layout, where each item in the collection is an object containing multiple properties. Each row in the Grid should display an object from the collection, with each column in the Grid displaying one of the object's properties. Because the DataTemplate for the bindable layout can only contain a single object, it's necessary for that object to be a layout class containing multiple views that each display one of the object's properties in a specific Grid column. While this scenario can be realised with bindable layouts, it results in a parent Grid containing a child Grid for each item in the bound collection, which is a highly inefficient and problematic use of the Grid layout.
If you still want to more column, I suggest you can use StackLayout, it can also meet your requirement.
<StackLayout BindableLayout.ItemsSource="{Binding persons}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding name}" />
<Label Text="{Binding age}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Checking this issue, seems that what you are trying to accomplish can't be done with a Bindable Layout using a Grid as a Element.
The documentation isn't as clear as it should, nevertheless.
You can subscribe to BindingContextChanged event and configure then all the items. You have to configure the grid definitions programatically after the event.
is there anyway to customize the search-bar element that NativeScript provides ?
and add some buttons in it.
am trying to get something like this (the search-bar in this app)
I've been searching a bit but found nothing about it.
Basic demo here: https://play.nativescript.org/?template=play-vue&id=y6iFw9
You can always hide default action bar with actionBarHidden="true on your <page> element and then create your own action bar. In this case you can use GridLayout and put each element in its own column. Something like:
<Page actionBarHidden="true>
<StackLayout>
<GridLayout rows="auto columns="auto, *, auto, auto, auto>
<Label col="0 text="Menu"/>
<TextField col="1></TextField>
<Label col="2 text="icon1"/>
<Label col="3 text="icon2"/>
<Label col="4 text="icon3"/>
</GridLayout>
</StackLayout>
</Page>
Just replace labels with your icons, and add #tap="yourFunction to fire when icon is pressed. To turn labels into icons you can use package like Fonticon.
The search-bar from tns-core-modules doesn't provide what you're looking for (see the API at https://docs.nativescript.org/api-reference/modules/_ui_search_bar_). I'd recommend to implement the component yourself.
I have a grid where there are 3 columns containing 2 buttons and 1 label. What I want is to add a Tap gesture to each rows in the grid. I want the click event to be fired when the user taps anywhere in the grid row. Is there any way to do this?
I want to keep my layout as simple as possible. Before I was creating the same grid using multiple stacklayouts and adding gestures to the parent stacklayout. But for performance I want to do this using a grid view.
I would suggest adding a ContentView (which is not as intensive as a StackLayout). Make it cover the whole row and add the GestureRecognizer to that, like so:
<ContentView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped"/>
</ContentView.GestureRecognizers>
</ContentView>
Greeting,
I'm developing an apps for Windows Phone 8.1 and face some problem with ListView.
I wanted to place a button for the FIRST item in ListView, but it seem like I can't align center the button.
Below is the code I use currently:
<ListView>
<Button Content="Jio!" Height="6" Width="362"/>
<ListViewItem Content="ListViewItem"/>
</ListView>
Adding horizontalalignment='center' just wont work for the button.
The reason I want to do this is because I wanted the button to scroll together with the list, hence I'm placing it inside the ListView.
Please advice what can I do to achieve my purpose, thanks!
I recommend using the ListView.Header content to place such a button instead of adding it as a child directly.
<ListView>
<ListView.Header>
<Button ... HorizontalAlignment="Center" />
</ListView.Header>
</ListView>
By default, the ListViewItems are left-aligned. You will eventually have to replace their Template in order to center-align it (HeaderTemplate Property).