How to Bind Values from List in BarChart - c#

I have an application which is check the incoming Mails on the Server and refresh a List with X-Values in it. Now I want to Plot the incoming Mail count in a Live Chart. I use http://lvcharts.net for this.
I have two classes a Mail Object with the Count and a TimeStamp in it and a List Class with all Mail Objects in it.
Here is my sample(pseudo) XAMl code:
<liveCharts:BarChart Name="MailChart" Grid.Row="1" Grid.Column="0">
<liveCharts:BarChart.Series>
<liveCharts:BarSeries Title="Mails" Values= "{Binding MailCountList.Count}"></liveCharts:BarSeries>
......
......
<liveCharts:BarChart.AxisY>
<liveCharts:Axis Title="Time" Labels="{Binding MailCountList.Timestamp}">
......
The Objects are in a normal List with automatically Refesh I use MVVM.
My Question is:
How can I bind a List to a XAML Value Series ?

I have used an ObservableCollection to view the Content and a normal list to fill sort etc. the Xaml Code Looks Like:
<ListView ItemsSource="{Binding TableList}" Grid.Row="0">
<ListView.View>
<GridView>
<GridViewColumn Width="50" Header="ID" DisplayMemberBinding="{Binding ID}"/>
<GridViewColumn Width="180" Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Width="100" Header="Group" DisplayMemberBinding="{Binding Group}"/>
<GridViewColumn Width="85" Header="Version" DisplayMemberBinding="{Binding Version}"/>
</GridView>
</ListView.View>
</ListView>
The Source of the ListView is in the ItemSource and to Display Multiple Rows I use GridViewColumn with Binding to the Object Values from the List in "DisplayMemberBinding"

Related

C# WPF ListView MVVM ObservableCollection inside of an ObservableCollection

I have an ObservableCollection of Team (ObservableCollection<Team>). In my Team class I have an ObservableCollection of "Actor" (ObservableCollection). Now I want display the actors in a Listview in with mvvm pattern.
Anyone have a solution? I did not found anything on google to show the actors in my Listview.
Thanks in advance.
<Window x:Class="Room.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Room.Views"
xmlns:localBind="clr-namespace:Room.ViewModels"
mc:Ignorable="d"
Title="" Height="300" Width="800">
<Window.DataContext>
<localBind:MainViewModel/>
</Window.DataContext>
<Grid>
<ListView Margin="10" ItemsSource="{Binding Teams}"
SelectedItem="{Binding SelectedActor}" >
<ListView.View>
<GridView>
<GridViewColumn Header="Id" Width="80" DisplayMemberBinding="{Binding Id}"/>
<GridViewColumn Header="Niggname" Width="160"
DisplayMemberBinding="{Binding Name}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
From this other stackoverflow post:
If the list is nested, you have a tree, for which you can use a
HierarchicalDataTemplate and display in a TreeView or nested
ListViews.
If you want to view in a flat list, have your ViewModel flatten the
tree, assuming you are using an MVVM pattern.
Your listview is showing each individual Team as an item. Because you have nested collections (Teams is a collection of collections of Actors), your Id and Name bindings aren't binding to the Actor items but to the Team items.
My initial solution was to go deeper and put a listview inside of a listview
<ListView ItemsSource="{Binding Teams}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView Margin="10" ItemsSource="{Binding Actors}"
SelectedItem="{Binding SelectedActor}" >
<ListView.View>
<GridView>
<GridViewColumn Header="Id" Width="80" DisplayMemberBinding="{Binding Id}"/>
<GridViewColumn Header="Name" Width="160"
DisplayMemberBinding="{Binding Name}" />
</GridView>
</ListView.View>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
with the following result:
However, as you can see I can only select a Team. I can select an Actor within each list but this is not what you want (under running assumption you want a single list).
What was easier for me was to flatten the tree in C#. Assuming that I have a flat list of actors (regardless of team) I can do this:
<ListView ItemsSource="{Binding AllActors}"
SelectedItem="{Binding SelectedActor}" >
<ListView.View>
<GridView>
<GridViewColumn Header="Id" Width="80" DisplayMemberBinding="{Binding Id}"/>
<GridViewColumn Header="Name" Width="160"
DisplayMemberBinding="{Binding Name}" />
</GridView>
</ListView.View>
</ListView>
with the following result:
How you decide to flatten the list is up to you. Make sure to implement INPC on the Team class as well since modifying a Team inside an ObservableCollection<Team> won't tell the collection to update the binding without INPC.
If you are strictly following MVVM, I would possibly recommend creating some Dependency Propertys in your control's code behind and flatten the list there.
My rationale is that this operation is purely cosmetic. We aren't performing business logic or changing data when we flatten the list; we are only prepping it for how we want to view it. So, we shall put the code to that in the code-behind as opposed to the VM. This is a bit more difficult though since now you have to make sure you bind correctly from VM <-> DP <-> Control as opposed to VM <-> Control.

Is there a way to produce a scrollable gridlayout with dynamic content?

Ì want to write a software where there is a grid layout inside a scrollview.
I already hardcoded it, but I think I need to find a solution to make this dynamic! How can I manage to do this! I am pretty new to C# and WPF. I post a screenshot and my code so you can see what I am trying to achieve.
DataGrid is probably the best thing to use here, although you can also do it with a ListView using a GridView as the view:
<ListView ItemsSource="{Binding Items}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" />
<GridViewColumn Header="Gender" DisplayMemberBinding="{Binding Gender}" />
</GridView>
</ListView.View>
</ListView>

Control suggestions that function like a multi column listBox

I've looked at a bunch of different controls(ListView, GridView, etc.) and can't decide which makes the most sense for me to use.
I want something that looks and functions just like a listBox with the ability to select a row with a single click, except it would contain data with multiple columns.
I'm just looking for suggestions on which control to use and how I would go about having it select a row(whether it's a selectionMode or an onClick function or what). Since I'm new to these controls I'd like some direction on which tag to place those selection options, I think I can figure out the rest however.
Thanks :)
I like using the ListView that contains a GridView as it's view. Here's how I defined it in XAML:
<ListView Name="lstCurrentInvoices" Grid.Row="4" Margin="0,0,0,0" SelectionMode="Extended" ToolTip="Invoices included in invoice file." IsTabStop="True" TabIndex="8">
<ListView.View>
<GridView>
<GridViewColumn Width="40" Header="ID" DisplayMemberBinding="{Binding ClientId}"/>
<GridViewColumn Width="170" Header="Name" DisplayMemberBinding="{Binding ClientName}"/>
<GridViewColumn Width="80" Header="Date" DisplayMemberBinding="{Binding InvoiceDate}"/>
<GridViewColumn Width="40" Header="Frequency" DisplayMemberBinding="{Binding Frequency}" />
</GridView>
</ListView.View>
</ListView>
This way you kind of get the best of both worlds. In this example, you can have multiple rows selected. You can detect which rows have been selected and grab the objects from you data source. It's really quite powerful. Hope this helps

How can I link a ListView to ModelView?

I want to create a ListView with the names and the codes of the products in my ModelView but when I do:
<ListView ItemsSource="{Binding Path=Products}"
SelectedValue="{Binding Path=Product}" />
Only the Product Guids are showed.
How could I create a column with the Product.Name property and another onew with the Product.Code property?
Use a GridView. Perhaps like this:
<ListView ItemsSource="{Binding Products}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Code" DisplayMemberBinding="{Binding Code}"/>
</GridView>
</ListView.View>
</ListView>

ListView that imitates Windows Explorer

How can I make a ListView imitate the ListView in Windows Explorer on the right side. Like how can I get icons in the ListView and get the arrows?
You can find the icons by using Google Image search. To create the ListView, you could do something like this is XAML:
<Grid>
<ListView ItemsSource="{Binding ListViewSource}">
<ListView.View>
<GridView>
<GridViewColumn Width="25">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Icon}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding FileName}" Width="250"/>
<GridViewColumn Header="Date Modified" DisplayMemberBinding="{Binding DateModified}" Width="100"/>
<GridViewColumn Header="Type" DisplayMemberBinding="{Binding FileType}" Width="100"/>
<GridViewColumn Header="Size" DisplayMemberBinding="{Binding FileSize}" Width="100"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
The next step is to create an ObservableCollection to hold all of the items in your list and call it ListViewSource. You can populate this collection with actual FileDirectory information, or your own kind of list. You'll then want to create your logic as to what happens when you doubleclick on an item. Since your question didn't specify to what detail you want the ListView to work, I'm going to stop there. Let us know if you want it to behave just like Windows Explorer, and we'll try to help you out.

Categories