Styling GridViewColumns - wpf

I was browsing stackoverflow to try to figure out a way to style the GridViewColumns in my ListView. I came across this:
WPF Text Formatting in GridViewColumn
The top answer shows how to style one (1) GridViewColumn. My question is, is there a way to style these GridViewColumns in the Window.Resources so I don't have to do it for each individual GridViewColumn?

There are a few possibilities:
<!-- if style doesn't change -->
<GridViewColumn CellTemplate="{StaticResource yourCellTemplate}"/>
<!-- if you need to change it up based on criteria - template selector-->
<GridViewColumn CellTemplateSelector="{StaticResource YourTemplateSelector}"/>
<!-- same goes for headers -->
<GridViewColumn HeaderTemplate="{StaticResource yourheaderTempalte}"/>
..or HeaderContainerStyle, HeaderTemplateSelector
if you want to use template selectors: create a class, instanciate it in resource dict, and plug it in you gridview column, here's a little sample
public class MyTemplateSelector : DataTemplateSelector
{
public DataTemplate SimpleTemplate { get; set; }
public DataTemplate ComplexTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
//if I have just text
return SimpleTemplate;
//if I have comments and other fancy stuff
return ComplexTemplate;
then in your ResourceDictionary
<DataTemplate x:Key="ComplexTemplate">
<Views:MyCustomControl DataContext="{Binding}"/>
</DataTemplate>
<Views:MyTemplateSelector
x:Key="TxtVsExpensiveCell_TemplateSelector"
SimpleTemplate ="{StaticResource SimpleTemplate}"
ComplexTemplate="{StaticResource ComplexTemplate}"/>
<!-- then you use it in your view like this -->
<GridViewColumn CellTemplateSelector="{StaticResource TxtVsExpensiveCell_TemplateSelector}"/>
If you don't want to go through all that trouble, and just what to tweak styles of predefined controls, why not use DataGrid? It has predefined columns, where you can tweak styles per each..
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn/>
<DataGridCheckBoxColumn/>
<DataGridHyperlinkColumn/>
<DataGridCheckBoxColumn/>
....there are several more column types!
</DataGrid.Columns>
</DataGrid>

Related

AvalonDock document view content disapear after float window

I'm using AvalonDock control in my project. When i move my document anywhere and detach from control, document content disapear. And if i redock document to a control, document content come out. I'm sure i'm missing something so simple but i don't understand the problem. Here is the code snippet from the MainView;
<xcad:DockingManager AllowMixedOrientation="True" DocumentsSource="{Binding DocumentViewModels}">
<xcad:DockingManager.Resources>
<DataTemplate DataType="{x:Type viewModels:WatchListViewModel}">
<local:WatchListView DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:ScanListViewModel}">
<local:ScanListView DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:SignalListViewModel}">
<local:SignalListView DataContext="{Binding}"/>
</DataTemplate>
</xcad:DockingManager.Resources>
<xcad:DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title" Value="{Binding Model.Document.Title}"/>
</Style>
</xcad:DockingManager.LayoutItemContainerStyle>
</xcad:DockingManager>
For clarify the problem want to share three screenshots. First screenshot is showing document before move anywhere. Second screenshot is showing document after move anywhere (floating). And third screenshot is showing re-dock to same place. Actually first and third image same but i want to show clearly that actually content still there.
You need to add a DataTemplateSelector to your code, in order to teach AvalonDock which DataTemplate used for your own View/ViewModel.
In order to do so, you need to define a new class like the following:
class PanesTemplateSelector : System.Windows.Controls.DataTemplateSelector
{
public DataTemplate WatchListViewTemplate { get; set; }
public DataTemplate ScanListViewTemplate { get; set; }
public DataTemplate SignalListViewTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is WatchListViewModel)
return WatchListViewTemplate;
if (item is ScanListViewModel)
return ScanListViewTemplate;
if (item is SignalListViewModel)
return SignalListViewTemplate;
return base.SelectTemplate(item, container);
}
}
Then you need to add this class yo your XAML as follow:
<xcad:DockingManager.LayoutItemTemplateSelector>
<s:PanesTemplateSelector>
<s:PanesTemplateSelector.WatchListViewTemplate>
<DataTemplate>
<p:WatchListView />
</DataTemplate>
</s:PanesTemplateSelector.WatchListViewTemplate>
<s:PanesTemplateSelector.ScanListViewTemplate>
<DataTemplate>
<p:ScanListView />
</DataTemplate>
</s:PanesTemplateSelector.ScanListViewTemplate>
<s:PanesTemplateSelector.SignalListViewTemplate>
<DataTemplate>
<p:SignalListView />
</DataTemplate>
</s:PanesTemplateSelector.SignalListViewTemplate>
</s:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
Where s links to the namespace where you define the PanesTemplateSelector and p links to the namespace where you define your own Views

WPF - How to implement DataTemplate with complex logic?

I am currently transferring my app from WinForms to WPF.
Since I'm new in WPF, I stucked at creating DataTemplates for my treeView items. The screenshot shows how my treeview looked in WinForms version, and I need to get close result in WPF.
(My WinForms treeview)
As you can see, my DataTemplate's logic should take into account these factors:
Node type / defines which icon and fields combination will be displayed for particular item (node). App has about 7-8 node types. Type stored in separate node's field.
Variable values / I need to replace with text if null, etc
Numeric variable values / e.g.: set gray color if zero, etc.
Other properties / e.g.: adding textblocks depending on boolean fields.
And so on...
All these factors result into huge amount of possible item params combinations.
Also I'm using DevComponents WPF DotNetBar AdvTree to divide item properties into columns. I presume I should create 'sub templates' for different field sets and compose from them the entire DataTemplate for each column.
I've learned about triggers, and have to say that implementing my logic with triggers will make my subtemplates huge anyway.
(Current state of my WPF treeview)
So here are my questions:
Are there any ways to dynamically compose complex templates with C# code (without creating raw XAML and loading it at runtime)?
Maybe I should use completely different way (instead of using DataTemplate)? In Winforms I just used OwnerDraw mode, so the task was MUCH easier than in WPF :(
And how to display nested properties inside template? e.g.: Item.Prop.Subprop1.Subprop2.Targetprop.
PS: English is not my first language, sorry for your eyes.
1) The answer is yes.
For exemple if you want to define a template in your window for a simple string
public MainWindow()
{
InitializeComponent();
DataTemplate template = new DataTemplate(typeof(string));
FrameworkElementFactory borderFactory = new FrameworkElementFactory(typeof(Border));
borderFactory.SetValue(Border.PaddingProperty, new Thickness(1));
borderFactory.SetValue(Border.BorderThicknessProperty, new Thickness(1));
borderFactory.SetValue(Border.BorderBrushProperty, Brushes.Red);
FrameworkElementFactory textFactory = new FrameworkElementFactory(typeof(TextBlock));
textFactory.SetBinding(TextBlock.TextProperty, new Binding
{
Mode = BindingMode.OneWay
});
borderFactory.AppendChild(textFactory);
template.VisualTree = borderFactory;
myControl.ContentTemplate = template;
}
And in the Window you just put something like
<ContentControl x:Name="myControl" Content="Test text" Margin="10"/>
Your content control will render the string surrounded by a red border.
But as you anc see it is really complex to define your templates in this way.
The only scenario where i could imagine this approache is for some kind of procedurally generated templates.
Another way is to generate a string for the template and then load it with XamlReader:
string xaml = "<Ellipse Name=\"EllipseAdded\" Width=\"300.5\" Height=\"200\"
Fill=\"Red\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"/>";
object ellipse = XamlReader.Load(xaml);
2) I don't really see the need to generate templates in code behind. For exemple for this kind of data structure:
public class User
{
public string Name { get; set; }
public User Friend { get; set; }
}
public class RootNode
{
public string Title { get; set; }
public User User { get; set; }
public List<Node> Nodes { get; set; }
}
public class Node
{
public string Title { get; set; }
public List<SubNode> SubNodes { get; set; }
}
public class SubNode
{
public string Title { get; set; }
}
You can define this type of template:
<Window
...
Title="MainWindow" Height="350" Width="525" >
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:RootNode}" ItemsSource="{Binding Nodes}">
<StackPanel x:Name="spContainer" Orientation="Horizontal">
<TextBlock Text="{Binding Title}"/>
<TextBlock Text="{Binding User.Friend.Friend.Name}"/>
</StackPanel>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding User}" Value="{x:Null}">
<Setter TargetName="spContainer" Property="Background" Value="Yellow"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Node}" ItemsSource="{Binding SubNodes}">
<TextBlock Text="{Binding Title}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:SubNode}" ItemsSource="{Binding Nodes}">
<TextBlock Text="{Binding Title}"/>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<TreeView ItemsSource="{Binding RootNodes}"/>
</Grid>
</Window>
As you can see you can define a template by data type, you can also use triggers to modify the behavior in specific cases, you could also use som binding converters...
3) You can bind to nested properties just like to normal ones :
<TextBlock Text="{Binding User.Friend.Friend.Name}"/>
However in some cases more than two level bindings could fail (fail to resolve or fail to update when property changes, ...)

How to apply a style to a DependencyObject in a custom control library

I am creating a reusable custom control, based on the TreeView. I have on the custom control created a dependency property for the columns in the control, like this:
public GridViewColumnCollection Columns
{
get { return (GridViewColumnCollection)GetValue(ColumnsProperty); }
set { SetValue(ColumnsProperty, value); }
}
public static readonly DependencyProperty ColumnsProperty =
DependencyProperty.Register("Columns", typeof(GridViewColumnCollection), typeof(TreeListView), new PropertyMetadata(new GridViewColumnCollection()));
This lets me specify a bunch of columns in XAML. The catch is that I need the first column to have a custom cell template. I was going to approach this by deriving a class from GridViewColumn, something like this:
public class TreeGridViewColumn : GridViewColumn
{
}
and then give it the desired style in the Generic.xaml for the custom control:
<Style TargetType="{x:Type local:TreeGridViewColumn}">
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="Black" /> <!-- Just for example -->
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
However the style is never applied to instances of TreeGridViewColumn. I know that I probably need to add:
DefaultStyleKeyProperty.OverrideMetadata(typeof(TreeGridViewColumn), new FrameworkPropertyMetadata(typeof(TreeGridViewColumn)));
However I cannot do this, as the GridColumn base class is not a FrameworkObject, it is a DependencyObject. How can I apply a style to a descendant of a GridViewColumn defined in a Custom Control library?
Think like this: The TreeGridViewColumn should be a dummy object holding important information for the column itself such as width and height and also for each cell under that columns header for example the cell template itself. Therefore do not try to create an FrameworkElement out of TreeGridViewColumn. Here is an example how you might end up using the TreeGridViewColumn.
<TreeGridViewColumn Header="First Col" Width="50">
<TreeGridViewColumn.CellTemplate>
<DataTemplate>
<Button>
click me
</Button>
</DataTemplate>
</TreeGridViewColumn.CellTemplate>
</TreeGridViewColumn>
Once you ready to display the columns and cells I suggest to you to write your own custom panel which deals with the FrameworkElements by calling their Measure and Arrange methods allowing you to position columns and cells the way you want. You will end up doing alot of math inside your custom panel class. That futhermore means you will end up spending a month on programming that TreeGridView. I suggest you to take a shortcut and download the code of such a thing. There are already few TreeListViews online. Just take their dlls and see if it will work out for you
EDIT:
Ok here is a suggestion how you could solve your issue. Its just a suggestion
The DefaultTextColumnData class is a dummy object holding all the necessary infos like columns width, etc.
DataGridCellControl will be that FrameworkElement that draws the cell. Its a FrameworkElement so it will have a defined style in your generic.xaml resource dictionary.
To sum up DefaultTextColumnData will hold all infos for the column itself. DataGridCellControl will be a control which might end up having 20 instances of itself in case you have 20 cells in that column.
DataGridCellControl must know about its column.
This is how the code of DataGridCellControl will look alike:
class DefaultTextColumnData : DataGridColumn
{
}
class ComplexColumnData : DataGridColumn
{
}
class DataGridCellControl : Control
{
public DataGridColumn Column
{
get; set;
}
public DataTemplate DefaultTextCellTemplate
{
get; set;
}
public override Size MeasureOverride(Size size)
{
...
if(this.Column is DefaultTextColumnData)
{
this.Template = this.DefaultTextCellTemplate
}
if(this.Column is ComplexColumnData)
{
this.Template = ...
}
...
return new Size(30, 30);
}
}
DefaultTextCellTemplate will be set in your generic.xaml like this:
<Style TargetType={x:Type DataGridCellControl}>
<Setter Property="DefaultTextCellTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Background="Black" Margin="5"/>
....
Thats how you set default cell template in your resource dictionary.

Problems binding to a the content of a WPF DataGridCell in XAML

I used the following post to implement a datagrid bound to a list of dynamic objects
Binding DynamicObject to a DataGrid with automatic column generation?
The ITypedList method GetItemProperties works fine, a grid is displayed with all the columns I described.
I use a custom PropertyDescriptor and override the GetValue and SetValue methods as described in the above post, I also implement the TryGetMember and TrySetMember methods in the dynamic objects.
so basically I have a ComplexObject:DynamicCobject with a field Dictionary and a ComplexObjectCollection implementing ITypedList and IList.
This all works fine except when I bind the itemsSource of the DataGrid to the collection, the cells will show the SimpleObject type name and I actually want to implement a template to show the property Value of the SimpleObject in a text block.
I've used all sorts of methods to try and get the underlying SimpleObject but nothing works and I always get the ComplexObject for the row. I am using autogenerated columns and this always seems to produce a text column, this may be the problem but why cant I still get the underlying SimpleObject from somewhere in the cell properties?
Below would be my ideal solution but this does not work.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="DefaultNodeTempate">
<ContentControl Content="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Content}">
<ContentControl.Resources>
<DataTemplate DataType="local:SimpleObjectType">
<TextBlock Text="{Binding Value}" />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</DataTemplate>
</Grid.Resources>
<DataGrid ItemsSource="{Binding ElementName=mainWin, Path=DynamicObjects}">
<DataGrid.Resources>
<Style TargetType="DataGridCell">
<Setter Property="ContentTemplate" Value="{StaticResource DefaultNodeTempate}" />
</Style>
</DataGrid.Resources>
</DataGrid>
</Grid>
Any suggestions would be much appreciated.
Thanks
Kieran
So I found the solution was to do some work in the code behind.
In the AutoGeneratingColumn event create a DataTemplate with a content control and a custom template selector (I create the selector in Xaml and found it as a resource).
Create a binding for the ContentProperty of the ContentControl with e.PropertyName as the path
Create a new DataGridTemplateColumn and set the new columns CellTemplate to your new DataTemplate
replace e.Column with your new column and hey presto the cells datacontext bind with the dynamic property for that column.
If anyone has any refinement to this please feel free to share your thoughts.
Thanks
EDIT: As requested some sample code for my solution
Custom template selector:
public class CustomDataTemplateSelector : DataTemplateSelector
{
public List<DataTemplate> Templates { get; set; }
public CustomDataTemplateSelector()
: base()
{
this.Templates = new List<DataTemplate>();
}
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
DataTemplate template = null;
if (item != null)
{
template = this.Templates.FirstOrDefault(t => t.DataType is Type ? (t.DataType as Type) == item.GetType() : t.DataType.ToString() == item.GetType().ToString());
}
if (template == null)
{
template = base.SelectTemplate(item, container);
}
return template;
}
}
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="ParentControl">
<Grid.Resources>
<local:CustomDataTemplateSelector x:Key="MyTemplateSelector" >
<local:CustomDataTemplateSelector.Templates>
<DataTemplate DataType="{x:Type local:MyCellObject}" >
<TextBox Text="{Binding MyStringValue}" IsReadOnly="{Binding IsReadOnly}" />
</DataTemplate>
</local:CustomDataTemplateSelector.Templates>
</local:CustomDataTemplateSelector>
</Grid.Resources>
<DataGrid ItemsSource="{Binding Rows}" AutoGenerateColumns="True" AutoGeneratingColumn="DataGrid_AutoGeneratingColumn" >
</DataGrid>
</Grid>
</Window>
Code behind:
private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
// Get template selector
CustomDataTemplateSelector selector = ParentControl.FindResource("MyTemplateSelector") as CustomDataTemplateSelector;
// Create wrapping content control
FrameworkElementFactory view = new FrameworkElementFactory(typeof(ContentControl));
// set template selector
view.SetValue(ContentControl.ContentTemplateSelectorProperty, selector);
// bind to the property name
view.SetBinding(ContentControl.ContentProperty, new Binding(e.PropertyName));
// create the datatemplate
DataTemplate template = new DataTemplate { VisualTree = view };
// create the new column
DataGridTemplateColumn newColumn = new DataGridTemplateColumn { CellTemplate = template };
// set the columns and hey presto we have bound data
e.Column = newColumn;
}
There may be a better way to create the data template, I have read recently that Microsoft suggest using a XamlReader but this is how I did it back then. Also I haven't tested this on a dynamic class but I'm sure it should work either way.

How to get data into the ViewModel of a UserControl?

New to WPF/MVVM. I have a data object of type "MyData". One of its properties is of type "MySubsetData".
I show a collection of "MyData" objects in a datagrid.
<DataGrid ItemsSource="{Binding Path=MyDataCollection}">
<!-- Each row of the datagrid contains an item of type "MyData" -->
<DataGrid.Columns .../>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<local:MySubsetDataUserControl/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
The row details should show the content of "MySubsetData". The view of the row details is in a separate user control (here: "MySubsetDataUserControl").
At the moment I don't set a view model for "MySubsetDataUserControl", so it inherits the data context from the parent's datagrid row.
<UserControl>
<!-- Namespace stuff not shown for simplicity -->
<Grid DataContext="{Binding Path=MySubsetData}">
<!-- Show the MySubsetData properties here -->
<!-- e.g. a textbox -->
<TextBox Text="{Binding Path=TextData, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</UserControl>
Altough this is working I face several problems with this approach:
All business logic will be in the user control parent's view model, where it simply doesn't belong. Making the view model messier than it need to be. Not to mention that command bindings in the user controls xaml look very ugly as well. It just doesn't feel right.
As more row details could be visible at the same time, I can't bind the properties of "MySubsetData" to an observable property in the view model. I.e. if I change a property in code (e.g. TextData) the change will not be reflected in the view. My workaround is not to alter the property "TextData". Instead I change the content of the textbox Text property, which in turn will update the "TextData" property. And that feels very wrong!
So I would like to use another view model for my user control, but I don't know how to access my data then.
<UserControl.DataContext>
<local:UserControlViewModel/>
</UserControl.DataContext>
How do I access "MySubsetData" now?
Let assume you have a view model like this:
public class ViewModel
{
public IEnumerable<MyData> MyDataCollection{get; private set;}
}
Where
public class MyData
{
public MySubsetData MySubsetData { get; }
}
Your view containing the DataGrid would be
<UserControl.DataContext>
<local:ViewModel>
</UserControl.DataContext>
<DataGrid ItemsSource="{Binding Path=MyDataCollection}">
<DataGrid.Columns .../>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<!-- each row of the items control has an implicit DataContext of MyData -->
<!-- so bind the DataContext of the subset control to MySubsetData -->
<local:MySubsetDataUserControl DataContext={Binding MySubsetData}/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
Now your subset control can look like
<UserControl>
<Grid>
<TextBox Text="{Binding Path=TextData, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</UserControl>
On re-reading the question, maybe all I've done is repeat the Xaml from the question in a slightly different way.
However the various classes should be implementing INotifyPropertyChanged, e.g.
public class MySubsetData : INotifyPropertyChanged
{
public string TextData
{
get{...}
set{...; OnPropertyChanged("TextData"); }
}
}
Then the TextBox bound to the TextData property will reflect changes made in code.

Resources