MvvmCross: Binding progress bar in iOS - ios

I would like to know how to bind the UIProgressView's Progress property.
Having this in the design:
[Outlet]
MonoTouch.UIKit.UIProgressView ProgressIndicator { get; set; }
I've tried the following:
set.Bind(ProgressIndicator).For(p => p.Progress).To(vm => vm.IosProgress);
set.Bind(ProgressIndicator).For("Progress").To(vm => vm.IosProgress);
In the ViewModel I have:
private float _iosProgress;
public float IosProgress
{
get { return _iosProgress; }
set { _iosProgress = value; RaisePropertyChanged(()=>IosProgress); }
}
UPDATE AS REQUESTED:
- I have an iPhone 4 with iOS7.
- I have tried to bind the IosProgress indicator to a Label, works perfectly, having tested with 3 values, 0.33333, 0,666667 and 1 showing in the label.
I created two screen captures for you.
This is showing the value of the IosProgress indicator during debug with initial value given in constructor as 0.1f, also the debug message.
This is showing the 3 versions I've tried, having the same faulty results, debug message for the current one:
Thank you!

I just tried the SeekView in https://github.com/MvvmCross/MvvmCross-Tutorials/tree/master/ApiExamples with a UIProgressView like:
public override void ViewDidLoad()
{
base.ViewDidLoad();
var label = new UILabel(new RectangleF(10, 100, 100, 30));
label.Text = "Slide me:";
Add(label);
var seek = new UISlider(new RectangleF(110, 100, 200, 30));
seek.MinValue = 0;
seek.MaxValue = 100;
Add(seek);
var pro = new UIProgressView(new RectangleF(110, 130, 200, 30));
Add(pro);
var set = this.CreateBindingSet<SeekView, SeekViewModel>();
set.Bind(seek).To(vm => vm.SeekProperty);
set.Bind(pro).For(v => v.Progress).To("SeekProperty / 100");
set.Apply();
}
This worked exactly as expected on an iOS7 iPhone simulator.
The only problem I had was if the ViewModel property went outside the 0.0f to 1.0f range.

Related

Adding Tag View to Xamarin iOS Application

How to have a tag bubbles like in the attached image.I have done this for android using TagView component but not sure how to do it for Xamarin iOS?Any component that I can refer?
You will have to write this custom component yourself .
I would recommend having this designed in XIB/Storyboard and place em at runtime .
very rough idea to create one such subview programmitically could be something like
var myView = new UIView(frame: new CoreGraphics.CGRect(10, 10, 120, 40));
myView.BackgroundColor = UIColor.Blue;
myView.Layer.CornerRadius = 20;
var mylabel = new UILabel(frame: new CoreGraphics.CGRect(10, 10, 80, 40));
mylabel.Text = "MUMBAI";
myView.Add(mylabel);
UIButton button = new UIButton();
button.Frame = new CoreGraphics.CGRect(mylabel.Frame.X + mylabel.Frame.Width, 10f, 40, 25);
button.SetTitle("Title", UIControlState.Normal);
button.SetBackgroundImage(UIImage.FromBundle("MyImage"),UIControlState.Normal);
myView.Add(button);
View.Add(myView);
Here frame calculation you need to do ,above are just some sample frame I put .
so ultimately you gonna make such views stack em horizontally ,and when user clicks "x" button , you change the frame with animation .
Try this
https://github.com/nmilcoff/TagsView
It's super simple to get started:
public class ViewController : UIViewController
{
private TagListView tagsView;
public override void ViewDidLoad()
{
// code
this.tagsView = new TagListView()
{
// you can customize properties here!
};
this.View.AddSubview(this.tagsView);
this.View.AddConstraints(
// Add your constraints!
);
// you can attach a source object to each tag
var myObject = new MyModel { Title = "I'm a MyModel!" };
this.tagsView.AddTag(myObject.Title, myObject);
// but, if none is provided, it will be the text string
this.tagsView.AddTag("I'm a simple tag!");
}
}

set Height Entry rendered xamarin forms ios

I have need to modify and customize the Entry Control in Xamarin, but I have difficulty setting, or rather to find the method for declaring the height of the control of Xamarin ios.
How can I do ? here is my code.
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace MyApplication.iOS
{
public class MyEntryRenderer : EntryRenderer
{
//CUSTOM entry RENDER IOS
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = UIColor.FromRGB(43, 50, 58);
Control.TextColor = UIColor.FromRGB(255, 255, 255);
//Control.Height ???
}
}
}
}
There's a HeightRequest property on the cross-platform Entry class. Why not set it there and let Xamarin's renderer do the work?
If you want to set it directly in your own renderer try
Control.Frame = new CGRect(0, 0, width, height);
You can set this on PCL/shared side.
public MyEntry()
{
this.HeightRequest = 50;
}

mvvmcross N-06-Books Sample How to change Tableview size after loading?

Stuart's N-06 Books sample is good for getting basic understanding about using MvxSimpleTableViewSource.
[Register("FirstView")]
public class FirstView : MvxViewController
{
public override void ViewDidLoad()
{
View = new UIView(){ BackgroundColor = UIColor.White};
base.ViewDidLoad();
// ios7 layout
if (RespondsToSelector(new Selector("edgesForExtendedLayout")))
EdgesForExtendedLayout = UIRectEdge.None;
var textField = new UITextField(new RectangleF(10, 10, 300, 40));
Add(textField);
var tableView = new UITableView(new RectangleF(0, 50, 320, 500), UITableViewStyle.Plain);
Add(tableView);
tableView.RowHeight = 88;
var source = new MvxSimpleTableViewSource(tableView, BookCell.Key, BookCell.Key);
tableView.Source = source;
var set = this.CreateBindingSet<FirstView, Core.ViewModels.FirstViewModel>();
set.Bind(textField).To(vm => vm.SearchTerm);
set.Bind(source).To(vm => vm.Results);
set.Apply();
tableView.ReloadData();
}
}
But how can resize the tableview's height according it's content once it loads data?
Not entirely sure what you want to do... Normally in an iOS UI, the tableview size is fixed regardless of its content.
However, if you did want to resize the table then you could:
Inherit from MvxTableViewSource or UITableView and provide some logic there
Or add a binding in your class to some View property TableCount, bind that property and then implement the sizing logic there. Something like:
set.Bind(this).For(v => v.TableCount).To(vm => vm.Results.Count);
private int _tableCount
public int TableCount {
get { return _tableCount; }
set {
// implement your sizing animations here (maybe animate constraints?)
}
}
Just to add to Stuart's answer, here is an example for the frame of the table:
int _tableHeight;
public int TableHeight
{
get { return _tableHeight; }
set
{
_tableHeight = value;
_myPlayers.Frame = _tableHeight > 0 ? new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, Dimens.TableRowHeight * _tableHeight) : new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, Dimens.TableRowHeight * BusinessConstants.GetBiggestPositionCount());
_myPlayers.ReloadData();
}
}

Xamarin iOS - Multiple dynamically sized UIWebViews

I'm having an issue asynchronously loading several UIWebViews into one Section. I'm using MonoTouch.Dialog to generate the UI. I am loading data from a blog and showing 10 items which consist of an image plus some HTML text. What's happening is that the posts are not all showing up and the ones that are showing up are out of order. Here's what I'm doing:
public partial class BlogViewController : DialogViewController
{
private Section mainSection;
public BlogViewController () : base (UITableViewStyle.Grouped, null)
{
Root = new RootElement ("");
mainSection = new Section ("");
mainSection.Add(new ActivityElement ());
Root.Add (mainSection);
}
public override void ViewDidLoad()
{
base.ViewDidLoad ();
new Thread (new ThreadStart(PopulateBlog)).Start ();
}
private void PopulateBlog ()
{
var posts = service.GetPosts (currentOffset, 10);
InvokeOnMainThread (delegate {
foreach (var post in posts) {
//grab an appropriate image size
var altSize = post.photos [0].alt_sizes.Where (x => x.width < 401).OrderByDescending(x => x.width).FirstOrDefault ();
if (altSize != null) {
var img = LoadImageFromUri(altSize.url);
//scale the image, not really important
var imageView = new UIImageView (new RectangleF (0, 0, screenWidth, height));
imageView.Image = img;
var content = new UIWebView ();
//When the HTML finishes rendering figure out the size and add it to the section. Apparently can't figure the size ahead of time?
content.LoadFinished += (sender, e) =>
{
var contentHeight = Int32.Parse (content.EvaluateJavascript ("document.getElementById('content').offsetHeight;"));
content.Frame = new RectangleF (0, height + 10, screenWidth, contentHeight + 10);
//dynamically size this view to fit the content
var view = new UIView
(new RectangleF (0, 0,
screenWidth,
height + contentHeight));
view.AddSubview (content);
view.AddSubview (imageView);
//add the view to the Section which is later added to the Root
mainSection.Add(view);
};
var htmlString = #"some HTML here";
content.LoadHtmlString(someHtml);
content.ScrollView.ScrollEnabled = false;
content.ScrollView.Bounces = false;
}
}
});
Root.Reload(mainSection, UITableViewRowAnimation.None);
}
}
I'm guessing that A) the LoadFinished events are not happening in the same order that they are queued up, and that B) The Root.Reload gets called before they all fire. I tried spinning with a Thread.Sleep prior to the Root.Reload but then the LoadFinished events never even get fired.
I also tried putting all of the UIView elements in a Dictionary to be added after they are all populated but it seems like as soon as InvokeOnMainThread ends the LoadFinished event handler never gets called again.
Do you have to use MT.Dialog? I would personal try to use UITableView instead. Load the web view content, determine its size (maybe use sizeThatFits?) and push it to the data source at correct location. Then return the size on the UITableViewDelegate's heightForRowAtIndexPath call. UITableView should take care of the rest.

Can't get UITableView to scroll inside my SlidingPanel

I've got a UITableView located in a View attached to a SlidingPanel.
I'm using SlidingPanels.Lib, and I've got a custom presenter
Here's a gist of the custom presenter
From there my MenuView is really straight forward.
public class MenuView : ViewControllerBase
{
private new MenuViewModel ViewModel { get { return (MenuViewModel)base.ViewModel; } }
public override void ViewDidLoad()
{
base.ViewDidLoad();
// todo: this should actually be...
// _currentBookId = currentUser.UserBooks[0].BookId;
// _homeViewModel.ChapterViewModel = Mvx.Resolve<IChapterService>().FindByBookId(_currentBookId);
ViewModel.Chapters = Mvx.Resolve<IChapterService>().Find();
// this ensures the sliding panel doesn't fill the entire view.
var frame = View.Frame;
frame.Width = 300;
View.Frame = frame;
// var currentUser = Mvx.Resolve<IUserService>().GetById(Mvx.Resolve<UserModel>().Id);
var label = new UILabel(new RectangleF(10, 10, 300, 40))
{
TextColor = UIColor.White,
};
Add(label);
//var listHeight = (chapters.Count*40);
var navigationList = new UITableView(new RectangleF(0, 50, 300, 300))
{
Source = new NavigationTableSource(ViewModel.Chapters)
};
Add(navigationList);
var set = this.CreateBindingSet<MenuView, MenuViewModel>();
set.Bind(label).To(vm => vm.DisplayName);
set.Apply();
}
}
Unfortunately I'm not sure where to look in order to allow the TableView to scroll. I can see it, but it goes beyond the bottom of the screen.
I think the problem is in:
var listHeight = (chapters.Count*40);
Instead of this, try setting the height to the height of the available screen (which depends on which iPhone/iPad you are on). After this, then the list will scroll within that available height.
Took a couple of hours of dicking around to discover that the original source code that I grabbed from #patbonecrusher's Github repo had some differences from the lib that you can find at #fcaico's Github repo
Long story short... all I had to do was compile #fcaico's version and deploy it into my app, and the scrolling came back. Now I realize that #fcaico's repo just contains a submodule to #patbonecrusher's, but for some reason... the recompile fixed the issue. Don't have a lot of time to dig into the reason why.

Resources