I am trying to find a best or common practice for creating a table of buttons from a database list.
For my use I am creating more of a Point of Sale type screen. Where I want the categories to load as buttons on the entry screen. The buttons would have a simple task of showing a screen of more dynamically created buttons of the actual items. Those buttons would add the items to, lets call it, a ticket.
The solutions I found were few. I am also trying to code this so others can pick it up fairly quickly. I am extremely rusty and only code once in a while. So I try to follow common ways of doing it. I had some ideas but the code becomes hard to read, mostly because of me.
I saw the below link but was not sure if a ListBox was a good container for this.
Dynamic filling WrapPanel buttons from DB, setting the event handlers
I am sure a wrappenel is what I would have to use, but do I put it in a container or use it directly. Do I put it in Xaml or code it all, for issues like spacing between buttons? I think I am overthinking it and need to skip for a little bit.
Thank you,
It sounds like you want an ItemsControl, bound to your categories, with a WrapPanel as the ItemsPanel. The Button would go in the ItemTemplate.
<ItemsControl ItemsSource="{Binding CategoriesFromDatabase}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}"
Command="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl},Path=DataContext.AddToTicketCommand}"
CommandParameter="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here I assumed that your view model has properties "CategoriesFromDatabase" (an IEnumerable that you populate from the database), and an ICommand "AddtoTicketCommand" which takes the category as a parameter.
Related
I'm very new in WPF and I need some advise on how to create a view with many UIElements at the same time. What i want to do, is to view some kind of table with fixed width and height for each cell. In each cell could be a random number of textblocks with a different back and forecolor (see image).
Image for table-like view with many UiElements
That is what I have done so far... I created an usercontrol for the content of one cell which binds the items in an itemcontrol.
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Backcolor, Converter={StaticResource IntegerToBrushConverter}}" >
<Viewbox MaxHeight="20" >
<TextBlock TextWrapping="Wrap" Text="{Binding Caption}"
Foreground="{Binding Forecolor, Converter={StaticResource IntegerToBrushConverter}}"/>
</Viewbox>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This usercontrol is also binded to an itemcontrol for representing the x-axis of my table.
<ItemsControl ItemsSource="{Binding}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:DayView DataContext="{Binding Days}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And the same is done for the y-axis with an nice scrollviewer around. So, the problem is, that there are many many elements in the virtual tree. In my sample case there are over 60.000 elements listed in the tree. This results in a bad performance, when opening the view. The scrolling performance is quite okay, but he takes several seconds to open the view.
I've tried some things like the CacheMode and so on, but all of that doesnt effect the opening performance. Using a VirtualizingStackPanel results in bad scrolling performance. I even cant figure out what takes so long to build up the Ui. Seems that he need a lot of time to measure all UiElemtents, but Im not sure...
Are there tips to make such an UiElement rich view any faster? As I said, Im very new in WPF and that is only a performance test. We have such an Ui in Winforms, but there, the whole table was user painted. In WPF it is so easy to rebuild the Winforms design with stock content-controls that I only want to draw all for myself as a last resort.
Take a look here for a possible solution to your problem by using virtualization:
WPF Data Virtualization
Also if you want to go another way, there are commercial 3rd party WPF control libraries that handle virtualization with various degrees of success. To name a few: Xceed, Syncfusion, DevExpress and Telerik.
I even cant figure out what takes so long to build up the Ui.
Hoping you are using VS2015 (or something better), there are a few ways to get an answer to what is taking so long. Visual Studio has a live visual tree tool (Debug->Windows) where you can see the visual tree in real time and it might help you find and eliminate some of the UI elements you don't really need (like borders inside more borders, etc)
Second, you can run the Diagnostic tools (Alt+F2), choose CPU usage and that should generate a report where you can see where your program is spending the most time. Hopefully this will isolate the issue to certain methods that can be optimized afterwards.
Also, more detail about your problem would be welcome. What is the code that populates the ItemsSource do exactly?
I'm about to create a dynamic WPF UI form from DataTable data. The screens would be fairly complex. They would contain textboxes, groupboxes, checkboxes, buttons, datagrids etc. Some of them visible, some hooked up event handlers and thing like that.
What approach of creating those dynamic screens would you choose considering performance impact and complexity requirements to write and maintain source code. Please note that this code will run a LOT so it must be efficient and blazing fast. I'm considering these options:
Create Controls in code, assemble them to a tree and use the tree (Grid control) as a root element for a WPF form.
1.a) Create a XAML via XAMLReader from that screen object tree and Load it via XAMLReader inside WPF Form. Creating XAML would seem redundant to me since I can use the built tree as a Content for WPF form directly.
Use XMLDocument class to create tags, obejcts and their atributes. Create a XAMLlike that and then load that XAML in WPF form.
Thanks,
Michal
Consider displaying your form in a listview and creating a DataTemplate for each of your form fields textboxes, groupboxes, checkboxes, buttons, datagrids etc.
<ListBox ItemsSource="{Binding DataFormFields}"
<DataTemplate DataType="YourTextClass">
<StackPanel>
<TextBlock Text="{Binding LabelText}" />
<TextBox Text="{Binding ValueText}" />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="YourCheckClass">
<StackPanel>
<CheckBox Content="{Binding LabelText}"
IsChecked="{Binding Checked}"/>
</StackPanel>
</DataTemplate>
For more on DataTemplates see
https://learn.microsoft.com/en-us/dotnet/framework/wpf/data/data-templating-overview
Each data template should be associated with a one of your form fields classes, using the DataType attribute, this will cause the listbox to automatically use the correct DataTemplate.
For more details:
https://learn.microsoft.com/en-us/dotnet/api/system.windows.datatemplate.datatype?view=netframework-4.7.2
This is what my main program GUI will look like, what I am attempting to do, is to create a reminder application in C# using wpf.
I am going to use a scroll viewer which is going to be displaying the data to the user, namely the reminders they currently have.
Each time the user adds a reminder, it will add this:
What I am wanting to do is that, when ever the user add's a new reminder, there will be a new set of data added to the scrollviewer.
What would be the best way of achieving this?
Am I able to hold the xaml data and add it during execution?
Thanks for the help
What you want to do can be accomplished not by dynamic Xaml, but by the use of a templated control which can accept dynamic data. For example you wouldn't consider using a listbox for your labels because you are not showing the data in a list right?
But a listbox is just a conveyor belt for what you want to achive. Say you want more than a label, how about three labels. Via binding to a proper structure you can get what is needed.
Here is an example
<ListBox ItemsSource="{Binding myReminders }">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=ReminderName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Once that is bound to a list of my reminder data objects (which the list can dynamically change), we have the ability to show the reminders in any format we want. One just uses the above to style it appropriately. (Check out WPF's Templating Overview for a great example).
The use of templates is done in other controls, so if the listbox is not to your liking, look into other templated controls.
I am pretty new to WPF, and in order to get some knowledge I decided to make a very simple UML modeling program, that basically offers the possibility to put some classes onto a canvas, connect them and move them around.
Now to the question:
I have been thinking about letting the classes I put on the canvas being a userControl I design. In my mind it would be something like a Grid, with some textboxes to represent properties, attributes and so on. The actual question is then, is my idea possible, or should I go with something completely different? My concern right now is how to implement the grid such that it can expand (add a row) under the right heading (Attribute/property..) when I want it to, and not be expanded to a maximum from the beginning.
I hope you can understand my question, and give me an idea to whether I should continue to implement it how I thought about, or do it using some other method.
You may wish to consider a ListView control, perhaps with an Expander, something like this:
<Canvas>
<Expander Header="Stuff"
MaxHeight="900"
Canvas.Left="202"
Canvas.Top="110">
<ListView Name="MyListView">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Add new thing"
Click="MenuItem_Click" />
</ContextMenu>
</ListView.ContextMenu>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<Label>Name</Label>
<TextBox Text="Value" />
</StackPanel>
</ListViewItem>
<ListViewItem>Item two</ListViewItem>
<ListViewItem>Item three</ListViewItem>
</ListView>
</Expander>
</Canvas>
This will size as needed up to the max given. The list view items could contain any sort of content (not just text) as you can see above. You will want to learn a bit about Style and Control templates. WPF has IMHO a rather steep learning curve but there are a lot of learning resources on the web. Good luck.
In response to your comment, I'm adding additional information.
Anything you can do in XAML you can do in code behind (mostly XAML just calls framework objects). In this case I've added a context menu to the ListView control. This menu contains one item "Add new thing". There is a Click event for this item which is bound to the MenuItem_Click method in the code behind. I then added this method to the code:
void MenuItem_Click(object sender, RoutedEventArgs e) {
var lvi = new ListViewItem();
lvi.Content = String.Format("New thing {0}", DateTime.Now);
MyListView.Items.Add(lvi);
}
Now if you right click in the ListView you will see the "Add new thing" menu selection, left clicking it adds a new ListViewItem into the ListView (programmatically).
When my app is snapped displaying a GridView isn't the best way to present the information. I want to present it in a ListView instead. I also want to change the item template as well.
I currently have a UserControl that accepts the DataContext as the item template so I can simply create a new view and use that instead and it should work. So I'm basically looking to swap local:NormalDetailView with local:SnappedDetailView
Originally I thought about having both the ListView and GridView in there at the same time and adjusting the visibility based on snapped mode. But I had doubts about the performance about this technique.
Lastly, this is a LayoutAwarePage so I do have all that XAML stuff at the bottom about VisualStateManager.VisualStateGroups etc.
<GridView x:Name="GalleryGridView"ItemsSource="{Binding ListOfItems}">
<GridView.ItemTemplate>
<DataTemplate>
<local:NormalDetailView VerticalAlignment="Center" Width="250" Height="250" DataContext="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The performance is just fine if you use both a gridview and a listview, and adjust visibility depending on view state. This is exactly what the "split-application" template in Visual Studio does.
Just generate an app based on this template and take a look at ItemsPage.xaml and ItemsPage.xaml.cs. The other templates may also do this, but I haven't used them so I don't know for sure.