I am trying to create a screen in my MonoTouch C# app that lets users search for restaurants. The user can search for restaurants nearby, anywhere, or recently visited. These three options are presented as a segmented control. When a user clicks an item in the segmented control, I toggle the visible views. In other words each option represents its own view.
I want each view to have its own table view controller such that when a user clicks a restaurant, more details are given to the user. From what I can tell, I need to implement the approach shown here: http://www.alexyork.net/blog/post/UINavigationController-with-MonoTouch-Building-a-simple-RSS-reader-Part-1.aspx
My problem is, I can't seem to figure out a way to add a controller to a view. In my scenario, I believe I need to add a UITableViewController to each UIView (one for each segmented control item). Is this possible? If so, how? If it is not possible, how should I go about accomplishing my goal? This seems simple enough, but I seem to be way off and am misunderstanding something. Here is the method I'm calling when the ViewDidLoad event is hit:
private void LoadViews()
{
int subViewHeight = 320;
#region Nearby View
RectangleF nearbyRectangle = new RectangleF(0, 0, UIScreen.MainScreen.Bounds.Width, subViewHeight);
this.nearbyView = new UIView(nearbyRectangle);
this.nearbyView.BackgroundColor = UIColor.Blue;
this.nearbyTableViewController = new NearbyTableViewController(IntPtr.Zero);
this.NavigationController.PushViewController(nearbyTableViewController, false);
this.View.Add(nearbyView);
#endregion Nearby View
#region Elsewhere View
RectangleF elsewhereRectangle = new RectangleF(0, 0, UIScreen.MainScreen.Bounds.Width, subViewHeight);
this.elsewhereView = new UIView(elsewhereRectangle);
this.elsewhereView.Hidden = true;
this.elsewhereView.BackgroundColor = UIColor.Green;
// Add the search text field
UITextField searchElsewhereTextField = new UITextField();
searchElsewhereTextField.BorderStyle = UITextBorderStyle.RoundedRect;
searchElsewhereTextField.Frame = new RectangleF(20, 13, 200, 31);
searchElsewhereTextField.Placeholder = "query";
this.elsewhereView.AddSubview(searchElsewhereTextField);
// Add the search button
UIButton searchButton = UIButton.FromType(UIButtonType.RoundedRect);
searchButton.Frame = new RectangleF((UIScreen.MainScreen.Bounds.Width - 90), 13, 70, 31);
searchButton.SetTitle("Search", UIControlState.Normal);
this.elsewhereView.AddSubview(searchButton);
// Add the results table
this.elsewhereTableView = new UITableView(new RectangleF(0, 52,
UIScreen.MainScreen.Bounds.Width, subViewHeight-70), UITableViewStyle.Plain);
this.elsewhereTableView.Source = new NearbyListDataSource(this);
this.elsewhereView.AddSubview(elsewhereTableView);
this.View.Add(elsewhereView);
#endregion Elsewhere View
#region Recent View
RectangleF recentRectangle = new RectangleF(0, 0, UIScreen.MainScreen.Bounds.Width, subViewHeight);
this.recentView = new UIView(recentRectangle);
this.recentView.Hidden = true;
this.recentTableView = new UITableView(new RectangleF(0, 0, UIScreen.MainScreen.Bounds.Width, subViewHeight), UITableViewStyle.Plain);
this.recentTableView.Source = new NearbyListDataSource(this);
this.recentView.AddSubview(recentTableView);
this.View.Add(recentView);
#endregion Recent View
}
Thank you for your help!
Usually if you want to transition between UIViewControllers you would use UINavigationController and "push" them into the screen. In this case you want a UISegmentedControl inside the UINavigationController's UINavigationBar.
this.PushViewController(myRecentRestaurantsViewController, true);
When the associated item is clicked in the segmented control, you call the method above to push the appropriate controller into view.
Basically UIViewControllers are "containers" for views. If you ever want to add a ViewController's View to another ViewController's view please look at my blog post on custom containers:
http://blog.devnos.com/wont-somebody-please-think-of-the-children
Related
So I am using a CollectionView to display a list of entities that, when pressed, toggle between a opened and closed state. I did this by animating the HeightRequest parameter of the parent container of the view that was pressed, then adding whatever views I wanted to show in the view's expanded state. Here is the code snippet for that:
var animate = new Animation(d => this.HeightRequest = d,
this.Bounds.Height, this.Bounds.Height + 300, Easing.CubicOut);
animate.Commit(this, "a", length: 500);
this.layout.Children.Add(this.candidateList);
this.layout.Children.Add(this.openButton);
This works fine, however, if I scroll down the list, I see that there are views that are also expanded even though I did not touch them previously, more so every full page of scrolling later. Some even include the views that I've added to the expanded state, showing incorrect data. I have assumed that this is due to the recycling mechanics of the CollectionView work in order to save on rendering costs, but there must be some way to fix this. Here is the code for relevant views:
var officesList = new CollectionView
{
ItemTemplate = new DataTemplate(typeof(OfficeListView)),
HorizontalOptions = LayoutOptions.FillAndExpand,
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
SnapPointsType = SnapPointsType.None,
ItemSpacing = 10,
},
Margin = new Thickness(20, 5),
ItemSizingStrategy = ItemSizingStrategy.MeasureAllItems,
Footer = " ",
FooterTemplate = new DataTemplate(() =>
{
return new StackLayout
{
Margin = new Thickness(20, 10),
Children = {
new LocorumLabels.MediumLabel
{
Text = "x Results | No filters applied" //TODO: Bind these to footer
}
}
};
})
};
The next snippet is the CollectionsView within an expanded "Office":
this.candidateList = new CollectionView
{
ItemTemplate = new DataTemplate(typeof(CandidateDetailView)),
HorizontalOptions = LayoutOptions.FillAndExpand,
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
SnapPointsType = SnapPointsType.None,
//ItemSpacing = 10,
},
Margin = new Thickness(10, 5),
ItemSizingStrategy = ItemSizingStrategy.MeasureAllItems,
Footer = " ",
HeightRequest = 300
};
And here is a video showing what is going on:
https://youtu.be/Ltg2o8BwfwY
Hopefully someone can let me know of a solution. Many thanks.
You are right on the cause.
As CollectionView uses DataTemplate you need to set your views and your data in such a way that when recycled the view appears as it should.
The non-obvious part to keep the animation working is to call the animation as of now but when it completes to set the value in data that would alter the view from the state before the animation to the state after the animation.
I'm trying to dynamically add new views to an existing relative layout through C# code in Xamarin.Android. I haven't find any solution on how to position child views in the relative layout. Right now they are just placed at their default location in the top left corner of the application. I've seen solutions to this problem in Xamarin.Forms but not Xamarin.Native.
I have been able to specify width and height of the view through passing a ViewGroup.LayoutParams to the AddView method of the relative layout object, but there are no constructors etc of that class that handle position.
var root = FindViewById<RelativeLayout>(Resource.Id.relativeLayout1);
var tv = new TextView(this);
root.AddView(tv, new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WrapContent,
ViewGroup.LayoutParams.WrapContent));
I want to be able to use "layout_below" on the tv view through C# and not statically through AXML.
You just need to add a rule to the layout parameters using AddRule() to place the view below the other one. Here is an example I put together that adds two TextViews, with the first being placed at the top (using .AlignTop) and the 2nd being placed below the first (using .Below).
protected override void OnCreate(Bundle savedInstanceState) {
base.OnCreate(savedInstanceState);
RelativeLayout rl = new RelativeLayout(this);
TextView tv1 = new TextView(this) {Id = View.GenerateViewId(), Text = "TextView #1"};
RelativeLayout.LayoutParams parms1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
parms1.AddRule(LayoutRules.AlignTop);
tv1.LayoutParameters = parms1;
rl.AddView(tv1);
TextView tv2 = new TextView(this) {Id = View.GenerateViewId(), Text = "TextView #2"};
RelativeLayout.LayoutParams parms2 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
parms2.AddRule(LayoutRules.Below, tv1.Id);
tv2.LayoutParameters = parms2;
rl.AddView(tv2);
SetContentView(rl);
}
Screenshot
I have a Xamarin forms application which has an event that runs every second and fetches data from a Characteristic. In this event I create the whole layout, set the data and update the view like this:
public void UpdateDisplay (ICharacteristic c) {
//Lots of irrelevant code above this.
foreach (Accelerometer item in acceloReadings)
{
counter += 1;
//Y-graph data
DataPoint itemPointY = new DataPoint();
itemPointY.X = counter;
itemPointY.Y = item.yAxes;
PointsY.Add(itemPointY);
}
yAs = new PlotModel("Variations Y-Axis");
yAs.PlotType = PlotType.XY;
yAs.Axes.Add(new LinearAxis(AxisPosition.Left, -270, 270));
y = new LineSeries();
//Custom color
y.Color = OxyColor.FromArgb(255, 154, 200, 253);
y.ItemsSource = PointsY;
yAs.Series.Add(y);
opvY = new OxyPlotView
{
WidthRequest = 100,
HeightRequest = 100,
BackgroundColor = Color.Aqua
};
opvY.Model = yAs;
Content = new StackLayout
{
opvY,
}
};
}
That code fills up all the models etc and I then want to update my graphs in the same method. I've tried a few ways:
//After all the data is re-loaded and added I want to refresh my graphs.
xAs.InvalidatePlot(true);
opvX.Model.InvalidatePlot(true);
opvX.InvalidateDisplay();
However none of these have any succes. When you look at the official docs you can see clearly it states:
"To update the plot, you must do one of the following alternatives:
Change the Model property of the PlotView control
Call Invalidate on the PlotView control
Call Invalidate on the PlotModel"
While I've tried all these ways none of them update my graphs/view. When I manually click and resize the graph I can see the data is refreshed. Eventually I want to create the graphs just once in the main method and then update the graphs with the InvalidateDisplay.
So, what am I doing wrong?!
I am creating a method that is invoked by a button. The method then adds a canvas to the button's parent container control. So, e.g., the button is on a grid. Then the method creates a canvas that is shown just below the button. But I have 2 issues:
How can I get a reference to the button's parent container?
Is there a class for container controls? I don't care if the button is in a grid, a canvas, a Stackpanel, etc. So I am looking for an interface that all types of contianers implement or a class that they inherit.
The second aspect is more important as I could pass a reference to the container manually.
EDIT:
It should look like this (minus the colors, those are only to show the different elements.
The red canvas is supposed to pop up to handle a confirmation. Maybe even with a nice animation. My idea was to create a class that can be invoked similar to this:
MyPopup popup = new MyPopup("Are you sure?", "Yes", "No", delegateFirstButton, delegateSecondButton);
popup.Show();
My code so far is not yet a class but only a method. The text parts are hard coded for the moment. The marked line needs to be more flexible and is the reason for my question.
public void ShowPopup(Control senderControl)
{
//I need to have a parameter that accepts all containers instead of this line:
this.myGrid.Children.Add(popup);
Border border = new Border();
popup.Children.Add(border);
border.Margin = new Thickness() { Top = 10 };
border.Child= text;
text.Text = "Are you sure?";
text.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
popup.SizeChanged += delegate { border.Width = popup.ActualWidth; };
popup.Children.Add(btn1);
btn1.Content = "Yes";
btn1.Height = 22;
btn1.Padding = new Thickness(10, 0, 10, 0);
btn1.Margin = new Thickness() { Left = 15, Top = 35 };
popup.Children.Add(btn2);
btn2.Content = "No";
btn2.Height = 22;
btn2.Padding = new Thickness(10, 0, 10, 0);
btn1.SizeChanged += delegate { btn2.Margin = new Thickness() { Left = 30 + btn1.ActualWidth, Top = 35 }; };
popup.Height = 70;
btn2.SizeChanged += delegate
{
popup.Width = 45 + btn1.ActualWidth + btn2.ActualWidth;
updatePositions(senderControl);
};
popup.Background = Brushes.Red;
popup.VerticalAlignment = System.Windows.VerticalAlignment.Top;
popup.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
}
public void updatePositions(Control senderControl)
{
Point location = senderControl.TranslatePoint(new Point(0, 0), this.myGrid);
popup.Margin = new Thickness()
{
Left = location.X + (senderControl.ActualWidth / 2) - (popup.Width / 2),
Top = location.Y + senderControl.ActualHeight + 15
};
}
Sounds like you're choosing the hard way to do that.
If you need a popup, then use a Popup.
Otherwise, if for whatever reasons you don't want to use that, You'd better place a grid somewhere near the root of your XAML, and ALWAYS use that as a container:
<Window>
<Grid x:Name="MainUI"/>
<Grid x:Name="PopupContainer"/>
</Window>
Otherwise, you'll almost invariably encounter Z-Index problems (if you follow your current approach).
Also, it's a really bad idea to create all that UI stuff in code. Either encapsulate your Yes/No dialog in a UserControl or create a proper Template for that.
As I said before, avoid at all costs creating/manipulating UI elements in code, as it creates a lot of maintainability issues.
I try to create a UIBarButtonItem with a custom view for a Toolbar. The view itself is displayed well, but when i click the BarButton, no action occurs. It looks like the touch event is not forwarded from the view to the UIBarButtonItem instance. I have checked the responder chain and i think it looks good. I have also searched the internet and checked the Apple documentation, but can't find any hint for my problem.
Here is my code:
g__objWeatherButton = new UIBarButtonItem[1];
UIView l__objCustomView = g__objWeatherDisplay.InfoBarButton; // Returns a reference to my custom view
UIBarButtonItem l__objButton = new UIBarButtonItem(l__objCustomView);
l__objButton.Clicked += delegate {this.WeatherButtonEvent();}; // my action handler
l__objButton.Width = 200;
l__objButton.Enabled = true;
g__objWeatherButton[0] = l__objButton;
this.Items = g__objWeatherButton; // "this" is my UIToolbar object
Can someone give me a hint where the problem is? Or a working code sample (in c# please - have found some examples in Objective-C, but apparently overlooked the crucial trick ;-)
No special trick. When you want to add a custom view to a toolbar or navigation bar, you should subscribe (and respond) to that view's events. So instead of using a UIView to hold your image, create a UIButton with UIButtonType.Custom and subscribe to that button's TouchUpInside event.
You then initialize it like you do with the UIView:
UIButton l__objCustomUIButton = UIButton.FromType(UIButtonType.Custom);
//l__objCustomUIButton.SetImage(UIImage.FromFile("your button image"), UIControlState.Normal);
l__objCustomUIButton.TouchUpInside += delegate { this.WeatherButtonEvent(); };
UIBarButtonItem l__objButton = new UIBarButtonItem(l__objCustomUIButton);
Just make sure you declare the button in the class scope.
Although the answer put me in the right direction I still had trouble displaying the button. Only after I added the following the was button display with image.
l__objCustomUIButton.Frame = new System.Drawing.RectangleF(0, 0, 40, 40);
Regards
Paul
There is an easier way and the custom button will now react like a regular toolbar button.
this.SetToolbarItems( new UIBarButtonItem[] {
new UIBarButtonItem(UIBarButtonSystemItem.Refresh, (s,e) => {
Console.WriteLine("Refresh clicked");
})
, new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace) { Width = 50 }
, new UIBarButtonItem(UIImage.FromBundle
("wrench_support_white.png"), UIBarButtonItemStyle.Plain, (sender,args) => {
Console.WriteLine("Support clicked");
})
}, false);