Currently with ListView's I've only found that you can create a template for cells, which makes each cell look exactly the same. You can't have multiple custom cells in the listview. There are work-arounds like hiding the content in the cell depending on the content, but this seems pretty hacky.
The reason I want to use a listview over a tableview is because we plan on doing inserts, deletions, dynamically showing certain cells, and listview's can be binded to a data source.
Create your own ViewCell which overrides binding context change method. When the binding changes set the ViewCell's view to one that matches the type of view model and also set the height of the cell. Below is a quick sample that should give you an idea how to accomplish it.
public class DataTemplateCell1 : ViewCell
{
protected override void OnBindingContextChanged()
{
var vm1 = this.BindingContext as ViewModel1;
if (vm1 != null)
{
this.View = new View1() { HeightRequest = 40 };
this.Height = this.View.HeightRequest;
return;
}
var vm2 = this.BindingContext as ViewModel2;
if (vm2 != null)
{
this.View = new View2() { HeightRequest = 80 };
this.Height = this.View.HeightRequest;
return;
}
base.OnBindingContextChanged();
}
}
Related
Our Xamarin.Forms app works online and offline by downloading an original database to the cell phone and then syncing the SQLite database with the online database.
Our users need a way to see if they are online and if the changes they made got uploaded to the online database. What I try to achieve is to show the sync status at the top of every ContentPage, so the users can see this information all the time while working with the app.
What I tried is this: create a class "SyncInfoContentPage" that inherits from ContentPage. All ContentPages I already wrote will now not inherit from ContentPage anymore but from SyncInfoContentPage.
The SyncInfoContentPage automatically takes its Content and replaces it with a new Stacklayout that includes the SyncInfo and the original content. By doing this I don't have to rewrite the 77 ContentPages we already have.
This code works fine on Android, but on iOS the SyncInfo is not visible and (even worse) my ContentPages that inherit from SyncInfoContentPage do not react to anything anymore.
Here is my code:
public class SyncInfoContentPage : ContentPage
{
private readonly Frame SyncInfo;
public SyncInfoContentPage()
{
SyncInfo = BuildSyncInfo(); //Creates the frame with the sync Information
PropertyChanged += SyncInfoContentPage_PropertyChanged;
}
private void SyncInfoContentPage_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
// Add the SyncInfo Frame on top of the Content when the Content gets changed
if (e.PropertyName.Equals("Content"))
{
bool change = false;
// If the content already is a StackLayout, check if the SyncInfo already got added, so that theres no infinite loop.
if (Content is StackLayout)
{
var check = Content as StackLayout;
if (!check.Children.Contains(SyncInfo))
{
change = true;
}
}
else // if the Content is no StackLayout, the SyncInfo Frame can't be inside the Content yet
{
change = true;
}
if (change)
{
var layout = Content; // This is a reference, probably the error?
Device.BeginInvokeOnMainThread(() =>
{
Content = new StackLayout
{
Children = { SyncInfo, layout }
};
});
}
}
}
}
The problem is probably that iOS doesn't like this part:
var layout = Content;
Content = new StackLayout { Children = { SyncInfo, layout } };
Thanks in advance for your help and any suggestions :-)
I got it to work. The solution is simple but strange. You have to add the original Content after you added the SyncInfo status bar.
var layoutOld = Content;
var layoutNew = new StackLayout
{
Children = { SyncInfo }
};
Content = layoutNew;
layoutNeu.Children.Add(layoutOld);
Now before anyone ignores this as a duplicate please read till the end. What I want to achieve is this
I've been doing some googling and looking at objective c and swift responses on stackoverflow as well. And this response StackOverFlowPost seemed to point me in the right direction. The author even told me to use ClipsToBounds to clip the subview and ensure it's within the parents bounds. Now here's my problem, if I want to show an image on the right side of the entry(Gender field), I can't because I'm clipping the subview.
For clipping, I'm setting the property IsClippedToBounds="True" in the parent stacklayout for all textboxes.
This is the code I'm using to add the bottom border
Control.BorderStyle = UITextBorderStyle.None;
var myBox = new UIView(new CGRect(0, 40, 1000, 1))
{
BackgroundColor = view.BorderColor.ToUIColor(),
};
Control.AddSubview(myBox);
This is the code I'm using to add an image at the beginning or end of an entry
private void SetImage(ExtendedEntry view)
{
if (!string.IsNullOrEmpty(view.ImageWithin))
{
UIImageView icon = new UIImageView
{
Image = UIImage.FromFile(view.ImageWithin),
Frame = new CGRect(0, -12, view.ImageWidth, view.ImageHeight),
ClipsToBounds = true
};
switch (view.ImagePos)
{
case ImagePosition.Left:
Control.LeftView.AddSubview(icon);
Control.LeftViewMode = UITextFieldViewMode.Always;
break;
case ImagePosition.Right:
Control.RightView.AddSubview(icon);
Control.RightViewMode = UITextFieldViewMode.Always;
break;
}
}
}
After analysing and debugging, I figured out that when OnElementChanged function of the Custom Renderer is called, the control is still not drawn so it doesn't have a size. So I subclassed UITextField like this
public class ExtendedUITextField : UITextField
{
public UIColor BorderColor;
public bool HasBottomBorder;
public override void Draw(CGRect rect)
{
base.Draw(rect);
if (HasBottomBorder)
{
BorderStyle = UITextBorderStyle.None;
var myBox = new UIView(new CGRect(0, 40, Frame.Size.Width, 1))
{
BackgroundColor = BorderColor
};
AddSubview(myBox);
}
}
public void InitInhertedProperties(UITextField baseClassInstance)
{
TextColor = baseClassInstance.TextColor;
}
}
And passed the hasbottomborder and bordercolor parameters like this
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
var view = e.NewElement as ExtendedEntry;
if (view != null && Control != null)
{
if (view.HasBottomBorder)
{
var native = new ExtendedUITextField
{
BorderColor = view.BorderColor.ToUIColor(),
HasBottomBorder = view.HasBottomBorder
};
native.InitInhertedProperties(Control);
SetNativeControl(native);
}
}
But after doing this, now no events fire :(
Can someone please point me in the right direction. I've already built this for Android, but iOS seems to be giving me a problem.
I figured out that when OnElementChanged function of the Custom Renderer is called, the control is still not drawn so it doesn't have a size.
In older versions of Xamarin.Forms and iOS 9, obtaining the control's size within OnElementChanged worked....
You do not need the ExtendedUITextField, to obtain the size of the control, override the Frame in your original renderer:
public override CGRect Frame
{
get
{
return base.Frame;
}
set
{
if (value.Width > 0 && value.Height > 0)
{
// Use the frame size now to update any of your subview/layer sizes, etc...
}
base.Frame = value;
}
}
I added a custom LongPressGestureRecognizer to the ViewCell's root layout to handle certain cases, but after adding it, I find that the ripple effect when tapping the ViewCell is gone on Android. I tried to add back the animation by getting the native view, set background drawable to Android.Resource.Attribute.SelectableItemBackground by using below code
int[] attrs = { Android.Resource.Attribute.SelectableItemBackground };
var ta = CrossCurrentActivity.Current.Activity.ObtainStyledAttributes(attrs);
var drawable = ta.GetDrawable(0);
nativeView.SetBackgroundDrawable(drawable);
ta.Recycle();
Even this doesn't work. Any other way to make it work?
For those who want to know, I discarded the custom long press gesture recognizer way of achieving the goal, since it's the wrong way of doing things. On Android, we should use ItemLongClick event instead. Here is what I did, first, find out the native ListView through some method, my way is to first get the renderer of the ListView, then get underlying ListView. Another way is to use below code to find the ListView, but this way requires more work if you have multiple ListView
public static List<T> FindViews<T>(this ViewGroup viewGroup) where T : View
{
var result = new List<T>();
var count = viewGroup.ChildCount;
for (int i = 0; i < count; i++)
{
var child = viewGroup.GetChildAt(i);
var item = child as T;
if (item != null)
{
result.Add(item);
}
else if (child is ViewGroup)
{
var innerResult = FindViews<T>(child as ViewGroup);
if (innerResult != null)
{
result.AddRange(innerResult);
}
}
}
return result;
}
var rootView =(ViewGroup)CurrentActivity.Window.DecorView.RootView
var nativeListView = rootView.FindView<Android.Widget.ListView>();
Then override the OnAppearing method of the Page, in it, attach ItemLongClick event handler. Also override OnDisappearing method, in it, detach the ItemLongClick event handler. This is important. Simply add ItemLongClick event handler in constructor seems not working.
What I am trying to do is:
I have a scrollview inside my view and it's height is like 2/9 of the parent height. Then user can translate this scrollview to make it bigger. However scrollview's size does not change obviously. So even though it is bigger scrollview's size remains the same, killing the point. I could make it bigger initially. However it won't scroll since the size is big enough not to scroll.
I don't know if was able to explain it right. Hope i did.
Regards.
Edit
-------------
Some code to explain my point further
This is the scrollview
public class TranslatableScrollView : ScrollView
{
public Action TranslateUp { get; set; }
public Action TranslateDown { get; set; }
bool SwipedUp;
public TranslatableScrollView()
{
SwipedUp = false;
Scrolled += async delegate {
if (!SwipedUp && ScrollY > 0) {
TranslateUp.Invoke ();
SwipedUp = true;
} else if (SwipedUp && ScrollY <= 0) {
TranslateDown.Invoke ();
SwipedUp = false;
}
};
}
}
And this is the code in the page
sv_footer = new TranslatableScrollView {
Content = new StackLayout {
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = {
l_details,
l_place
},
}
};
sv_footer.TranslateUp += new Action (async delegate {
Parent.ForceLayout();
await cv_scrollContainer.TranslateTo(0, -transX, aSpeed, easing);
});
sv_footer.TranslateDown += new Action (async delegate {
await cv_scrollContainer.TranslateTo(0, 0, aSpeed, easing);
});
cv_scrollContainer = new ContentView {
Content = sv_footer,
VerticalOptions = LayoutOptions.Fill
};
I put the scrollview inside a contentview otherwise Its scroll indexes becomes 0 when they are translated. Ref: Xamarin Forms: ScrollView returns to begging on TranslateTo
The problem was, translateTo only changes the position of the element. I could use scaleTo after the translation. However it changes the both dimensions. Someone from Xamarin Forums suggested me to use LayoutTo which I did not know existed. With layoutTo you can change both the size and location. Giving an instance of Rectangle type.
I would like to create a layout with a fullscreen background image and some UI elements on top of it. The twist is this:
I would like the background image to swipeable like a carousel, but I would like the UI elements to stay in place. That is if I swipe the screen, the background image should slide to the side and a new image should replace it. I know about CarouselPage, but it seems to me that it won't do the trick, since a Page can have only one child which it replaces on swipe, meaning that the UI elements would be descendants of the CarouselPage and therefore would also be animated.
I am guessing I need some sort of custom renderer here, but how should I go about designing it? Should it be one fullscreen Image control replaced be another fullscreen Image control with the UI elements on top of it? And how can I do this? Or is there an all together better approach?
I am developing for iOS and Android using Xamarin.Forms.
Thanks in advance.
I don't like repeating myself much, and I think that multiple layers of actionable items can lead to confusion, but the problems appeals to me and I can see a niche for this kind of UI, so here's my take on your question.
Let's assume this is the (Xamarin.Forms.)Page you want to render with a custom carousel background:
public class FunkyPage : ContentPage
{
public IList<string> ImagePaths { get; set; }
public FunkyPage ()
{
Content = new StackLayout {
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Spacing = 12,
Children = {
new Label { Text = "Foo" },
new Label { Text = "Bar" },
new Label { Text = "Baz" },
new Label { Text = "Qux" },
}
};
ImagePaths = new List<string> { "red.png", "green.png", "blue.png", "orange.png" };
}
}
The renderer for iOS could look like this:
[assembly: ExportRenderer (typeof (FunkyPage), typeof (FunkyPageRenderer))]
public class FunkyPageRenderer : PageRenderer
{
UIScrollView bgCarousel = new UIScrollView (RectangleF.Empty) {
PagingEnabled = true,
ScrollEnabled=true
};
List<UIImageView> uiimages = new List<UIImageView> ();
protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
foreach (var sub in uiimages)
sub.RemoveFromSuperview ();
uiimages.Clear ();
if (e.NewElement != null) {
var page = e.NewElement as FunkyPage;
foreach (var image in page.ImagePaths) {
var uiimage = new UIImageView (new UIImage (image));
bgCarousel.Add (uiimage);
uiimages.Add (uiimage);
}
}
base.OnElementChanged (e);
}
public override void ViewDidLoad ()
{
Add (bgCarousel);
base.ViewDidLoad ();
}
public override void ViewWillLayoutSubviews ()
{
base.ViewWillLayoutSubviews ();
bgCarousel.Frame = View.Frame;
var origin = 0f;
foreach (var image in uiimages) {
image.Frame = new RectangleF (origin, 0, View.Frame.Width, View.Frame.Height);
origin += View.Frame.Width;
}
bgCarousel.ContentSize = new SizeF (origin, View.Frame.Height);
}
}
This was tested and works. Adding a UIPageControl (the dots) is easy on top of this. Autoscrolling of the background is trivial too.
The process is similar on Android, the overrides are a bit different.