I have a grid that contains many collection views with horizontal scrolling. I want to add vertical scroll because later views can not see. How Can I design? Which controls should I use for it?
You could put the Grid in a ScrollView
<ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid>
//...
</Grid>
</ScrollView>
contains many collection
In addition, If the content of Grid is similar , you could also put them in a ListView .
Related
I am using flowlistview with these properties:
<flv:FlowListView
Grid.Row="1"
BackgroundColor="Transparent"
Scrolled="listview_allAds_Scrolled"
VerticalOptions="Fill"
FlowIsLoadingInfinite="False"
FlowItemAppearing="listview_allAds_FlowItemAppearing"
FlowIsLoadingInfiniteEnabled="False"
Refreshing="listview_allAds_Refreshing"
FlowColumnCount="2"
IsPullToRefreshEnabled="True"
Margin="5,0,5,0"
VerticalScrollBarVisibility="Never"
FlowItemTapped="listview_allAds_FlowItemTapped"
HasUnevenRows="True"
x:Name="listview_allAds" >
This displays 2 items next to one another with the layout defined in my datatemplate.
But every now and so often I need to display an item that goes all the way across the screen and isnt in the same layout as the data template selector like so:
How can I achieve that?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackStuff.MainPage">
<StackLayout Orientation="Vertical">
<Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</StackLayout>
</ContentPage>
I have a Xamarin.Forms project where I want an image to resize inside a StackLayout. I stripped it down to the minimal code above and if I resize the window, the image will only resize based off the window width. i.e. the image gets clipped off the bottom of the window if I change the height.
If I change the StackLayout's Orientation to Horizontal, I get the opposite - it'll resize based off a changing height, but not width.
If I completely remove the StackLayout and have only the image on the page, then the entire image will always be visible which is the behaviour I expected when it's inside the StackLayout.
Can anyone explain why this is? If I replace the Image with a BoxView, it'll happily resize and stay within the bounds of the StackLayout.
Thanks.
I solved this by wrapping the image in a grid:
<StackLayouenter code heret Orientation="Vertical">
<Grid>
<Image Source="image.jpg" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</Grid>
</StackLayout>
I have no idea why it works but I guess that's Xamarin.Forms for you.
I have an app that uses the new Shell in Xamarin.Forms. I added the following code to one of my pages in an attempt to use the TitleView area to display my app header image centered. (FYI - I have tried Center for both of the alignment options and it made no difference.)
<Shell.TitleView>
<Image Source="UCIApp.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
</Shell.TitleView>
What I get after doing this is the image in the title bar but centered in the space the excludes the hamburger button on the left as shown below:
What I would prefer is it centered regardless of the space the hamburger menu takes up looking something like this:
Any suggestions?
ALSO - Putting the image in the TitleView is causing it to be shrunk down. Is there any way to avoid that?
Yes, design fail and there is no option customization. I prefer Grid for like this problems. You can use column or row with percentage.
Default place.
<Shell.TitleView>
<Grid>
<ffimageloadingsvg:SvgCachedImage
Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
Margin="10"/>
</Grid>
</Shell.TitleView>
In this example 4/5 unit first column and 1/5 unit second column (* sign presents percentage or divide).
<Shell.TitleView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Yellow"/>
<BoxView Grid.Column="1" BackgroundColor="LightGoldenrodYellow"/>
</Grid>
</Shell.TitleView>
Then add image text or control to prefered layout (image control default column is 0).
<Shell.TitleView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ffimageloadingsvg:SvgCachedImage
Source="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"
Margin="10"/>
</Grid>
</Shell.TitleView>
Edit: Add min height to grid or image control for prevent resize content. Also ffimageloadingsvg is third party package for loading svg files.
I think that's the designed problem about Shell Title View ,you can submit it as a
feature request in GitHub here .
What I would prefer is it centered regardless of the space the hamburger menu takes up looking something like this: ... Any suggestions?
The title view already been placed center in Title View . However , it looks like not center in the whole Navigation Bar . Have a look at follow code and effect .
<Shell.TitleView>
<StackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
BackgroundColor="Accent">
<Image Source="xamarin_logo.png"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</Shell.TitleView>
The effect :
You can see that the content of Title View , And the icon already been center in Title View .Because of existing meun icon , the weight of Title View is not equal with Navigation Bar .
Putting the image in the TitleView is causing it to be shrunk down
Refer to above effect , you can see that The size of the icon is adapted to the Title View display, and you can see the size of the Title View, so your icon is unlikely to exceed the display range of the Title View.
I'm using trial version of syncfusion for testing.
I'm tring to use comboBox in an stackLayout but it won't show. as long as it fill the whole line it works but when i try to use it in an stacklayout it stop showing.
what should i do to use comboBox within an horizontal stacklayout?
this is my xaml code
<StackLayout Orientation="Horizontal">
<Button Text="T"/>
<comboBox:SfComboBox />
</StackLayout>
You need to specify a height request, so it will "reserve space" for displaying the ComboBox.
Check this example, you can change the value of HeightRequest according to your needs.
<combobox:SfComboBox HeightRequest="40" x:Name="comboBox"/>
I am trying to resize an ActivityIndicator (in Xamarin.Forms), but the Scale property does not work and the HeightRequest just crops the ActivityIndicator.
<StackLayout>
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" HeightRequest="20" IsRunning="True" />
</StackLayout>
This is the result.
Any suggestions on what I might be doing wrong?
It seems sizing itself is not supported on the ActivityIndicator. In this case, scaling is your friend.
The cutting-off you see happening is because the ActivityIndicator is inside a StackLayout. Because of how a StackLayout works, it will only take up the space it needs. Since scaling doesn't necessarily make your ActivityIndicator bigger, you have two options:
Replace your StackLayout with a Grid
Give your ActivityIndicator a WidthRequest and HeightRequest that is big enough to keep your scaled ActivityIndicator
Note: Talking about iOS here. Width and height seem to work on Android
Remove HeightRequest="20", it blocks your scale property.
Code should look like this
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" Scale="2" IsRunning="True" />
Now, you can scale to whatever size you want.