I've created a view that will need to be added to several different screens. I'm struggling to figure out how to align the elements correctly in the view.
The output needs to look like the following:
I've tried the following with no success:
var uiiv = new UIImageView(image);
var firstLine = new UITextField { Text = description};
var secondLine = new UITextField { Text = summary};
this.Add(uiiv);
this.Add(firstLine );
this.Add(secondLine );
Every UI element should have a Frame property that allows you to specify the position of the element relative to it's parent view. Using this property will allow you to position the element.
Related
I have created a data template to use within a list view. This will later be expanded to add more content to each item in this list view. At the moment all the items that are bound to the observable collection are working as expected, except for one.
In each instance of the data template the bound properties are height, RouteName and routeStops. The height and RouteName are working fine but I'm not sure how to bind the routeStops correctly.
For each one of the RouteNames there are multiple stops, so for each data template use there must be one label that has the RouteName and multiple labels for each stop on the route (using routeStops).
I am not entirely sure how to achieve this, I can only seem to bind one stop to one label. I want to create them dynamically to allow for any amount of stops.
So the code behind that creates the data template (Just the constructor):
public MainRoutePageViewDetail(MessagDatabase database)
{
InitializeComponent();
BindingContext = mainroutepageviewmodel = new MainRoutePageViewModel(database,Navigation);
StackLayout mainstack = new StackLayout();
var routelisttemplate = new DataTemplate(() => {
ViewCell viewcell = new ViewCell();
stacklayout = new StackLayout();
stacklayout.SetBinding(StackLayout.HeightRequestProperty,"height");
viewcell.View = stacklayout;
// labels for template
var nameLabel = new Label { FontAttributes = FontAttributes.Bold, BackgroundColor = Color.LightGray };
nameLabel.HorizontalOptions = LayoutOptions.Center;
nameLabel.VerticalOptions = LayoutOptions.Center;
nameLabel.SetBinding(Label.TextProperty, "RouteName");
//inforLabel.SetBinding(Label.TextProperty, "Stops");
stacklayout.Children.Add(nameLabel);
StackLayout nextstack = new StackLayout();
var nameLabel2 = new Label { FontAttributes = FontAttributes.Bold, BackgroundColor = Color.Red };
nameLabel2.HorizontalOptions = LayoutOptions.Center;
nameLabel2.VerticalOptions = LayoutOptions.Center;
nameLabel2.SetBinding(Label.TextProperty, "routeStops");
nextstack.Children.Add(nameLabel2);
stacklayout.Children.Add(nextstack);
return viewcell;
});
ListView listviewofroutes = new ListView();
mainstack.Children.Add(listviewofroutes);
listviewofroutes.SetBinding(ListView.ItemsSourceProperty, "routeLabels");
listviewofroutes.ItemTemplate = routelisttemplate;
listviewofroutes.HasUnevenRows = true;
Content = mainstack;
}// end of constructor
This is bound to an ObservableCollection in the view model. Im going to leave this out as its irrelevant because the bindings work fine.
This calls down to functions in the model that collect data from SQL tables.
The function in the model that collects data:
public List<RouteInfo> getrouteInfo()
{
var DataBaseSelection = _connection.Query<RouteInfoTable>("Select * From [RouteInfoTable]");
List<RouteInfo> dataList = new List<RouteInfo>();
for (var i = 0; i < DataBaseSelection.Count; i++)
{
var DataBaseSelection2 = _connection.Query<RouteStopsTable>("Select StopOnRoute From [RouteStopsTable] WHERE RouteName = ? ",DataBaseSelection[i].RouteName);
dataList.Add(new RouteInfo
{
ID = DataBaseSelection[i].ID,
RouteName = DataBaseSelection[i].RouteName,
Stops = DataBaseSelection[i].Stops,
DayOf = DataBaseSelection[i].DayOf,
IsVisible = DataBaseSelection[i].IsVisible,
routeStops = DataBaseSelection2[i].StopOnRoute,
height = 200
});
}
return dataList;
}
The first table (RouteInfoTable) gets RouteName and some other information and the second table gets the stops on the route using the RouteName as a key. This is all added to a list of RouteInfo instances.
DataBaseSelection2 grabs all of the stops on the route but only one of them displays. I know why this is but I dont know how to display all three.
The Table definitions and class definitions as well as the selections from the tables are not an issue. I have debugged these and they are getting the correct information I just dont know how to display it on the front end in the way I want to. Here is a visual of what I mean if its getting complicated:
The best I can do is one route stop not all three.
An ideas how to achieve this?
Sorry if its complicated.
You can use Grouping in ListView to achieve this visual. Basically in this case you will be defining two DataTemplate(s) -
GroupHeaderTemplate for RouteName
ItemTemplate for StopsOnRoute.
I want to animate lives tiles in UAP applications. But I am getting this exception:
Cannot implicitly convert type 'NotificationsExtensions.Tiles.TileImageSource' to 'string'.
I am using this code:
TileBindingContentAdaptive largebindingContent = new TileBindingContentAdaptive()
{
PeekImage = new TilePeekImage()
{
Source = new TileImageSource("Assets/Apps/Hipstame/hipster.jpg")
},
Children =
{
new TileText() {Text =Description, Wrap = true, Style = TileTextStyle.BodySubtle}
}
};
How can I animate my live tiles?
Cannot implicitly convert type 'NotificationsExtensions.Tiles.TileImageSource' to 'string'.
The reason you are getting this exception is because as of May 2016 NotificationsExtensions received some updates where there have been changes made to TileBackgroundImage and TilePeekImage. You can see the details of these changes here in the msdn update post.
Specifically, the property type for Source changed from TileImageSource to string. This change means that you need to change the way you are setting Source. Note in the code below (yours, which I modified) where the Source is simply a string. This should resolve the exception you are getting.
TileBindingContentAdaptive largebindingContent = new TileBindingContentAdaptive()
{
PeekImage = new TilePeekImage()
{
Source = "Assets/Apps/Hipstame/hipster.jpg"
},
Children =
{
new TileText()
{
Text = Description,
Wrap = true,
Style = TileTextStyle.BodySubtle
}
}
};
As far as animating your live tiles there are a variety of things you can do and I cannot give any specific advice unless you specify what you want to do with your tiles. For example, if you want to cycle through images in your live tile you can take a look at this example here for cycling multiple images with an animation through a live tile. You can also refer to the msdn Adaptive Tile Templates documentation if you want to read through in more detail about what else you can do with your tiles.
I am new on Xamarin.Forms and I am trying to use EntryCell
AccountId = new EntryCell {Label="Account Id", Text = CustomersPage.staticCustomer.AccountId};
When I am trying to add EntryCell to content page:
Content = new StackLayout {
Children = {
AccountId
}
};
I get the following error:
The best overloaded Add method
'System.Collections.Generic.ICollection.Add(Xamarin.Forms.View)'
for the collection initializer has some invalid arguments
Why can't I add EntryCell directly just like Entry?
EntryCell doesn't derive from View, therefore you cannot add it as a child to StackLayout children collection.
EntryCell is intented to use with ListView (also with TableView) control, generally due to performance reasons. EntryCell derives from Cell which provides description of a visual element rather than is a visual element.
On the other side Entry derives from View, thus you can add it to StackLayout.
Actullay I was searching away to use Label And Text on the same time So
As #Arkadiusz said
I used TableView like that :
TableView tb = new TableView();
tb.Root = new TableRoot() { new TableSection("Info") { AccountId }};
Content = new StackLayout { Children={ tb, ProcessToCheckOut } }
or
I need to user Entry && Label instead of EntryCell And Change stackLayout orientation To Horizontal
I want to display a simple nsoutlineview that will display a hierarchy.
When I did it via InterfaceBuilder, everything was fine, but now that I'm trying to it programmatically, I have some trouble.
Here the code I use to display the outline view, inside a nsscrollview :
this.OutlineView = new NSOutlineView();
this.OutlineView.IndentationPerLevel = 16.0f;
this.OutlineView.IndentationMarkerFollowsCell = true;
this.OutlineView.SelectionHighlightStyle = NSTableViewSelectionHighlightStyle.Regular;
this.OutlineView.HeaderView = null;
this.OutlineView.BackgroundColor = NSColor.FromDeviceRgba(225f/255f,228f/255f,232f/255f,1f);
this.OutlineView.DataSource = dataSource;
this.OutlineView.Delegate = aDelegate;
NSTableColumn tableColumn = new NSTableColumn("Name");
tableColumn.Editable = false;
tableColumn.MinWidth = 100f;
this.OutlineView.AddColumn(tableColumn);
this.DocumentView = this.OutlineView;
And this is what I get when I want to display the hierarchy of a root directory and a file inside this directory :
No arrow before root, no indentation of the file in the directory...
Ok found it after looking in the debugger how xCode construct the scroll view :S
In addition to adding the table column, you have to set the OutlineTableColumn, by adding this line :
this.OutlineView.OutlineTableColumn = tableColumn;
I have been using MT.D for some time now to make table-based UI layouts. However, I have found that XibFree is awesome for laying out custom pages while keeping the layout code as code (rather than using a designer). This is for (a) easy customization through code and (b) maintainability by other developers.
I would like to use both at the same time. XibFree's table creation isn't as easy to use as MT.D but I can't find a way to extract a UIView from a section and place it into my XibFree layout (all I need is a UIView to do this).
Any ideas? I've tried using the View from the DVC, and the TableView from the RootElement, but no luck with getting either to display in my layout.
Example:
new NativeView()
{
// table view from RootElement - shows empty space where table should be
View = entryView.TableView
},
I've also tried adding a UITableView to my view, and setting the TableView property of the DVC to that, with a call to ReloadData(), with no success.
I was able to get it to load this way:
var re = new RootElement ("") {
new Section("Please Sign In")
{
(userName = new EntryElement("User name", "Your user name", "")),
(password = new EntryElement("Password", "Your password", "", true))
}
};
var entryView = new DialogViewController (re, false);
//entryView.
var uitv = new UITableView (RectangleF.Empty, UITableViewStyle.Grouped);
entryView.LoadView ();
//entryView.TableView = uitv;
re.TableView.Frame = RectangleF.Empty;
uitv = re.TableView;
Then in my layout:
new NativeView()
{
View = uitv,
LayoutParameters = new LayoutParameters()
{
Width = AutoSize.FillParent,
Height = 200
}
},
Which gives me a scrollable region inside the view:
The region with the lines is its own scrollable view, which I did not expect given I was just giving the area the table view from the one section I created. I want to take the sections out of it and insert them into my view, so there is no scrollable view inside my view. (Never mind the weird look of the UITextfields, I'm using Pixate to style stuff.)
I hope it's just something small I am missing here and that this should be a trivial task.
EDIT: Is there also a way to calculate the height for the rendered section, to give to the LayoutParameters object?