What are the factors that virtualizingstackpanel consider when it decides visualizing items around the visible item?
Ex: Having a listview, when viewing item 7, item 6& 8 will be visualized too although they are not seen.
How can limit visualized items, so that ONLY visible item is visualized?
I have solved the problem by overriding MeasureOverride function, we already purchased the book Sheridan has mentioned in his answer, depending on virtualization chapter, here is what I did to my class that extends VirtualizingStackPanel : and it worked!
private ItemsControl ItemsOwner { get; set; }
private int StartIndex { get; set; }
private int EndIndex { get; set; }
protected override void OnInitialized(EventArgs e)
{
ItemsOwner = ItemsControl.GetItemsOwner(this) as ItemsControl;
}
protected override Size MeasureOverride(Size availableSize)
{
ItemsControl itemsControl = ItemsControl.GetItemsOwner(this);
// we can set StartIndex& EndIndex to mimic
// VirtualizingStackPanel.CacheSize in .Net 4.5
// for my problem, I just fixed them at the index of item to be shown
StartIndex = PagesView.Instance.SelectedIndex;
EndIndex = StartIndex;
// Virtualize items
IItemContainerGenerator generator = ItemsOwner.ItemContainerGenerator;
GeneratorPosition startPos = generator.GeneratorPositionFromIndex(StartIndex);
int childIndex = startPos.Offset == 0 ? startPos.Index : startPos.Index + 1;
using (generator.StartAt(startPos, GeneratorDirection.Forward, true))
{
for (int i = StartIndex; i <= EndIndex; i++, childIndex++)
{
bool isNewlyRealized;
UIElement child = generator.GenerateNext(out isNewlyRealized) as UIElement;
if (isNewlyRealized)
{
if (childIndex >= InternalChildren.Count)
{
AddInternalChild(child);
}
else
{
InsertInternalChild(childIndex, child);
}
generator.PrepareItemContainer(child);
}
}
}
//DumpGeneratorContent();
// Measure
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
}
// Clean up
CleanupItems();
return availableSize;
}
private void CleanupItems()
{
IItemContainerGenerator generator = ItemsOwner.ItemContainerGenerator;
for (int i = InternalChildren.Count - 1; i >= 0; i--)
{
GeneratorPosition position = new GeneratorPosition(i, 0);
int itemIndex = generator.IndexFromGeneratorPosition(position);
if (itemIndex < StartIndex || itemIndex > EndIndex)
{
generator.Remove(position, 1);
RemoveInternalChildRange(i, 1);
}
}
}
Virtualization is quite a complicated subject, but I have a book that describes it well. Furthermore, this book also shows how to implement custom virtualization, which you may need to implement to achieve your goal. Luckily for you, I found that someone has posted a PDF of the book online and you can find it by clicking on this link.
The virtualization section starts on page 129, but it is well worth reading the rest of it too as it has some very interesting stuff in it.
Related
In my Metro application, I have a data source containing a certain number of items (say 25). I have a ListView that presents those items. My problem is that the ListView have a size that allows it to display, say, 6.5 items, so that the last item it displays is cut in half. If the resolution changes, it might display 4 items, or 8.2 items, or whatever. What I'd like is that the ListView shows exactly the number of items that fits in the height of the control, instead of clipping the last item.
Right now, I see two possible half-solutions, none of which is optimal:
Set the height of the ListView to a fixed height that is a multiple of the item size. This does not scale with changes in resolution.
Limit the number of items in the data source. This does not scale either.
So my question is, how can I get the ListView to only display complete items (items where all edges are inside the viewport/listview), and hide the rest?
ListView inherits from ItemsControl,
so one more optimized solution consists in injecting custom panel (overriding measure by custom clipping display) in ItemsPanel
something like this(sorry, i did not try to compile):
protected override Size MeasureOverride(Size constraint)
{
if (this.VisualChildrenCount <= 0)
return base.MeasureOverride(constraint);
var size = ne Size(constraint.Width,0);
for(int i = 0; i < this.visualChildrenCount; i++)
{
child.Measure(size);
if(size.height + child.desiredSize > constraint.height)
break;
size.Height += child.DesiredSize;
}
return size;
}
My final solution was to combine the suggestions of #NovitchiS and #JesuX.
I created a stack panel override, and listened to the LayoutUpdated event. My final solution:
class HeightLimitedStackPanel : StackPanel
{
public HeightLimitedStackPanel() : base()
{
this.LayoutUpdated += OnLayoutUpdated;
}
double GetSizeOfVisibleChildren(double parentHeight)
{
double currentSize = 0;
bool hasBreaked = false;
for (int i = 0; i < Children.Count; i++)
{
var child = Children[i];
if (currentSize + child.DesiredSize.Height > parentHeight)
{
hasBreaked = true;
break;
}
currentSize += child.DesiredSize.Height;
}
if (hasBreaked) return currentSize;
return parentHeight;
}
double ParentHeight
{
get
{
ItemsPresenter parent = VisualTreeHelper.GetParent(this) as ItemsPresenter;
if (parent == null)
return 0;
return parent.ActualHeight;
}
}
double previousHeight = 0;
int previousChildCount = 0;
protected void OnLayoutUpdated(object sender, object e)
{
double height = ParentHeight;
if (height == previousHeight && previousChildCount == Children.Count) return;
previousHeight = height;
previousChildCount = Children.Count;
this.Height = GetSizeOfVisibleChildren(height);
}
}
The answer from #JesuX is the better approach -- if done correctly. The following ListView subclass works fine for me:
public sealed class IntegralItemsListView : ListView
{
protected override Size MeasureOverride(Size availableSize)
{
Size size = base.MeasureOverride(availableSize);
double height = 0;
if (Items != null)
{
for (int i = 0; i < Items.Count; ++i)
{
UIElement itemContainer = (UIElement)ContainerFromIndex(i);
if (itemContainer == null)
{
break;
}
itemContainer.Measure(availableSize);
double childHeight = itemContainer.DesiredSize.Height;
if (height + childHeight > size.Height)
{
break;
}
height += childHeight;
}
}
size.Height = height;
return size;
}
}
One caveat -- if you plop an IntegralItemsListView into a Grid, it will have
VerticalAlignment="Stretch"
by default, which defeats the purpose of this class.
Also: If the items are of uniform height, the method can obviously be simplified:
protected override Size MeasureOverride(Size availableSize)
{
Size size = base.MeasureOverride(availableSize);
size.Height = (int)(size.Height / ItemHeight) * ItemHeight;
return size;
}
I've got an XNA + Silverlight game in Mango: Mostly XNA with some Silverlight UI on top. The problem I'm having is that when you hit a button or interact with a Silverlight control, the touch information is still passed along to the XNA game loop. How do you suppress this?
Wrote up a class to do the tracking for me. After your page loads (in the Loaded handler), create this and give it the root element (so it can attach to the LayoutUpdated event). Register any controls that might overlay the game surface during play. Then just call TouchesControl and pass in the touch position to find out if you should ignore that point or not. It caches the regions of the controls and updates them when there's a layout update.
Should work for rectangular elements moving, changing size or collapsing/expanding.
public class ControlTouchTracker
{
private List<FrameworkElement> controls = new List<FrameworkElement>();
private Dictionary<FrameworkElement, ControlRegion> controlBounds = new Dictionary<FrameworkElement, ControlRegion>();
public ControlTouchTracker(FrameworkElement rootElement)
{
rootElement.LayoutUpdated += this.OnLayoutUpdated;
}
public void RegisterControl(FrameworkElement control)
{
controls.Add(control);
}
public void RemoveControl(FrameworkElement control)
{
controls.Remove(control);
controlBounds.Remove(control);
}
private void OnLayoutUpdated(object sender, EventArgs e)
{
foreach (Control control in this.controls)
{
this.RefreshControlBounds(control);
}
}
private void RefreshControlBounds(FrameworkElement control)
{
if (this.ControlIsVisible(control))
{
try
{
GeneralTransform controlTransform = control.TransformToVisual(Application.Current.RootVisual);
Point offset = controlTransform.Transform(new Point(0, 0));
this.controlBounds[control] = new ControlRegion
{
Left = (float)offset.X,
Right = (float)(offset.X + control.ActualWidth),
Top = (float)offset.Y,
Bottom = (float)(offset.Y + control.ActualHeight)
};
}
catch (ArgumentException)
{
}
}
else
{
if (this.controlBounds.ContainsKey(control))
{
this.controlBounds.Remove(control);
}
}
}
private bool ControlIsVisible(FrameworkElement control)
{
// End case
if (control == null)
{
return true;
}
if (control.Visibility == Visibility.Collapsed)
{
return false;
}
return this.ControlIsVisible(control.Parent as FrameworkElement);
}
public bool TouchesControl(Vector2 touchPosition)
{
foreach (ControlRegion region in this.controlBounds.Values)
{
if (touchPosition.X >= region.Left && touchPosition.X <= region.Right &&
touchPosition.Y >= region.Top && touchPosition.Y <= region.Bottom)
{
return true;
}
}
return false;
}
public class ControlRegion
{
public float Left { get; set; }
public float Right { get; set; }
public float Top { get; set; }
public float Bottom { get; set; }
}
}
(edit) Updated example to work with parent elements changing Visibility.
Due to the way interop with XNA works, you will always get the touch input processed both by XNA and Silverlight - to some extent, XNA gets the priority, so the Silverlight acts on top of that. What you could do, if you need to ignore specific gesture locations (e.g. where Silverlight buttons are located), you could check the gesture position:
if (TouchPanel.IsGestureAvailable)
{
if (TouchPanel.ReadGesture().GestureType == GestureType.Tap)
{
if (TouchPanel.ReadGesture().Position == new Vector2(120, 120))
{
}
}
}
UnifomGrid has loaded Data, I want to Hide the first row?
How can I implement that?
I've never worked with the UniformGrid so there might be a better solution for this but as far as I can tell the UniformGrid doesn't hold much information except how many rows and columns it currently have so therefore this is the only solution that I can think of.
private List<UIElement> GetElementsAtRow(int rowNumber)
{
List<UIElement> elementsAtRow = new List<UIElement>();
for (int i = 0; i < uniformGrid.Columns; i++)
{
if (i < uniformGrid.Children.Count)
{
elementsAtRow.Add(uniformGrid.Children[i] as UIElement);
}
}
return elementsAtRow;
}
private void HideFirstRow()
{
List<UIElement> elementsAtRow = GetElementsAtRow(0);
foreach (UIElement element in elementsAtRow)
{
// Or Hidden if you want row to remain but with no Visible children.
element.Visibility = Visibility.Collapsed;
}
}
private void ShowFirstRow()
{
List<UIElement> elementsAtRow = GetElementsAtRow(0);
foreach (UIElement element in elementsAtRow)
{
element.Visibility = Visibility.Visible;
}
}
My code is as follows:
void mainDataContextObj_CutSelectedColumnEvent(string columnId)
{
IList<DataGridColumn> columns = dg.Columns;
for(int i=2; i<dg.Columns.Count; i++)
{
DataGridColumnHeader headerObj = dg.Columns[i].Header as DataGridColumnHeader;
//This always returns headerObj as null!!!
}
}
I need DataGridColumnHeader from the column. Where am I going wrong?
The Header object of the DataGridColumn is actually the visible header of that column, whatever you set it to be. DataGridColumn is not part of the Visual Tree so there is not direct way to access the DataGridColumnHeader for it (we can't even be sure it exists yet). But you can do something like this to try and access it
DataGridColumnHeader headerObj = GetColumnHeaderFromColumn(column);
private DataGridColumnHeader GetColumnHeaderFromColumn(DataGridColumn column)
{
// dataGrid is the name of your DataGrid. In this case Name="dataGrid"
List<DataGridColumnHeader> columnHeaders = GetVisualChildCollection<DataGridColumnHeader>(dataGrid);
foreach (DataGridColumnHeader columnHeader in columnHeaders)
{
if (columnHeader.Column == column)
{
return columnHeader;
}
}
return null;
}
public List<T> GetVisualChildCollection<T>(object parent) where T : Visual
{
List<T> visualCollection = new List<T>();
GetVisualChildCollection(parent as DependencyObject, visualCollection);
return visualCollection;
}
private void GetVisualChildCollection<T>(DependencyObject parent, List<T> visualCollection) where T : Visual
{
int count = VisualTreeHelper.GetChildrenCount(parent);
for (int i = 0; i < count; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(parent, i);
if (child is T)
{
visualCollection.Add(child as T);
}
else if (child != null)
{
GetVisualChildCollection(child, visualCollection);
}
}
}
While Fredrik's answer provides a refactored approach with additional method that could potentially be reused in other parts of the code, I preferred to consolidate his methods in to one single method. There may also be some small performance gain because it can end the search as soon as it finds the header and it does not need to continue to search through all the children in the visual tree (this is most likely negligible for most cases).
private DataGridColumnHeader GetHeader(DataGridColumn column, DependencyObject reference)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(reference); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(reference, i);
DataGridColumnHeader colHeader = child as DataGridColumnHeader;
if ((colHeader != null) && (colHeader.Column == column))
{
return colHeader;
}
colHeader = GetHeader(column, child);
if (colHeader != null)
{
return colHeader;
}
}
return null;
}
And it is used like so:
DataGridColumnHeader colHeader = GetHeader(column, myDataGrid);
if (colHeader == null) { /* Not found */ }
I have a Silverlight 3 application, and it has radiobuttons grouped using the GroupName property. What I would like to do in the code is retrieve all the radiobuttons that are part of a specified group. Is there an easy way to do this, or would I need to iterate over all the controls?
Thanks.
Borrowing (yet again) my VisualTreeEnumeration from this answer (I really really need to blog):-
public static class VisualTreeEnumeration
{
public static IEnumerable<DependencyObject> Descendents(this DependencyObject root)
{
int count = VisualTreeHelper.GetChildrenCount(root);
for (int i=0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(root, i);
yield return child;
foreach (var descendent in Descendents(child))
yield return descendent;
}
}
}
Place this in a file in either your main namespace or in a utility namespace that you place a using for in your code.
Now you can use LINQ to get all sorts of useful lists. In your case:-
List<RadioButton> group = this.Descendents()
.OfType<RadioButton>()
.Where(r => r.GroupName == "MyGroupName")
.ToList();
This might help:
Essentially walk through the controls looking for radiobuttons in the required group.
This will also look through any children panels.
private List<FrameworkElement> FindBindings(DependencyObject visual, string group)
{
var results = new List<FrameworkElement>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(visual); i++)
{
var childVisual = VisualTreeHelper.GetChild(visual, i);
var childRadioButton = childVisual as RadioButton;
if (childRadioButton != null)
{
if (childRadioButton.GroupName == group)
{
results.Add(childRadioButton);
}
}
else
{
if (childVisual is Panel)
{
results.AddRange(FindBindings(childVisual, group));
}
}
}
return results;
}