I'm trying to change the background color of my group headers depending on the value I give them to group after. All my datagrid rows have a "Category" column where I assign different textvalues and I would like to give group headers different colors based on the different values.
Picture of my groups right now:
http://imgur.com/a/JDlAQ
Picture of how I want it to be:
http://imgur.com/a/qdpxW
How can I achieve this?
This work for me:
private void button1_Click(object sender, RoutedEventArgs e)
{
//Retrieve the stackpanel that holds the GroupItems.
StackPanel sp = (StackPanel)GetDescendantByType(listView1, typeof(StackPanel));
//Retrieve the sencond GroupItem;
GroupItem gi = sp.Children[1] as GroupItem;
//Retrieve the Expander inside the GroupItem;
Expander exp = (Expander)GetDescendantByType(gi, typeof(Expander));
//Retrieve the Expander inside the GroupItem;
Expander exp = (Expander)GetDescendantByType(gi, typeof(Expander));
System.Windows.Controls.Primitives.ToggleButton tb = (System.Windows.Controls.Primitives.ToggleButton)GetDescendantByType(exp, typeof(System.Windows.Controls.Primitives.ToggleButton));
Border br = (Border)GetDescendantByType(tb, typeof(Border));
//Change color;
br.Background = Brushes.Red;
br.UpdateLayout();
}
public static Visual GetDescendantByType(Visual element, Type type)
{
if (element == null) return null;
if (element.GetType() == type) return element;
Visual foundElement = null;
if (element is FrameworkElement)
(element as FrameworkElement).ApplyTemplate();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(element); i++)
{
Visual visual = VisualTreeHelper.GetChild(element, i) as Visual;
foundElement = GetDescendantByType(visual, type);
if (foundElement != null)
break;
}
return foundElement;
}
Source: How to access group items of a listview in code-behind?
Yo can try wrapping each other with border < Border Background="Black">
See these answers, WPF How to set DataGrid.Group header text when it's actually collapsed
How do I get the value of a cell in a grouped CollectionView?
Apply the converter to the Background of your TextBlock, to change the color based on name.
Related
I am having an issue when I change my ColumnDefinitions at runtime. When I do, the columns Width does not reflect immediately. If I resize the current window/usercontrol then the Width does reflect.
I am following MVVM as well, I have a DependencyProperty that allows me to change them as needed on the Grid.
Currently here is what I am using and does work if I resize the window and or control the Grid is on...
public static void ColumnSpacerChanged(
DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
if (!(obj is Grid) || ((Grid)obj).ColumnDefinitions.Count == 0 || (int)e.NewValue == (int)e.OldValue)
return;
Grid grid = (Grid)obj;
for (int i = 0; i < grid.ColumnDefinitions.Count; i++)
{
if(grid.ColumnDefinitions[i].Tag != null && grid.ColumnDefinitions[i].Tag.ToString() == COLUMN_SPACER)
{
grid.ColumnDefinitions[i] = new ColumnDefinition() { Width = new GridLength((int)e.NewValue, GridUnitType.Pixel), Tag = COLUMN_SPACER };
}
}
grid.UpdateLayout(); // Tried this, but doesn't work
}
I have tried the following and none work.
grid.UpdateLayout();
grid.Refresh; // (off the parent)
Is there something I am missing when I change the ColumnDefinitions during run-time they immediately do not reflect?
I found the solution with some help from #Mike Strobel....
InvalidateArrange()
This needs to be called to invalidate the arrange state (layout) for the element. After this invalidation the element will then have its layout updated and reflected asynchronously.
In one of the latest releases Xamarin.Forms added the possibility to place the toolbar at the bottom (ToolBarPlacement) and by setting the Property BarBackgroundColor on NavigationPage the background color of the toolbar can be changed.
Unfortunately, when the toolbar is split (as is the default on Windows 10 Mobile or when ToolbarPlacement is bottom) both bars have the same background color.
In my app I want to achieve that the top bar (with title and hamburger menu) has the system's accent color and the bottom bar (with commands and flyout) is gray, as this combination is also used by many system apps (e.g. Mail or Calendar on Windows 10 Mobile).
But I cannot figure out how to do it without touching the core implementation in Xamarin.Forms. I already tried custom NavigationPageRenderer and custom PageRenderer, but many of the relevant fields are private, sealed or internal or are accessing internal interfaces.
The background colors of the two bars seem to be bound to the same property as changing the background of one bar in Visual Studio's Live XAML Tree View also changes the color of the other one.
Any help on how to achieve the desired look will be appreciated.
Finally, I achieved the desired result.
One of the problems was that my RootPage was a MasterDetailPage, so I had to create a MasterDetailPageRenderer. Also I assumed that Xamarin would use the actual UWP Page's TopAppBar and BottomAppBar properties. This is not the case.
With the following MasterDetailPageRenderer the top bar (with hamburger menu button and title) is tinted green while the bottom bar stays the default gray (basically the renderer just removes the Background binding of the StackPanel representing the top bar and sets it to Green). One problem was, that the FindName and FindByName methods were not working (always returned null), so I had to roll my own implementations using the VisualTreeHelper.
[assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailPageRender))]
public class CustomMasterDetailPageRender : MasterDetailPageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<MasterDetailPage> e)
{
base.OnElementChanged(e);
if (Element != null)
{
Element.Appearing += Element_Appearing;
}
}
private void Element_Appearing(object sender, EventArgs e)
{
(sender as MasterDetailPage).Appearing -= Element_Appearing;
if (Control != null)
{
var topBarArea = FindElementByName(Control, "TopCommandBarArea");
if (topBarArea != null)
{
var topContent = FindElementByType<StackPanel>(topBarArea);
if (topContent != null)
{
topContent.Background = new SolidColorBrush(Colors.Green);
}
}
}
}
static DependencyObject FindElementByName(DependencyObject parent, string name)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var sub = VisualTreeHelper.GetChild(parent, i);
if (sub is FrameworkElement)
{
if (((FrameworkElement)sub).Name == name)
{
return sub;
}
}
var r = FindElementByName(sub, name);
if (r != null)
return r;
}
return null;
}
static T FindElementByType<T>(DependencyObject parent)
where T: DependencyObject
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var sub = VisualTreeHelper.GetChild(parent, i);
if (sub is T)
{
return (T)sub;
}
var r = FindElementByType<T>(sub);
if (r != null)
return r;
}
return null;
}
}
I am trying to get the text value of a "cell" inside of a GridView that is set as the view of a ListView. I do not want to get the SelectedItem of the ListView as that just returns my entire View Model (but not which property the cell refers to).
I am able to get the text value by responding to direct mouse events (up down or whatever) and if the value is a textblock, obviously I can use the text. This works great and as of right now this is my only solution, although its currently limited.
I would like to take it a step further and be able to click anywhere with in the cell area, navigate around to find the appropriate textblock and then use that value. I have tried a half million ways to do this but what seems logical doesn't seem to quite work out like it should.
Setup:
I have a dynamic GridView that creates its own columns and bindings based on data models that I pass to it. I am using a programmatic cell template (shown below) to have individual control over the cells, particularly so I can add a "border" to it making it actually separate out each cell. I have named the objects so I can access them easier when I'm navigating around the VisualTree.
Here is the Template Code. (Note that the content presenter originally was a textblock itself, but this was changed for later flexibility)
private DataTemplate GetCellTemplate(string bindingName)
{
StringBuilder builder = new StringBuilder();
builder.Append("<DataTemplate ");
builder.Append("xmlns='http://schemas.microsoft.com/winfx/");
builder.Append("2006/xaml/presentation' ");
builder.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
builder.Append("xmlns:local = 'clr-namespace:XXXXXXXX");
builder.Append(";assembly=XXXXXXXXX'>");
builder.Append("<Border Name=\"border\" BorderThickness=\"1,0,0,0\" BorderBrush=\"Gray\" Margin=\"-6,-3,-6,-3\">");
builder.Append("<Grid Margin=\"6,3,6,3\">");
builder.Append("<ContentPresenter Name=\"content\" HorizontalAlignment=\"Stretch\" Content=\"{Binding ");
builder.Append(string.Format("{0}", bindingName));
builder.Append("}\"/>");
builder.Append("</Grid>");
builder.Append("</Border>");
builder.Append("</DataTemplate>");
DataTemplate cellTemplate= (DataTemplate)XamlReader.Parse(builder.ToString());
return cellTemplate;
}
What I have Tried:
The logical approach for me was to react to a Mouse event. From the object that had the mouse event I would do either
A. Look at its children to find a textblock, or
B. Get its parent then look for child with a textblock.
My assumption is that if I click in white space I'm clicking in a container that has my textblock. So far the two things that come up are a Border and a Rectangle (if I don't click the text itself). A. Returns absolutely nothing except for the recangle and the border. When I do B i can find textblocks but they are every single text block in the entire row.
So what I try to do from that is get all textblocks, then go backwards till I find which one has a IsMouseOver property as true. It turns out none of these objects EVER have a IsMouseOver except the content presenter for the entire row. So this seems to indicate to me is that the whitespace in the cells does not actually contain the textblock.
What I find is that when I click on the Border and start looking at children, I eventually get to a container that has a rectangle (the rectangle I click) and a grid row view presenter. The presenter shows all of the objects inside the row (hence why i would get all textblocks when i do this recursive scan).
Here is some of the code used to do this to get an idea of what i'm doing. I have written about 10 different versions of this same recursive code generally attempting to find who has the Mouse over it and is related to a textbox.
private void OnPreviewMouseUp(object sender, MouseButtonEventArgs e)
{
object original = e.OriginalSource;
if (original is TextBlock)
{
this.valueTextBlock.Text = ((TextBlock)original).Text;
}
else if (original is FrameworkElement)
{
var result = GetAllNestedChildren<Border>(VisualTreeHelper.GetParent((DependencyObject)original)).Where(x => x.Name == "border").Where(x => HasAChildWithMouse(x)).ToList();
}
else
{
this.valueTextBlock.Text = string.Empty;
}
}
private bool HasAChildWithMouse(UIElement element)
{
if (element.IsMouseOver || element.IsMouseDirectlyOver)
return true;
var childCount = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < childCount; ++i)
{
var child = VisualTreeHelper.GetChild(element, i);
if (child is UIElement)
if (HasAChildWithMouse((UIElement)child))
return true;
}
return false;
}
private IEnumerable<T> GetAllNestedChildren<T>(DependencyObject obj) where T : UIElement
{
if (obj is T)
yield return obj as T;
var childCount = VisualTreeHelper.GetChildrenCount(obj);
for (int i = 0; i < childCount; ++i)
{
var child = VisualTreeHelper.GetChild(obj, i);
foreach (var nested in GetAllNestedChildren<T>(child))
yield return nested;
}
}
private T GetObjectByTypeParentHasMouse<T>(DependencyObject obj) where T : UIElement
{
if (obj is T)
{
if ((VisualTreeHelper.GetParent(obj) as UIElement).IsMouseOver )
{
return obj as T;
}
}
var childCount = VisualTreeHelper.GetChildrenCount(obj);
for (int i = 0; i < childCount; ++i)
{
var child = VisualTreeHelper.GetChild(obj, i);
var correctType = GetObjectByTypeParentHasMouse<T>(child);
if (correctType != null)
return correctType;
}
return null;
}
private T GetContainedType<T>(DependencyObject obj, bool checkForMouseOver) where T : UIElement
{
if (obj is T && ((T)obj).IsMouseOver)
return obj as T;
var childCount = VisualTreeHelper.GetChildrenCount(obj);
for (int i = 0; i < childCount; ++i)
{
var child = VisualTreeHelper.GetChild(obj, i);
var correctType = GetContainedType<T>(child, checkForMouseOver);
if (correctType != null)
return correctType;
}
return null;
}
The other approach I took was to start with the TextBlock itself, find its containing parent and find out how i can navigate to the answer. I find the templateparent is the ContentPresenter (named ="content") I find the grid, and then the border. The parent of the border is a content presenter whos content is the data view model for the entire row. The parent of this contentpresenter is the grid column's presenter. This is the same one that i was navigating up to in the other one.
It would appear that the first approach objects while are contain the cell do not actually contain the textblock or the entire cell templated items. It would appear to me there is no way to go from the Border or Rectangle that is clicked, back to the actual text field.
"Long story short" is there ANY way to make this connection?
(Btw I am not willing to give up this ListView/GridView because its payoffs far outweigh this negative and I'd gladly give up on this idea to keep the rest).
I think you sjould be able to either
1) Add some kind of (toggle)button to the root of your data template, and either bind to Command and handle it on your viewmodel or bind to IsChecked/IsPressed and handle changes via data triggers or w/e on the view side.
2) Add EventTrigger to your datatemplate at some point, and handle PreviewNouseUp/Down events there via simple animations.
I have one question regarding standard WPF DataGrid in .NET 4.0.
When I try to set DataGrid grid row height programmaticaly using simple code:
private void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e)
{
e.Row.Height = 120;
}
everything goes fine till I try to resize grid row on the user interface /standard way on the side using mouse like in excel/ - then it appears grid row can't be resized. It just keep being 120. Its content by the way all goes messed up...
Like Sinead O'Connor would say: tell me baby - where did I go wrong?
You are not meant to set the Height of the row itself as it is resized via the header and such. There is a property, DataGrid.RowHeight, which allows you to do this properly.
If you need to set the height selectively you can create a style and bind the height of the DataGridCellsPresenter to some property on your items:
<DataGrid.Resources>
<Style TargetType="DataGridCellsPresenter">
<Setter Property="Height" Value="{Binding RowHeight}" />
</Style>
</DataGrid.Resources>
Or you can get the presenter from the visual tree (i do not recommend this) and assign a height there:
// In LoadingRow the presenter will not be there yet.
e.Row.Loaded += (s, _) =>
{
var cellsPresenter = e.Row.FindChildOfType<DataGridCellsPresenter>();
cellsPresenter.Height = 120;
};
Where FindChildOfType is an extension method which could be defined like this:
public static T FindChildOfType<T>(this DependencyObject dpo) where T : DependencyObject
{
int cCount = VisualTreeHelper.GetChildrenCount(dpo);
for (int i = 0; i < cCount; i++)
{
var child = VisualTreeHelper.GetChild(dpo, i);
if (child.GetType() == typeof(T))
{
return child as T;
}
else
{
var subChild = child.FindChildOfType<T>();
if (subChild != null) return subChild;
}
}
return null;
}
This works for me.
private void SetRowHeight(double height)
{
Style style = new Style();
style.Setters.Add(new Setter(property: FrameworkElement.HeightProperty, value: height));
this.RowStyle = style;
}
WPF default TreeView is scrolled to bottom of the node automatically where as we need to show the top view of the tree view. How to do that?
Also I could not get the scroll viewer by walking down the Visual Tree.
Preselect top node and call TreeViewItem.BringIntoView method on selection changed event. Call TreeView.ItemContainerGenerator.ContainerFromItem(e.NewValue) to get hold of the TreeViewItem.
This code is very rough.
The key to getting the TreeViewItem.BringIntoView() to get an item to the top, is to first scroll the TreeView to the bottom rather than the top.
To do this, we need to access the ScrollViewer inside the TreeView's control template first. Lots of messing around IMO, that should have been provided in the framework from the outset.
Your item control in this case, should be your TreeViewItem that you are trying to get to the top.
The uxTree control is the TreeView.
item.IsSelected = true;
ScrollViewer scroller = (ScrollViewer)this.FindVisualChildElement(this.uxTree, typeof(ScrollViewer));
scroller.ScrollToBottom();
item.BringIntoView();
private FrameworkElement FindVisualChildElement(DependencyObject element, Type childType)
{
int count = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < count; i++)
{
var dependencyObject = VisualTreeHelper.GetChild(element, i);
var fe = (FrameworkElement)dependencyObject;
if (fe.GetType() == childType)
{
return fe;
}
FrameworkElement ret = null;
if (fe.GetType().Equals(typeof(ScrollViewer)))
{
ret = FindVisualChildElement((fe as ScrollViewer).Content as FrameworkElement, childType);
}
else
{
ret = FindVisualChildElement(fe, childType);
}
if (ret != null)
{
return ret;
}
}
return null;
}