I have played around with various solutions to make my scrollviews actually scroll. I have this box with items inside it:
However everything I have tried doesnt make the box actually scroll. This is my scrollview code:
<ScrollView Orientation="Vertical" Scrolled="OnScrollViewScrolled">
<StackLayout HeightRequest="260" Orientation="Vertical">
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
</StackLayout>
</ScrollView>
I even tried adding this code:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
Could the FlexLayout container for all my frontend be causing this issue?
Can anyone pick up on what I'm missing?
Related
As per the title, i have a label inside a frame, both set to fill and expand and its inside a Grid, wanted to know if its possible to expand automatically when the content of the label text goes to the next line
<Frame Grid.Row="1"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Margin="15,25,15,10"
CornerRadius="25"
Padding="10"
HasShadow="False"
BorderColor="Transparent"
BackgroundColor="White">
<Label x:Name="QuestionLabel"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
LineBreakMode="WordWrap"
Style="{x:StaticResource LabelTitleBold}"
Text="{Binding Question}"
TextColor="{x:StaticResource Primary}"/>
</Frame>
This is what i've done, any inputs would be deeply appreciated
Thanks
What you need to do is try setting the height of Row in RowDefinition of the Grid to Auto. This might help.
<RowDefinition Height="auto" />
Let me know
So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :
https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d
that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?
If you are not adverse to xaml, this is how I handle it.
<FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
and the template implements the touch gesture, and passes the object as the Command Parameter;
<ContentView.Content>
<StackLayout Padding="20,8" HorizontalOptions="Center">
<Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>
I am totally new to xamarin,
Following is my code :
<ListView x:Name="boxActivitiesList" ItemTapped="boxActivitiesList_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="25" VerticalOptions="Start" HorizontalOptions="Start">
<Label Text="{Binding Box}" TextColor="BlueViolet" FontSize="16" FontAttributes="Bold" LineBreakMode="TailTruncation" />
<TableView IsVisible="{Binding IsVisible}" Intent="Settings" HasUnevenRows="True" BackgroundColor="White">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="15,0">
<Label HorizontalOptions="Fill" Text="Remarks" VerticalOptions="Center" TextColor="Black"></Label>
<Editor x:Name="txtRemarks" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Button x:Name="btnSave" Text="Save" Clicked="btnSave_Clicked" CommandParameter="{Binding BoxId}" IsVisible="{Binding IsVisible}"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I click on Editor, Keyboard does not show. Can you please tell me what I am doing wrong.
I'm not sure why the Editor is not working in the Table, however i would reconsider this design and just use a Grid to realize a more complex layout inside your parent ViewCell.
Although there should be nothing wrong with the way you have it, it does seem to be overly complicating things with more nested controls when its not really needed. Ergo, the nested table should really just be a layout like Grid or StackPanel
Lastly, Xamarin.Forms can be a little fickle at the best of times with the various devices it supports. so its best to keep things as simple as possible
I am using Xamarin.Forms to build my app. In the Login Page, I have the following layout
<ScrollView>
<Grid
RowSpacing="{StaticResource MediumSpacing}"
ColumnSpacing="{StaticResource MediumSpacing}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Two stackLayouts-->
<!--StackLayout 1-->
<StackLayout Spacing="0" Padding="0">
<!--Three stacklouts here-->
<!--First-->
<StackLayout>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="12" iOS="30" WinPhone="12"/>
</StackLayout.Spacing>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,24,32,24" iOS="16,24,16,24" WinPhone="32,24"/>
</StackLayout.Padding>
<imagecircle:CircleImage
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="95" HeightRequest="95"
BorderColor="{StaticResource Primary}"
Aspect="AspectFill"
x:Name="CircleImageAvatar"/>
<Label HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
StyleId="LoginPageIdentifier"
LineBreakMode="WordWrap"
FontSize="Large"
TextColor="{DynamicResource DetailTextColor}"
Text="Single Sign On">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" Android="15" iOS="15" WinPhone="15"/>
</Label.FontSize>
</Label>
</StackLayout>
<!--Second Stack Layout-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,0" iOS="32,0" WinPhone="32,0"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="0" iOS="15" WinPhone="10"/>
</StackLayout.Spacing>
<toolkit:EntryLine
Text="{Binding Email}"
Keyboard="Email"
HorizontalOptions="FillAndExpand"
Placeholder="Email Address"
x:Name="EntryEmail"
StyleId="EmailTextField"
BorderColor="#ECECEC">
<toolkit:EntryLine.HorizontalTextAlignment>
<OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
</toolkit:EntryLine.HorizontalTextAlignment>
</toolkit:EntryLine>
<toolkit:EntryLine
Text="{Binding NamespaceUri}"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Placeholder="Namespace"
StyleId="EmailTextField"
Keyboard="Text"
BorderColor="#ECECEC">
<toolkit:EntryLine.HorizontalTextAlignment>
<OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
</toolkit:EntryLine.HorizontalTextAlignment>
</toolkit:EntryLine>
</StackLayout>
<!--Third Stack Layout-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,16,32,0" iOS="32,25,32,0" WinPhone="32,16,32,0"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="0" iOS="16" WinPhone="10"/>
</StackLayout.Spacing>
<Button
Text="Sign In"
Command="{Binding LoginCommandSso}"
HorizontalOptions="FillAndExpand"
StyleId="SignInButton"
TextColor="White"
BackgroundColor="{StaticResource Primary}">
<Button.FontAttributes>
<OnPlatform x:TypeArguments="FontAttributes" iOS="Bold"/>
</Button.FontAttributes>
</Button>
</StackLayout>
</StackLayout>
<!--StackLayout 2-->
<!--Contains activity indicator and Corresponding label-->
<AbsoluteLayout>
<StackLayout
Grid.Row="1"
Padding="16,0"
VerticalOptions="Center"
Orientation="Horizontal"
HorizontalOptions="Center"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
IsVisible="{Binding IsBusy}">
<ActivityIndicator IsRunning="{Binding IsBusy}">
<ActivityIndicator.Color>
<OnPlatform x:TypeArguments="Color" Android="{StaticResource Primary}"/>
</ActivityIndicator.Color>
</ActivityIndicator>
<Label Text="{Binding Message}" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</AbsoluteLayout>
<!--Stack Layout 3-->
</Grid>
</ScrollView>
When run on Android Emulator I can input text in "EntryLine" and everything seems to work fine.
However, when I am trying to run it on IOS simulator, the text becomes ineditable i.e. readonly. Basically on IOS simulator everything inside StackLayout is becoming "ReadOnly"
I also tried using forms "Entry" instead of FormsToolKit.EntryLine, but no result.
I am facing an issue in above code itself, adding just a "Entry" in xaml and testing on IOS simulator works fine.
Have already asked the same question on Xamarin Forums, but haven't found any answer.
EDIT 1 - Added the complete stack layout.
Using -
Visual Studio 2017, Windows 10, Xamarin - 2.3.4.247
FormsToolKit - 1.1.18 IOS - MacBook Air 10.3
Your <AbsoluteLayout> overlaps your content and catches all input events. You'll have to try setting its IsVisible Property to false (or the InputTransparent property to try). At least as long as the Activity Indicator is not running.
(If that is not working you might try to handle it with an effect (or a custom renderer) that sets input transparancy on iOS specifically)
(You might also consider not placing it inside the scroll view, since it would get scrolled away eventually)
How do I make use of the Tapped action in the ViewCell to navigate to other page?
Xmal codes
<TableView Intent="Settings" HasUnevenRows="true" VerticalOptions="StartAndExpand" BackgroundColor="White" >
<TableRoot>
<TableSection>
<ViewCell Height="100" Tapped="OnProfileClicked">
<ViewCell.View>
<StackLayout Orientation="Horizontal" Padding="5,2,5,2" BackgroundColor="White" >
<Image x:Name="ImgProfile" HeightRequest="100"/>
<Label x:Name="btnName" VerticalOptions="Center" TextColor="Black" FontSize="20"/>
<Label Text="> " FontSize="15" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
CS File
public void onProfileTapped()
{
Navigation.PushAsync(new Clubs());
}
so there are a couple things that are wrong with your code.
1.) You wrote Tapped=OnProfileClicked but the method you actually made is called onProfileTapped(), this is a mismatch
2.) The parameters for your item tapped event are wrong, most Xamarin events contain a sender and eventArgs.
Here's how you can fix your code to make it work:
void OnProfileClicked (object sender, System.EventArgs e) { //your code}
Also, tip, when you push a page using Navigation. You might want mark the method as async and await the action to make sure it's a smooth transition.