I have a DataGrid with around 500 rows. If I am scrolled down to let's row no. 200 and a new row is added to the top (beginning of the collection) it automatically scrolls up to the first row so I have to scroll down again manually.
How can I prevent this to happen?
Here is a sample app to illustrate the problem:
MainWindow.xaml.cs:
using System.Collections.ObjectModel;
using System.Windows;
namespace Testnamespace
{
public class TestClass
{
private int price;
private int qty;
public int Price { get => price; set => price = value; }
public int Qty { get => qty; set => qty = value; }
public TestClass(int price,int qty)
{
this.Price = price;
this.Qty = qty;
}
}
public partial class MainWindow : Window
{
private ObservableCollection<TestClass> data = new ObservableCollection<TestClass>() { new TestClass(3, 1), new TestClass(2, 1), new TestClass(1, 1) };
public ObservableCollection<TestClass> Data { get => data; set => data = value; }
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
private void InsertButton_Click(object sender, RoutedEventArgs e)
{
Data.Insert(0, new TestClass(Data.Count, 1));
}
}
}
XAML:
<Window x:Class="Testnamespace.MainWindow"
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:Testnamespace"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition MinHeight="80"/>
</Grid.RowDefinitions>
<Button x:Name="InsertButton" Content="Insert(0)" Click="InsertButton_Click" Grid.Column="0" Height="20" Width="50" Background="Red"/>
<DataGrid x:Name="dataGrid"
Grid.Row="1"
AutoGenerateColumns="False"
ItemsSource="{Binding Data, IsAsync=True}"
MaxWidth="800"
MaxHeight="1600"
Width="100"
Height="100"
>
<DataGrid.Columns>
<DataGridTextColumn Header="Price" Binding="{Binding Price}">
</DataGridTextColumn>
<DataGridTextColumn Header="Qty" Binding="{Binding Qty}">
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
This is how the app looks like:
Let's say you want to keep your eyes on price=1 to see if Qty has changed but in the meanwhile new rows are added (by clicking the Insert(0) button). In this case you lose focus because it keeps scrolling up, so you have to scroll down manually.
How can I prevent this to happen?
You could manually scroll another 18.96 DIP, which is the default Height of a DataGridRow:
private void InsertButton_Click(object sender, RoutedEventArgs e)
{
ScrollViewer scrollViewer = FindVisualChild<ScrollViewer>(dataGrid);
double offset = scrollViewer.VerticalOffset;
Data.Insert(0, new TestClass(Data.Count, 1));
if (offset > 0)
scrollViewer.ScrollToVerticalOffset(offset + 18.96);
}
private static T FindVisualChild<T>(Visual visual) where T : Visual
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)
{
Visual child = (Visual)VisualTreeHelper.GetChild(visual, i);
if (child != null)
{
T correctlyTyped = child as T;
if (correctlyTyped != null)
return correctlyTyped;
T descendent = FindVisualChild<T>(child);
if (descendent != null)
return descendent;
}
}
return null;
}
Related
I have a liveChart and am creating checkboxes for each item in a list. This list also has data for each series in liveCharts. How do I bind my dynamically created checkboxes with each individual LiveCharts.LineSeries from my data?
I've created the checkboxes:
<!-- Creating checkboxes by binding to list -->
<ListView ItemsSource="{Binding ElementItemList}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="600">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=ElementName}" />
<CheckBox IsChecked="{Binding Path=ElementIsSelected}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListView>
<!-- Display the chart -->
<Grid Grid.Row="1" x:Name="TestGrid"></Grid>
So I assume that you want to have a CheckBox representing each LineSeries in your SeriesCollection.
So I would have two public properties, one for the SeriesCollection and the other for the list of CheckBox controls.
public SeriesCollection SeriesCollection { get; set; }
public List<CheckBox> CheckBoxCollection { get; set; }
Then following is a function that mimics dynamically creating your LineSeries and CheckBox controls since you didn't provide that code. It is important to have some sort of a connection between the CheckBox controls and your line series, and in this case I decided to set LineSeries.Title and CheckBox.Name the same.
Also note that in order to have the CheckBox do something upon checking/unchecking, you'd need to register two events for each.
public void DynamicallyCreateStuff()
{
SeriesCollection = new SeriesCollection();
CheckBoxCollection = new List<CheckBox>();
var count = 3;
var val1 = new List<double>() { 1, 2, 3 };
var val2 = new List<double>() { 9, 5, 3 };
var val3 = new List<double>() { 1, 4, 9 };
for (int i = 1; i <= count; i++)
{
var name = string.Format("LineSeries{0}", i);
var checkBox = new CheckBox
{
Name = name,
Content = name,
Margin = new Thickness() { Left = 8, Top = 8, Right = 8, Bottom = 8 },
IsChecked = true
};
checkBox.Checked += DynamicCheckBoxChecked;
checkBox.Unchecked += DynamicCheckBoxUnchecked;
CheckBoxCollection.Add(checkBox);
var lineSeries = new LineSeries
{
Title = name
};
if (i == 1)
{
lineSeries.Values = new ChartValues<double>(val1);
}
else if (i == 2)
{
lineSeries.Values = new ChartValues<double>(val2);
}
else if (i == 3)
{
lineSeries.Values = new ChartValues<double>(val3);
}
SeriesCollection.Add(lineSeries);
}
}
In my case, I decided to have the corresponding series become visible/hidden upon clicking the CheckBox, so my check/uncheck methods look like this:
private void DynamicCheckBoxChecked(object sender, EventArgs e)
{
ShowHideSeries(sender, Visibility.Visible);
}
private void DynamicCheckBoxUnchecked(object sender, EventArgs e)
{
ShowHideSeries(sender, Visibility.Collapsed);
}
private void ShowHideSeries(object sender, Visibility visibility)
{
var checkBox = (CheckBox)sender;
var found = SeriesCollection.FirstOrDefault(x => x.Title == checkBox.Name);
if (found != null)
{
var series = (LineSeries)found;
series.Visibility = visibility;
}
}
I didn't use a ViewModel in order to save time and for the sake of simplicity, so my MainWindow constructor looks like this:
public MainWindow()
{
InitializeComponent();
DynamicallyCreateStuff();
DataContext = this;
}
And XAML is pretty bare bones here:
<Window x:Class="SOLineCharts.MainWindow"
....
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0"
ItemsSource="{Binding CheckBoxCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<lvc:CartesianChart Series="{Binding SeriesCollection}" Grid.Column="1"/>
</Grid>
</Window>
Result:
Upon loading:
Unchecking one check box:
Do you know why looking at the code in the XAML and ViewModel why a Data Grid wont update when the an item is added? I know the DataGrid binding is correct as will add an item if I add it by code, however I am adding a item via a view.
Also the getter of the ObservableCollection is getting hit every time I do add a item.
Thanks
------ Code ------
XAML
<Window x:Class="Importer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Product Group" Height="350" Width="721"
xmlns:VM="clr-namespace:Importer.ViewModels">
<Window.DataContext>
<VM:ProductsViewModel />
</Window.DataContext>
<Grid Margin="0,0,0.4,0.4">
<DataGrid x:Name="dgGrid" ColumnWidth="Auto" Margin="10,10,0,0" VerticalAlignment="Top"
ItemsSource="{Binding ProductCollection}" HorizontalAlignment="Left" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="150"/>
<DataGridTextColumn Binding="{Binding Description}" Header="Description" Width="400" />
</DataGrid.Columns>
</DataGrid>
<Button x:Name="btnAddProjectGroup" Content="Add Project Group" HorizontalAlignment="Left" Margin="10,277,0,0" VerticalAlignment="Top" Width="135" Click="btnAddProjectGroup_Click"/>
</Grid>
</Window>
VIEW 1 (that uses the XAML above)
public partial class MainWindow : Window
{
ProductsViewModel m_VM = new ProductsViewModel();
public MainWindow()
{
InitializeComponent();
}
private void btnAddProjectGroup_Click(object sender, RoutedEventArgs e)
{
// Open new window here to add a new project group
AddProductGroup dlg = new AddProductGroup(m_VM);
dlg.ShowDialog();
}
}
VIEW 2 - The view that passes the values to add to the collection
public partial class AddProductGroup : Window
{
ProductGroupBindable newProduct = new ProductGroupBindable();
ProductsViewModel viewModel = null;
public AddProductGroup(ProductsViewModel vm)
{
viewModel = vm;
InitializeComponent();
}
private void btnOK_Click(object sender, RoutedEventArgs e)
{
newProduct.Id = System.Guid.NewGuid();
newProduct.Name = txtName.Text;
newProduct.Description = txtDescription.Text;
viewModel.AddProduct(newProduct);
this.Close();
}
}
VIEWMODEL
private ObservableCollection<ProductGroupBindable> m_ProductCollection;
public ProductsViewModel()
{
if (m_ProductCollection == null)
m_ProductCollection = new ObservableCollection<ProductGroupBindable>();
}
public ObservableCollection<ProductGroupBindable> ProductCollection
{
get
{
return m_ProductCollection;
}
set
{
m_ProductCollection = value;
}
}
private ObservableCollection<ProductGroupBindable> Test()
{
m_ProductCollection.Add(new ProductGroupBindable { Description = "etc", Name = "test12" });
m_ProductCollection.Add(new ProductGroupBindable { Description = "etc", Name = "test123" });
return ProductCollection;
}
public void AddProduct(ProductGroupBindable newProduct)
{
m_ProductCollection.Add(newProduct);
//NotifyPropertyChanged("ProductCollection");
}
You set DataContext in XAML:
<Window.DataContext>
<VM:ProductsViewModel />
</Window.DataContext>
and your dialog works on another instance of ProductsViewModel which you create in code:
ProductsViewModel m_VM = new ProductsViewModel();
Easiest workaround would be to pass DataContext to your AddProductGroup dialog:
AddProductGroup dlg = new AddProductGroup(this.DataContext as ProductsViewModel);
EDIT
or instead of setting DataContext in XAML do set it in code:
public MainWindow()
{
InitializeComponent();
this.DataContext = m_VM;
}
I've a ContentControl that has its Content set to a TabControl using a DataTemplateSelector. The items that the ItemsSource is bound to have a bool IsSelected property that the IsSelected property of the Tabs are linked to using a TwoWay Setter in a Style.
I've tried to recreate the problem in a seperate test app but can't recreate it - the Tabs are selected as expected based on the items IsSelected property.
What I am seeing in the main application where this problem is occuring is: alternately the first tab is selected then no tab is selected each time the ContentControl has its DataContext set. This behaviour can be seen in the following example by removing the Setter.
I need some guidance on the best way to approach debugging this. I can make the main application source available if someone wants to take a look at that.
<Window x:Class="SelectedTab.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SelectedTab"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:NodeViewDataTemplateSelector x:Key="NodeViewDataTemplateSelector" />
<DataTemplate x:Key="Tab">
<TabControl ItemsSource="{Binding Nodes}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Text}"></TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<!--Remove this Setter to see the behaviour that I am seeing in the main application-->
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"></Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding }" ContentTemplateSelector="{StaticResource NodeViewDataTemplateSelector}" ></ContentControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Content="English" Click="ButtonOne_OnClick"/>
<Button Content="German" Click="ButtonTwo_OnClick"/>
<Button Content="French" Click="ButtonThree_OnClick"/>
</StackPanel>
<ContentControl Name="Content" Grid.Row="1" Content="{Binding }" ContentTemplateSelector="{StaticResource NodeViewDataTemplateSelector}" ></ContentControl>
</Grid>
</Window>
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
namespace SelectedTab
{
public partial class MainWindow : Window
{
private Node nodeOne;
private Node nodeTwo;
private Node nodeThree;
public MainWindow()
{
InitializeComponent();
nodeOne = new Node();
nodeOne.Nodes = new ObservableCollection<Node>();
nodeOne.Nodes.Add(new Node { Text = "One" });
nodeOne.Nodes.Add(new Node { Text = "Two", IsSelected = true });
nodeOne.Nodes.Add(new Node { Text = "Three" });
nodeOne.Nodes.Add(new Node { Text = "Four" });
nodeTwo = new Node();
nodeTwo.Nodes = new ObservableCollection<Node>();
nodeTwo.Nodes.Add(new Node { Text = "Ein" });
nodeTwo.Nodes.Add(new Node { Text = "Zwei" });
nodeTwo.Nodes.Add(new Node { Text = "Drei", IsSelected = true });
nodeTwo.Nodes.Add(new Node { Text = "Vier" });
nodeThree = new Node();
nodeThree.Nodes = new ObservableCollection<Node>();
nodeThree.Nodes.Add(new Node { Text = "Un" });
nodeThree.Nodes.Add(new Node { Text = "Deux" });
nodeThree.Nodes.Add(new Node { Text = "Troix" });
nodeThree.Nodes.Add(new Node { Text = "Quatre", IsSelected = true });
}
private void ButtonOne_OnClick(object sender, RoutedEventArgs e)
{
Content.DataContext = null;
Content.DataContext = nodeOne;
}
private void ButtonTwo_OnClick(object sender, RoutedEventArgs e)
{
Content.DataContext = null;
Content.DataContext = nodeTwo;
}
private void ButtonThree_OnClick(object sender, RoutedEventArgs e)
{
Content.DataContext = null;
Content.DataContext = nodeThree;
}
}
public class Node
{
public string Text { get; set; }
public bool IsSelected { get; set; }
public ObservableCollection<Node> Nodes { get; set; }
}
class NodeViewDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
Node node = item as Node;
if (node != null && node.Nodes != null)
{
return Application.Current.MainWindow.FindResource("Tab") as DataTemplate;
}
return null;
}
}
}
Is there anyway to speed-test which of the following resolve faster in XAML for colors:
Named Color: Orange
Hex: #ff6600
Shorthand Hex: #f60
Known Color: DarkOrange
This is not just a curiosity or an academic exercise. I have tons and tons of animations and colors that change colors many many times, on a large scale. I need to eek out ever bit of time-saving I can.
Looking for a way to test the above against each other for Silverlight. Any ideas?
I couldn't think of a definitive way to test this, but I put something together that may give you a hint. Effectively, I bound the color of a rectangle to a (string) SelectedColor property of a class that raised the PropertyChanged event every time it changed. Then I created four different List collections that had colors defined in all the different ways that you described, and in a background thread looped through them each some 10000 times, setting the SelectedColor property on each loop by dispatching to back to the UI thread. The complicated part was just keeping all the threads synchronized properly, and there's at least one hack in there where I loop every 20 ms until I saw that the previous task had finished. But it at least forces the UI thread to parse a color string, which is presumably what you're interested in.
At any rate, to the extent that this testing methodology is valid, it looks like using the "hex" notation is perhaps slightly faster than the others, though not by much. The average results on my machine after 10 test runs:
Hex: 4596 ms
Named: 4609 ms
Shorthand Hex: 5018 ms
Known Colors: 5065 ms
Just for reference, here's the code-behind:
public partial class MainPage : UserControl, INotifyPropertyChanged
{
public MainPage()
{
InitializeComponent();
namedColors.Add("Black");
namedColors.Add("Black");
namedColors.Add("Brown");
namedColors.Add("Cyan");
namedColors.Add("DarkGray");
namedColors.Add("Gray");
namedColors.Add("Green");
namedColors.Add("LightGray");
namedColors.Add("Magenta");
namedColors.Add("Orange");
hexColors.Add(Colors.Black.ToString());
hexColors.Add(Colors.Black.ToString());
hexColors.Add(Colors.Brown.ToString());
hexColors.Add(Colors.Cyan.ToString());
hexColors.Add(Colors.DarkGray.ToString());
hexColors.Add(Colors.Gray.ToString());
hexColors.Add(Colors.Green.ToString());
hexColors.Add(Colors.LightGray.ToString());
hexColors.Add(Colors.Magenta.ToString());
hexColors.Add(Colors.Orange.ToString());
knownColors.Add("LawnGreen");
knownColors.Add("LemonChiffon");
knownColors.Add("LightBlue");
knownColors.Add("LightCoral");
knownColors.Add("LightCyan");
knownColors.Add("LightGoldenrodYellow");
knownColors.Add("LightGray");
knownColors.Add("LightGreen");
knownColors.Add("LightPink");
knownColors.Add("LightSalmon");
shorthandHexColors.Add("#000");
shorthandHexColors.Add("#111");
shorthandHexColors.Add("#222");
shorthandHexColors.Add("#333");
shorthandHexColors.Add("#444");
shorthandHexColors.Add("#555");
shorthandHexColors.Add("#666");
shorthandHexColors.Add("#777");
shorthandHexColors.Add("#aaa");
shorthandHexColors.Add("#bbb");
LayoutRoot.DataContext = this;
}
private List<string> namedColors = new List<string>();
private List<string> hexColors = new List<string>();
private List<string> shorthandHexColors = new List<string>();
private List<string> knownColors = new List<string>();
private List<double> namedColorDurations = new List<double>();
private List<double> hexColorDurations = new List<double>();
private List<double> shorthandHexColorDurations = new List<double>();
private List<double> knownColorDurations = new List<double>();
private string selectedColor;
public string SelectedColor
{
get
{
return selectedColor;
}
set
{
if (selectedColor != value)
{
selectedColor = value;
RaisePropertyChanged("SelectedColor");
}
}
}
private void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
private bool isTesting = false;
private void testButton_Click(object sender, RoutedEventArgs e)
{
if (isTesting)
{
return;
}
else
{
isTesting = true;
}
ThreadPool.QueueUserWorkItem(o =>
{
AutoResetEvent resetEvent = new AutoResetEvent(false);
for (int i = 0; i < 10; i++)
{
TestColors(resetEvent, hexColors, lstHexColorDuration, hexColorDurations);
resetEvent.WaitOne();
TestColors(resetEvent, namedColors, lstNamedColorDuration, namedColorDurations);
resetEvent.WaitOne();
TestColors(resetEvent, shorthandHexColors, lstShorthandHexDuration, shorthandHexColorDurations);
resetEvent.WaitOne();
TestColors(resetEvent, knownColors, lstKnownColorDuration, knownColorDurations);
resetEvent.WaitOne();
}
Dispatcher.BeginInvoke(() =>
{
lstHexColorDuration.Items.Add(hexColorDurations.Average().ToString());
lstNamedColorDuration.Items.Add(namedColorDurations.Average().ToString());
lstShorthandHexDuration.Items.Add(shorthandHexColorDurations.Average().ToString());
lstKnownColorDuration.Items.Add(knownColorDurations.Average().ToString());
});
isTesting = false;
});
}
private int testsFinished = 0;
private void TestColors(AutoResetEvent resetEvent, List<string> colorList, ListBox resultListBox, List<double> results)
{
ThreadPool.QueueUserWorkItem(o =>
{
var start = DateTime.Now;
int testPasses = 10000;
testsFinished = 0;
for (int i = 0; i < testPasses; i++)
{
foreach (string color in colorList)
{
SetColor(color);
}
}
while (testsFinished < testPasses * colorList.Count)
{
Thread.Sleep(20);
}
DateTime finish = DateTime.Now;
results.Add((finish - start).TotalMilliseconds);
Dispatcher.BeginInvoke(() => resultListBox.Items.Add((DateTime.Now - start).ToString()));
resetEvent.Set();
});
}
private void SetColor(string color)
{
Dispatcher.BeginInvoke(() =>
{
SelectedColor = color;
Interlocked.Increment(ref testsFinished);
});
}
}
And here's the XAML proper:
<UserControl
x:Class="SilverlightScratch.MainPage"
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:SilverlightScratch"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500">
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Height="30" Width="100" x:Name="testButton" Content="Start Test" Click="testButton_Click" />
<Rectangle Height="30" Width="100" Fill="{Binding SelectedColor}" Grid.Row="2" />
<StackPanel Orientation="Horizontal" Grid.Row="1">
<StackPanel>
<TextBlock Text="Named Color Duration" />
<ListBox x:Name="lstNamedColorDuration" />
</StackPanel>
<StackPanel>
<TextBlock Text="Hex Color Duration" />
<ListBox x:Name="lstHexColorDuration" />
</StackPanel>
<StackPanel>
<TextBlock Text="Shorthand Hex Duration" />
<ListBox x:Name="lstShorthandHexDuration" />
</StackPanel>
<StackPanel>
<TextBlock Text="Known Colors Duration" />
<ListBox x:Name="lstKnownColorDuration" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
How can I set paging in a wpf DataGrid?
The code project article above is quite good for getting this done with ADO tables. While for most applications, it is likely to work great, and is easy to understand, there is a more "WPF-zen-like" way to do it as well, and that would be using CollectionViews. The advantage of using a CollectionView compared to the example above is that it is a bit more general in terms of what data you're putting in your grid (not that you can't make that example more general), and it fits in well with the general WPF databinding model. It gives you a place to support common operations like sorting, grouping, etc, if you need those.
I put together a very short example of a barely working PagingCollectionView bound to the .NET 4.0 DataGrid control. While the example itself is pretty trivial, it shows you at least how to get started, as you have a proxy around the actual collection of data on which you can execute simple operations like MoveToNextPage and MoveToPreviousPage.
Here's the C# for both the Window event handling and the PagingCollectionView:
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;
namespace GridPagingExample
{
public partial class MainWindow : Window
{
private readonly PagingCollectionView _cview;
public MainWindow()
{
InitializeComponent();
this._cview = new PagingCollectionView(
new List<object>
{
new { Animal = "Lion", Eats = "Tiger" },
new { Animal = "Tiger", Eats = "Bear" },
new { Animal = "Bear", Eats = "Oh my" },
new { Animal = "Wait", Eats = "Oh my isn't an animal" },
new { Animal = "Oh well", Eats = "Who is counting anyway" },
new { Animal = "Need better content", Eats = "For posting on stackoverflow" }
},
2
);
this.DataContext = this._cview;
}
private void OnNextClicked(object sender, RoutedEventArgs e)
{
this._cview.MoveToNextPage();
}
private void OnPreviousClicked(object sender, RoutedEventArgs e)
{
this._cview.MoveToPreviousPage();
}
}
public class PagingCollectionView : CollectionView
{
private readonly IList _innerList;
private readonly int _itemsPerPage;
private int _currentPage = 1;
public PagingCollectionView(IList innerList, int itemsPerPage)
: base(innerList)
{
this._innerList = innerList;
this._itemsPerPage = itemsPerPage;
}
public override int Count
{
get
{
if (this._innerList.Count == 0) return 0;
if (this._currentPage < this.PageCount) // page 1..n-1
{
return this._itemsPerPage;
}
else // page n
{
var itemsLeft = this._innerList.Count % this._itemsPerPage;
if (0 == itemsLeft)
{
return this._itemsPerPage; // exactly itemsPerPage left
}
else
{
// return the remaining items
return itemsLeft;
}
}
}
}
public int CurrentPage
{
get { return this._currentPage; }
set
{
this._currentPage = value;
this.OnPropertyChanged(new PropertyChangedEventArgs("CurrentPage"));
}
}
public int ItemsPerPage { get { return this._itemsPerPage; } }
public int PageCount
{
get
{
return (this._innerList.Count + this._itemsPerPage - 1)
/ this._itemsPerPage;
}
}
private int EndIndex
{
get
{
var end = this._currentPage * this._itemsPerPage - 1;
return (end > this._innerList.Count) ? this._innerList.Count : end;
}
}
private int StartIndex
{
get { return (this._currentPage - 1) * this._itemsPerPage; }
}
public override object GetItemAt(int index)
{
var offset = index % (this._itemsPerPage);
return this._innerList[this.StartIndex + offset];
}
public void MoveToNextPage()
{
if (this._currentPage < this.PageCount)
{
this.CurrentPage += 1;
}
this.Refresh();
}
public void MoveToPreviousPage()
{
if (this._currentPage > 1)
{
this.CurrentPage -= 1;
}
this.Refresh();
}
}
}
Here's the XAML for the window:
<Window x:Class="GridPagingExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Label Grid.Row="0" Margin="2">
<Label.Content>
<Binding Path="CurrentPage">
<Binding.StringFormat>Current Page: {0}</Binding.StringFormat>
</Binding>
</Label.Content>
</Label>
<Button Content="Next" Click="OnNextClicked" Margin="2"/>
<Button Content="Previous" Click="OnPreviousClicked" Margin="2"/>
</StackPanel>
<DataGrid ItemsSource="{Binding}" Grid.Row="1">
<DataGrid.Columns>
<DataGridTextColumn Header="Animal" Width="*" Binding="{Binding Animal}"/>
<DataGridTextColumn Header="Eats" Width="*" Binding="{Binding Eats}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
You could build out this CollectionView to support more functionality, some trivial, like MoveToLastPage and MoveToFirstPage, and some that will take some more thought about how you want it to behave, such as sorting. Hope it is helpful.