I have defined the following Cell type in a Xamarin.Forms project:
public MyCell() // constructor
{
var messageLabel = new Label
{
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
FontAttributes = FontAttributes.Bold,
};
messageLabel.SetBinding(Label.TextProperty, new Binding("Message"));
var dateLabel = new Label
{
FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label))
};
dateLabel.SetBinding(Label.TextProperty, new Binding("Date"));
var view = new StackLayout
{
Children = { messageLabel, dateLabel },
Orientation = StackOrientation.Vertical,
};
View = view;
}
This is called within a ListView, like so:
public MyPage()
{
var listView = new ListView()
{
ItemsSource = GetAllitems(),
ItemTemplate = new DataTemplate(typeof(MyCell)),
};
Content = listView
}
When this renders on the screen each item is really squashed up against its neighbours. I tried adding padding to the StackLayout in the MyCell class, but doing so results in text going off the screen. I'd like to have a gap between each item.
I'm think it may be worth converting the view to use Xaml to make this more clear, so if its easier to achieve as Xaml I'd accept that as an answer!
Set the HasUnevenRows property to true on the ListView. That way you have more control over the cell size.
Also, leave RowHeight to its default value (-1).
Related
I have an ObservableCollection with a list of users' data which is wrapped for multiselect page.
I added SearchBar to the multiselect page but I cannot make it work.
Code
public class WrappedItemSelectionTemplate : ViewCell
{
public WrappedItemSelectionTemplate() : base()
{
Label Title = new Label() { TextColor = Color.Black };
Title.SetBinding(Label.TextProperty, new Binding("Item.Title"));
Label Email = new Label() { FontSize = 14 };
Email.SetBinding(Label.TextProperty, new Binding("Item.Email"));
Switch mainSwitch = new Switch() { HorizontalOptions = LayoutOptions.End };
mainSwitch.SetBinding(Switch.IsToggledProperty, new Binding("IsSelected"));
StackLayout Stack = new StackLayout();
Stack.Children.Add(Title);
Stack.Children.Add(Email);
Grid grid = new Grid();
grid.Children.Add(Stack, 0,0);
grid.Children.Add(Email, 0, 1);
grid.Children.Add(mainSwitch, 1, 0);
View = grid;
}
}
public List<WrappedSelection<T>> WrappedItems = new List<WrappedSelection<T>>();
public SelectMultipleBasePage(List<T> items)
{
WrappedItems = items.Select(item => new WrappedSelection<T>() { Item = item, IsSelected = false }).ToList();
ListView mainList = new ListView()
{
ItemsSource = WrappedItems,
ItemTemplate = new DataTemplate(typeof(WrappedItemSelectionTemplate)),
};
mainList.ItemSelected += (sender, e) =>
{
if (e.SelectedItem == null) return;
var o = (WrappedSelection<T>)e.SelectedItem;
o.IsSelected = !o.IsSelected;
((ListView)sender).SelectedItem = null; //de-select
};
// SearchBar added
StackLayout Stack = new StackLayout();
SearchBar Search = new SearchBar();
Stack.Children.Add(Search);
Stack.Children.Add(mainList);
Search.TextChanged += (sender, e) =>
{
SearchBar_TextChanged();
};
Content = Stack;
void SearchBar_TextChanged()
{
//string keyword = Search.Text;
//mainList.ItemsSource =
}
}
When I used SearchBar in my cases before I was using new ObservableCollection for ItemsSource of my ListView, it was filtering it as I required.
But now am stuck and don't know how I can use the SearchBar for the field Title in that case with WrappedItems?
Although I prefer to see the code in Xaml and bound to VM with MVVM binding to make it easier to read . But I think I got what you need.
What you need to :
Search within WrappedItems and save the found result
Clear the ItemSource of the list view mainList.ItemSource.Clear();
Go through the foundItems and mainList.ItemSource.Add(foundItem);
If the Key is empty string "" then you go through original list and do the same work (i.e. clear the itemsource and add the whole data )
So I have this program where I mainly do all my bindings by using x:Bind but I have a control page where I need to generate a lot of Slider to be able to manipulate the data I stored in an ObservableCollection<T>
I really need to generate those sliders from my code because I need around 100 of them and it would really mess up my xmal file to create them by hand...
This is how I create the bindings in my code. They also work when I load them the first time. But they don't change the source data when I move the slider around.
private void CreateGrid()
{
for (var parameterNumberIndex = 1; parameterNumberIndex < 97; parameterNumberIndex++)
{
var paraName = new TextBlock()
{
Name = $"Parameter{parameterNumberIndex}",
FontSize = 25,
VerticalAlignment = VerticalAlignment.Top,
Margin = new Thickness(0, 0, 0, 10)
};
var slider = new Slider()
{
Name = $"ValueSlider{parameterNumberIndex}",
Width = 200,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
var value = new TextBox()
{
Name = $"ValueBox{parameterNumberIndex}",
Margin = new Thickness(10, 5, 0, 0),
FontSize = 20,
VerticalAlignment = VerticalAlignment.Top
};
var row = new RowDefinition { Height = new GridLength(50, GridUnitType.Pixel) };
SettingsGrid.RowDefinitions.Add(row);
var nameBinding = new Binding
{
Source = ViewModel.BlockCollection.NamesBlock.Names[parameterNumberIndex].NameString,
Mode = BindingMode.OneWay
};
var valueBinding = new Binding()
{
Source = ViewModel.BlockCollection.ParameterBlock.Parameters[parameterNumberIndex].ParameterValue,
Mode = BindingMode.TwoWay
};
var minBinding = new Binding()
{
Source = ViewModel.BlockCollection.MinMaxBlock.AllValues[parameterNumberIndex].MinValue,
Mode = BindingMode.OneWay
};
var maxBinding = new Binding()
{
Source = ViewModel.BlockCollection.MinMaxBlock.AllValues[parameterNumberIndex].MaxValue,
Mode = BindingMode.OneWay
};
var textBinding = new Binding()
{
Path = new PropertyPath("Value"),
Source = slider,
Mode = BindingMode.TwoWay
};
BindingOperations.SetBinding(paraName, TextBlock.TextProperty, nameBinding);
BindingOperations.SetBinding(slider, Slider.MinimumProperty, minBinding);
BindingOperations.SetBinding(slider, Slider.MaximumProperty, maxBinding);
BindingOperations.SetBinding(slider, Slider.ValueProperty, valueBinding);
BindingOperations.SetBinding(value, TextBox.TextProperty, textBinding);
SettingsGrid.Children.Add(paraName);
SettingsGrid.Children.Add(slider);
SettingsGrid.Children.Add(value);
Grid.SetColumn(paraName, 0);
Grid.SetColumn(slider, 1);
Grid.SetColumn(value, 2);
Grid.SetRow(paraName, parameterNumberIndex - 1);
Grid.SetRow(slider, parameterNumberIndex - 1);
Grid.SetRow(value, parameterNumberIndex - 1);
}
}
The Source = ... are always ObservableCollection<T> depending on which type I need them in.
The slider source is a collection of uint.
The BindableBase is my implementation of INotifyPropertyChanged.
public class ParameterBlock : BindableBase
{
public ParameterBlock()
{
this.Parameters = new ObservableRangeCollection<ParameterBlockValue>();
}
public ObservableRangeCollection<ParameterBlockValue> Parameters
{
get => _parameters;
set
{
_parameters = value;
OnPropertyChanged();
}
}
private ObservableRangeCollection<ParameterBlockValue> _parameters;
}
public class ParameterBlockValue : BindableBase
{
private uint _parameterValue;
public uint ParameterValue
{
get => _parameterValue;
set
{
_parameterValue = value;
OnPropertyChanged();
}
}
public ParameterBlockValue(uint parameter)
{
this.ParameterValue = parameter;
}
public override string ToString()
{
return $"{this.ParameterValue} {Environment.NewLine}";
}
}
This is nearly the last step I need to fix before I'm more or less done with this project and I don't want to get stuck here :/
I don't know if the wpf tag is wrong. But everytime I look for xaml references I stumble over the wpf stuff and it's somewhat usable. So if it's wrong just tell me and I remove it.
To explain a bit more... In the finished product it will depend on what data I recieve to decide if there will be a slider or a textbox.
Just a small example picture from another question I had yesterday:
I see you are adding the controls in a Grid, generating the rows manually. While this could certainly work, it would be much better to use a list control and create the items within:
<ItemsControl ItemsSource="{x:Bind Data}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- your Sliders, etc. -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl>
If the data might vary between multiple layouts, you may implement a DataTemplateSelector class, override the SelectTemplateCore(object item, DependencyObject container) (this method specifically, there is another one with the same name but different number of parameters which is not called) and decide on the right template for each item. You can create multiple DataTemplates as resources with x:Key and then reference them from your DataTemplateSelector. See this blog post for an example and documentation for more details.
How can I add Swipe to delete in my note list app.I am using xamarin forms. I have searched in xamarin forms samples but could not find it. I also tried the list view performance options with menuItem etc but I dont know how to adjust that in my code. Can anyone help me with this please?
My code is as follows:
public partial class MyPage
{
List<Note> notes;
string NotesFile {
get {
var documents = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
return System.IO.Path.Combine (documents, "notes.json");
}
}
public MyPage()
{
BuildContent();
LoadNotes ();
ReloadListContents ();
AddNoteButton.Clicked += (sender, args) => {
var note = new Note("typ...");
notes.Add(note);
EditNote(note);
};
NoteListView.ItemTapped += (sender, row) =>
{
NoteListView.SelectedItem = null;
Note note = (Note)row.Item;
EditNote(note);
};
buttonDelete.Clicked += (sender, args) =>{
notes.RemoveAt(0);
DisplayAlert("Delete", "Row deleted", "OK");
};
}
}
MyPage.cs
{
public ListView NoteListView = new ListView ();
public Button AddNoteButton;
public Button buttonDelete;
private void BuildContent()
{
AddNoteButton = new Button
{
Text = "Add New Note",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
buttonDelete = new Button
{
Text = "Delete Note ",
TextColor = Color.White,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Content = new StackLayout
{
BackgroundColor = Color.Black,
Children = {
new Label {
Text = "Note Taker",
TextColor = Color.White
},
NoteListView,
AddNoteButton,
buttonDelete
}
};
}
Im responding to this question in CS code rather than XAML (My Preferred) if anyone would like the Xaml response please drop a comment below and I'll write the XAML alongside the CS.
So to complete what you have asked in Xamarin.Forms on ListView elements you must first create the ViewCell that you would like to display the data in each cell in the ListView and give it context actions. Here is an example:
public class CustomViewCell : ViewCell
{
public CustomViewCell()
{
//instantiate each element we want to use.
var image = new CircleCachedImage
{
Margin = new Thickness(20, 10, 0, 10),
WidthRequest = App.ScreenWidth * 0.15,
HeightRequest = App.ScreenWidth * 0.15,
Aspect = Aspect.AspectFill,
BorderColor = Color.FromHex(App.PrimaryColor),
BorderThickness = 2,
HorizontalOptions = LayoutOptions.Center
};
var nameLabel = new Label
{
Margin = new Thickness(20, 15, 0, 0),
FontFamily = "Lato",
FontAttributes = FontAttributes.Bold,
FontSize = 17
};
var locationLabel = new Label
{
Margin = new Thickness(20, 0, 0, 5),
FontFamily = "Lato",
FontSize = 13
};
//Create layout
var verticaLayout = new StackLayout();
var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };
//set bindings
nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
locationLabel.SetBinding(Label.TextProperty, new Binding("Location"));
image.SetBinding(CircleCachedImage.SourceProperty, new Binding("Image"));
//Set properties for desired design
horizontalLayout.Orientation = StackOrientation.Horizontal;
horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
image.HorizontalOptions = LayoutOptions.End;
//add views to the view hierarchy
horizontalLayout.Children.Add(image);
verticaLayout.Children.Add(nameLabel);
verticaLayout.Children.Add(locationLabel);
horizontalLayout.Children.Add(verticaLayout);
//HERE IS THE MOST IMPORTANT PART
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background
deleteAction.Clicked += async (sender, e) => {
//Here do your deleting / calling to WebAPIs
//Now remove the item from the list. You can do this by sending an event using messaging center looks like:
//MessagingCenter.Send<TSender,string>(TSender sender, string message, string indexOfItemInListview)
};
// add to the ViewCell's ContextActions property
ContextActions.Add(deleteAction);
// add to parent view
View = horizontalLayout;
}
}
Now you must do the following to your ListView:
listView = new ListView();
lstView.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
In the same Content Page that you have the ListView you must also subscirbe to the MessagingCenter listening to the same parameters as set in the custom view cell as above. Please read the link provided if you have not used the MessagingCenter before. Inside of this method you must then remove the item from the listview with the index sent to this method.
If anyone needs any further explanations drop a comment below and Ill edit this post.
I am new to WPF. I have a listBox with various elements graphics elements in it.
The element in the listBox are linked to a list.
At the moment to add elements I am doing it the old way that is with no binding:
StackPanel sp = new StackPanel();
string currentDir = AppDomain.CurrentDomain.BaseDirectory.ToString();
TextBox tb = new TextBox()
{
Text = strContent,
BorderBrush = new SolidColorBrush(Colors.Gainsboro),
IsReadOnly = true,
ToolTip = strNotes,
FontSize = 12,
FontWeight = FontWeights.Bold,
Width = IMAGES_ROW_HEIGHT,
Height = IMAGES_ROW_HEIGHT / GOLDEN_RATIO,
Background = null,
Margin = new Thickness(BUTTON_MARGIN),
VerticalContentAlignment = VerticalAlignment.Center,
HorizontalContentAlignment = HorizontalAlignment.Center
};
sp.Children.Add(tb);
Image newResizedImage = ImageUtilities.StrPath2ResizedImageSizeHeight(strPathImage, IMAGES_ROW_HEIGHT);
if (newResizedImage != null)
{
sp.Children.Add(newResizedImage);
sp.Orientation = Orientation.Horizontal;
sp.HorizontalAlignment = HorizontalAlignment.Left;
}
lbxPPgroups.Items.Add(sp);
lbxPPgroups.SelectedIndex = 0;
var newGroup = new PcDmisData.Group();
newGroup.Description = strContent;
var newImage = new PcDmisData.MyImage();
newImage.Image = newResizedImage;
newImage.IsImageEmbedded = false;
newGroup.myImage = newImage;
newGroup.Notes = strNotes;
easyRunData.olstPPgroups.Add(newGroup);
but I know I'm doing it wrong, because I'll have to manually handle deletion, add, reorder of element and so on.
I Would like to be able to bind the elements in the listBox to the elements of the following class:
[Serializable]
public class EasyRunXmlSerializableData
{
public EasyRunXmlSerializableData()
{ }
//PcDmis Data
public ObservableCollection<PcDmisData.Group> olstPPgroups = new ObservableCollection<PcDmisData.Group>();
}
with
public class PcDmisData
{
[Serializable]
public class Group
{
public string Description;<---------this for the text of the textbox
public MyImage myImage;<------------this is the image
public string Notes;<---------------this for a tooltip
public ObservableCollection<PartProgram> partProgramList = new ObservableCollection<PartProgram>();
}
[Serializable]
public class MyImage
{
public object Image;
public bool IsImageEmbedded;
}
....
thanx for any help
Patrick
Following links should get you started in the right direction.
You need to understand DataTemplate, and Data Binding for your current scenario.
MSDN : How to display data in a ListBox
ListBox tutorial basics
ListBox Custom Layout
How to get a ListBoxItem from a data bound ListBox
DataBinding Links
DataBinding - How to
DataBinding - FAQ
Scott's DataBinding tutorial
I am creating the DataGridTemplateColumn dynamically.
var binding = new Binding
{
Path = new PropertyPath("MyProperty"),
UpdateSourceTrigger = UpdateSourceTrigger.LostFocus
};
var converterParameter = new List<object> { header, rows, myGrid };
binding.Converter = new MyConverter();
binding.ConverterParameter = converterParameter;
var textBoxValue = new FrameworkElementFactory(typeof(TextBox));
totalUnitsValue.SetBinding(TextBox.TextProperty, binding);
totalUnitsValue.SetValue(TextBox.HorizontalContentAlignmentProperty, HorizontalAlignment.Right);
totalUnitsValue.SetValue(TextBox.WidthProperty, 40.0);
totalUnitsValue.SetValue(TextBox.MarginProperty, new Thickness(4, 0, 10, 0));
var factoryElement = new FrameworkElementFactory(typeof(StackPanel));
factoryElement.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
factoryElement.AppendChild(textBoxValue );
var column = new DataGridTemplateColumn
{
Header = header,
CellTemplate = new DataTemplate { VisualTree = factoryElement }
};
myGrid.Columns.Add(column);
This works fine for few columns. But if i create 10 or more columns (80 -90) textBoxes then the last created TextBoxes do not allow me to change the value or do not allow me to put focus on the TextBox. It becomes like TextBlock.
EDIT:
IF I REMOVE THE STACKPANEL, THEN THERE IS NO ISSUE WITH THE TEXTBOX BUT I NEED TO SHOW MORE THAN ONE ELEMENT, SO I NEED TO HAVE SOME SORT OF CONTAINER.ANY HELP ON THAT.
Please guide what could be tghe