I am struggling in very beginning with WPF and LiveCharts.
I am trying to implement the Starting Example (https://lvcharts.net/App/examples/v1/Wpf/Components) but couldn't understand how it works (or better to say not working for me) and there to to place the snippet into a WPF project.
With XAML it is ok, I just put the example row into the Grid of MainWindow.xaml and while debugging it shows the element
<lvc:CartesianChart Series="{Binding SeriesCollection}" />
But then I did not get into C# part
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<double> { 3, 5, 7, 4 }
},
new ColumnSeries
{
Values = new ChartValues<decimal> { 5, 6, 2, 7 }
}
};
When I add it to public partial class MainWindow it is interpreted wrong.
And I do not understand what happen in the first row:
SeriesCollection = new SeriesCollection
As I understand, we are to create an object with a constructor which add LineSeries and ColumnSeries values to an object of class SeriesCollection.
So it shold be like
SeriesCollection mySeries = new SeriesCollection()
This one is compiling properly, but anyway I couldn't get a binding to mySeries object:
No DataContext found for binding 'mySeries' for my "updated" program
No DataContext found for binding 'SeriesCollection' for initital example
It appears the binding requires a get/set e.g.
public SeriesCollection SeriesCollection { get; set; }
You also require the DataContext property set in your constructor:
DataContext = this;
Otherwise the binding fails silently at runtime.
It appears the getting started guide is broken at https://lvcharts.net/App/examples/v1/wpf/Components. I had to use the Wayback Machine to find a working copy of the getting started guide: https://web.archive.org/web/20190717052904/https://lvcharts.net/App/examples/v1/wpf/Basics
Related
I'm trying to get into Xamarin development and followed Microsofts video tutorial
https://www.youtube.com/watch?v=OPXVqdRXZms&list=PLdo4fOcmZ0oU10SXt2W58pu2L0v2dOW-1&index=9
Currently I would like to populate my ListView with some basic labels. So first the following code works fine for me. I created a custom ViewCell and assign it to the ListView as the ItemTemplate
public class MasterPage : ContentPage
{
public ListView MasterPageNavigationItemsView { get; }
public MasterPage()
{
// ...
MasterPageNavigationItemsView = new ListView()
{
ItemTemplate = new DataTemplate(() => new MasterPageItemViewCell()),
SeparatorVisibility = SeparatorVisibility.None
};
MasterPageNavigationItemsView.SetBinding(ListView.ItemsSourceProperty, nameof(MasterViewModel.MasterPageItemsCollection));
// ...
}
}
internal class MasterPageItemViewCell : ViewCell
{
public MasterPageItemViewCell()
{
Label label = new Label();
label.SetBinding(Label.TextProperty, nameof(MasterPageItem.Title));
View = label;
}
}
I would prefer to create a custom DataTemplate as they did in the video tutorial. I found the code on Github
https://github.com/codemillmatt/xamarin-101/blob/8271814c7ebdd41387e20ed33b3dfbdcd54409be/coded-ui-navigation/CodedUINav/Views/MainPage.cs#L88-L112
So instead of doing ItemTemplate = new DataTemplate(() => new MasterPageItemViewCell()), I would like to do ItemTemplate = new MasterPageItemTemplate(),
which results in the class
internal class MasterPageItemTemplate : DataTemplate
{
public MasterPageItemTemplate() : base(LoadTemplate)
{
}
private static Label LoadTemplate()
{
Label titleLabel = new Label();
titleLabel.SetBinding(Label.TextProperty, nameof(MasterPageItem.Title));
return titleLabel;
}
}
So I took the code from Github and modified it a little bit. When I run the code the labels content is empty and when I click on it the application crashes.
How can I fix the MasterPageItemTemplate?
Update
I found another sample that makes use of view cells
https://github.com/xamarin/xamarin-forms-samples/tree/master/WorkingWithListview/WorkingWithListview/Custom
so I think I should follow this and use this code for now
ItemTemplate = new DataTemplate(typeof(MasterPageItemViewCell)),
Data items in a ListView are called cells. Each cell corresponds to a row of data. There are built-in cells to choose from, or you can define your own custom cell. Both built-in and custom cells can be used/defined in XAML or code.The child of an inline DataTemplate must be of, or derive from, type Cell.Here in your first link sample, the ListView.ItemTemplate property is set to a DataTemplate that's created from a custom type that defines the cell appearance. The custom type derive from type ViewCell,but in your codes custom DataTemplate return a Label,it will not work.
you could refer to Creating DataTemplate
And in the sample of your second link,it use CollectionView.You could nest markup inside a DataTemplate tag to create a View.
Note :When using CollectionView, never set the root element of your DataTemplate objects to a ViewCell. This will result in an exception being thrown because CollectionView has no concept of cells.
I have a form that has a dynamic amount of datagrids that are brought in programmatically each one on a new tabpage.
My problem is that I need to change the Header of each column. I have tried doing it through a method
DataGridForSupplier.Columns[0].Header = "123";
but that keeps crashing with an error:
Index was out of range. Must be non-negative and less than the size of the collection
Turns out the problem is that the grid wasn't finished loading. So after waiting for all tabpage to load and add data to all the grids , even then the code
DataGridForSupplier.Columns[0].Header = "123";
would still crash. If the tabs are left to load on their own with no header tampering then the datagrid shows fine.
I would just LOVE to do this in XAML problem is that seeing that I don't know how many grids will load at run time I tried doing this at the back. So I'm open to any solution at this point. I tried finding a solution that would incorporate something that would 'theme' all the datagrids. Luckily all the datagrids headers will repeat across all tabs. So header 1 on tabpage 1 - 10 will be the same. Header 2 on tabpage 1 - 10 will be the same
Something like
<DataGridTemplateColumn.Header>
<TextBlock Text="{Binding DataContext.HeaderNameText, RelativeSource=>> RelativeSource AncestorType={x:Type DataGrid}}}" />
</DataGridTemplateColumn.Header>
but this needs to repeat for every Grid. This seems to escape me at the moment.
Any help would be welcome.
A rather lengthy answer, but this solution does not require any additional libraries, 3rd party tools, etc. You can expand it as you want later such as for adding hooks to mouse-move/over/drag/drop/focus, etc. First the premise on subclassing which I found out early in my learning WPF. You can not subclass a xaml file, but can by a .cs code file. In this case, I subclassed the DataGrid to MyDataGrid. Next, I created an interface for a known control type to ensure contact of given functions/methods/properties. I have stripped this version down to cover just what you need to get.
The interface below is just to expose any class using this interface MUST HAVE A METHOD called MyDataGridItemsChanged and expects a parameter of MyDataGrid.. easy enough
public interface IMyDataGridSource
{
void MyDataGridItemsChanged(MyDataGrid mdg);
}
Now, declaring in-code a MyDataGrid derived from DataGrid. In this class, I am adding a private property of type IMyDataGridSource to grab at run-time after datagrids are built and bound.
public class MyDataGrid : DataGrid
{
// place-holder to keep if so needed to expand later
IMyDataGridSource boundToObject;
public MyDataGrid()
{
// Force this class to trigger itself after the control is completely loaded,
// bound to whatever control and is ready to go
Loaded += MyDataGrid_Loaded;
}
private void MyDataGrid_Loaded(object sender, RoutedEventArgs e)
{
// when the datacontext binding is assigned or updated, see if it is based on
// the IMyDataGridSource object. If so, try to type-cast it and save into the private property
// in case you want to add other hooks to it directly, such as mouseClick, grid row changed, etc...
boundToObject = DataContext as IMyDataGridSource;
}
// OVERRIDE the DataGrid base class when items changed and the ItemsSource
// list/binding has been updated with a new set of records
protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
{
// do whatever default behavior
base.OnItemsChanged(e);
// if the list is NOT bound to the data context of the IMyDataGridSource, get out
if (boundToObject == null)
return;
// the bound data context IS of expected type... call method to rebuild column headers
// since the "boundToObject" is known to be of IMyDataGridSource,
// we KNOW it has the method... Call it and pass this (MyDataGrid) to it
boundToObject.MyDataGridItemsChanged(this);
}
}
Next into your form where you put the data grid. You will need to add an "xmlns" reference to your project so you can add a "MyDataGrid" instead of just "DataGrid". In my case, my application is called "StackHelp" as this is where I do a variety of tests from other answers offered. The "xmlns:myApp" is just making an ALIAS "myApp" to the designer to it has access to the classes within my application. Then, I can add
<Window x:Class="StackHelp.MyMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myApp="clr-namespace:StackHelp"
Title="Main Window" Height="700" Width="900">
<StackPanel>
<!-- adding button to the main window to show forced updated list only -->
<Button Content="Refresh Data" Width="100"
HorizontalAlignment="Left" Click="Button_Click" />
<myApp:MyDataGrid
ItemsSource="{Binding ItemsCollection, NotifyOnSourceUpdated=True}"
AutoGenerateColumns="True" />
</StackPanel>
</Window>
Now, into the MyMainWindow.cs code-behind
namespace StackHelp
{
public partial class MyMainWindow : Window
{
// you would have your own view model that all bindings really go to
MyViewModel VM;
public MyMainWindow()
{
// Create instance of the view model and set the window binding
// to this public object's DataContext
VM = new MyViewModel();
DataContext = VM;
// Now, draw the window and controls
InitializeComponent();
}
// for the form button, just to force a refresh of the data.
// you would obviously have your own method of querying data and refreshing.
// I am not obviously doing that, but you have your own way to do it.
private void Button_Click(object sender, RoutedEventArgs e)
{
// call my viewmodel object to refresh the data from whatever
// data origin .. sql, text, import, whatever
VM.Button_Refresh();
}
}
}
Finally to my sample ViewModel which incorporates the IMyDataGridSource
public class MyViewModel : IMyDataGridSource, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void RaisePropertyChanged(string propertyName)
{ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); }
public ObservableCollection<OneItem> ItemsCollection { get; set; }
= new ObservableCollection<OneItem>();
public void Button_Refresh()
{
ItemsCollection = new ObservableCollection<OneItem>
{
new OneItem{ DayName = "Sunday", DayOfWeek = 0},
new OneItem{ DayName = "Monday", DayOfWeek = 1},
new OneItem{ DayName = "Tuesday", DayOfWeek = 2},
new OneItem{ DayName = "Wednesday", DayOfWeek = 3},
new OneItem{ DayName = "Thursday", DayOfWeek = 4},
new OneItem{ DayName = "Friday", DayOfWeek = 5 },
new OneItem{ DayName = "Saturday", DayOfWeek = 6 }
};
RaisePropertyChanged("ItemsCollection");
}
// THIS is the magic hook exposed that will allow you to rebuild your
// grid column headers
public void MyDataGridItemsChanged(MyDataGrid mdg)
{
// if null or no column count, get out.
// column count will get set to zero if no previously set grid
// OR when the items grid is cleared out. don't crash if no columns
if (mdg == null)
return;
mdg.Columns[0].Header = "123";
}
}
Now, taking this a step further. I don't know how you manage your view models and you may have multiple grids in your forms and such. You could create the above MyViewModel class as a smaller subset such as MyDataGridManager class. So each datagrid is bound to its own MyDataGridManager instance. It has its own querying / populating list for the grid, handling its own rebuild column headers, mouse clicks (if you wanted to expand), record change selected, etc.
Hope this helps you some. Again, this does not require any other 3rd party libraries and you can extend as you need. I have personally done this and more to the data grid and several other controls for certain specific pattern handling.
I am working with two subclasses of FrameworkElement and trying to bind their widths and heights, so that when I set the Width or Height of one of the elements it updates the other element as well. Yet I'm setting something incorrectly with the bindings, as when I use Visual Studio's WPF Live Visual Tree to see the properties of the two FrameworkElements, I see that one has its Width and Height set correctly, while the other's is set to NAN. The code and snippets demonstrating the problem are below. What am I doing wrong?
Binding Source
Binding Target
Code to create binding
using System.Collections.Immutable;
using System.Windows;
using System.Windows.Data;
using Telerik.Windows.Controls.ChartView;
namespace CustomYAxis
{
public class ChartYAxisAnnotation : CartesianCustomAnnotation
{
private readonly CustomYAxisView _annotationContent;
public ChartYAxisAnnotation()
{
Content = _annotationContent = new CustomYAxisView();
// These bindings aren't working
var widthBinding = new Binding(nameof(WidthProperty))
{
Source = this,
};
var heightBinding = new Binding(nameof(HeightProperty))
{
Source = this
};
_annotationContent.SetBinding(WidthProperty, widthBinding);
_annotationContent.SetBinding(HeightProperty, heightBinding);
}
}
}
nameof(WidthProperty) actually returns "WidthProperty"
what you want to do is bind the property which name is "Width", same goes for HeightProperty
Therefore you should change nameof(WidthProperty) to WidthProperty.Name or "Width"
I have the following code that creates a binding in code-behind. However, it does not seem to work (when the text in PageMarginTextBox is changed, nothing happens, and when the app is loaded, the Padding of newPage is not set to the text of PageMarginTextBox). To make matters worse, no Exceptions are thrown at all. All elements have been defined earlier on.
Binding pageMarginBinding = new Binding
{
Source = PageMarginTextBox,
Path = new PropertyPath("Text"),
};
newPage.SetBinding(ContentControl.PaddingProperty, pageMarginBinding);
//PageMarginTextBox.Text determines the Padding of newPage
How can I fix this? Any solutions would be appreciated. Thanks!
You are trying to Bind PaddingProperty to text. Padding property is of type Thickness and Text property is String.
I am not sure whether you want to bind padding / text, just giving you an idea if you want to bind the Padding.
Binding pageMarginBinding = new Binding
{
Source = PageMarginTextBox,
Path = new PropertyPath("Padding"),
};
newPage.SetBinding(ContentControl.PaddingProperty, pageMarginBinding);
Your problem is because you are trying to assign a string to a Thickness. In XAML the compiler internally translates the string "0,0,2,2" to Thickness object. But in code behind you have to write the code for the conversion yourself.
ThicknessConverter myThicknessConverter = new ThicknessConverter();
PageThickness= (Thickness)myThicknessConverter.ConvertFromString(PageMarginTextBox.Text);
Then you have to bind this to your control. Again this is only half the solution. You need to wire this up with the Binding.
private Thickness _pageThickness;
public Thickness PageThickness
{
get
{
return _pageThickness;
}
set
{
_pageThickness = value;
NotifyPropertyChanged("PageThickness");
}
Then you probably can bind it in XAML
I have a hard time getting OxyPlot to display my data in my standalone WPF application (I use caliburn micro, and follow the MVVM pattern).
So in my Xaml I have the following:
<UserControl ...
xmlns:oxy="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf">
and later
<oxy:Plot Title="Winnings of Selected Player" Model="{Binding Graph1}"/>
In my ViewModel, I seem to have the choice to either include using OxyPlot; or using OxyPlot.Wpf;. If I do the former, I can define my PlotModel as follows:
private PlotModel _graph1;
public PlotModel Graph1 {
get { return _graph1;}
set {
_graph1 = value;
Graph1.RefreshPlot(true);
}
}
public MyViewModel() {
Graph1 = new PlotModel();
var FirstSeries = new LineSeries();
FirstSeries.Points.Add(new DataPoint(1,2));
FirstSeries.Points.Add(new DataPoint(1,2));
}
but my view does not display anything (in fact, I don't even see an 'empty graph', or the title in the view). I have tried scattering the RefreshPlot command all over the place, too ...
So then, I figure to try using OxyPlot.Wpf; instead. Then, however, I cannot add Points to my LineSeries - here's a screenshot of my IntelliSense ...
!(http://imageshack.com/a/img30/2441/cvqy.png)
So how do I populate data into my LineSeries using OxyPlot.Wpf? By the way, I still don't see an empty graph, even when I compile without adding points to the LineSeries. All examples I have looked at do this, or they write code in tha .xaml.cs code-behind file which I don't want to do.
EDIT: As dellywheel mentiones, I forgot to add the LineSeries to my PlotModel above when asking the question, so the constructor above should contain the line
Graph1.Series.Add(FirstSeries);
But that was just in typing the question, ofc not the real problem ...
You havent added the LineSeries to the Graph and the Graph is Graph1 not Graph
Try
public MyViewModel(){
Graph1 = new PlotModel();
var firstSeries = new LineSeries();
firstSeries.Points.Add(new DataPoint(1, 2));
firstSeries.Points.Add(new DataPoint(1, 2));
Graph1.Series.Add(firstSeries);
}
Hope that helps