Hi,
How would I go about displaying rich text in the XamDataGrid? Nothing fancy, but I need to highlight words that match a search (the grid is used to display the results.) Whether it's a different color, bold or underline has yet to be determined, but it most likely won't be anything fancier.
Thanks,Michel
Michel,
So you want to make some text in the XamDataGrid different color, font, style etc. ( the data in the grid is generated from a search ).
In this case, I think the best approach to do this is to use Converters (IValueConverter) for the CellValuePresenter (or the Editor in the CelLValuePresenter) properties (like Foreground,Background, FontWeight, FontSize).
You can see an example for Converters on the link below - changing color of a cell depending on its value: http://community.infragistics.com/forums/p/20644/80133.aspx#80133
You can either make it for an Editor (XamTextEditor, XamNumericEditor,XamCurrencyEditor) as shown there or make it for the whole CellValuePresenter.
Hope this helps,
Alex.
Hmmm... That would affect the entire content of the cell, however? Unless I'm misreading this.
What I'd like is highlight *some* of the text in a cell. Let's say I search for "fox dog" in "The quick brown fox jumped over the lazy dog", then I would like the string displayed like this:
"The quick brown fox jumped over the lazy dog"
I think the approach you mentioned would, for example, display the whole text in bold, rather than just the specific words?
In this case, this task would be a bit more difficult. The fact that the CellValuePresenter contains only one text element makes it difficult to format different words with different style. One way to do this is to create a converter for the Template / Content of the CellValuePresenter (create as many text elements or InlineUIContainer as the number of words that the value of the cell will contain).
I think it would be better to restructure your XamDataGrid and the way the data is displayed.
"Variation on a theme" - here's what I did:
- Got a Bindable TextBlock control (so that the "inlines" can be binded - MS have left out a lot of properties that people would love to bind to...)- Created a CellValuePresenter which uses BindableTextBlock to display its content- Use a MultiValueConverter that returns an Inline object which contains various components with the proper formatting
Seems to work fine, although right now it's just a "proof of concept" - it makes the first half of the string italic and the other half bold. I have yet to implement the logic that will highlight the correct words.
One problem I've run into - and I had this problem when using a normal TextBlock, so it's not the BindableTextBlock - in a CellValuePresenter: the rows of the resulting XamDataGrid are roughly twice as high as they should be. How can I make these the same height as if I wasn't using a custom CellValuePresenter? Here's the style I'm using:
<Style x:Key="DisplayTitleStyle" TargetType="{x:Type igDP:CellValuePresenter}"> <Setter Property="Foreground" Value="Black" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}"> <cs:BindableTextBlock Height="Auto" VerticalAlignment="Center"> <cs:BindableTextBlock.BoundInline> <MultiBinding Converter="{StaticResource MultilingualStringConverter}"> <MultiBinding.Bindings> <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"></Binding> <Binding Path="SearchResultsLanguage"> <Binding.RelativeSource> <RelativeSource Mode="FindAncestor" AncestorType="{x:Type local:ClassificationSearchResultsControl}" /> </Binding.RelativeSource> </Binding> </MultiBinding.Bindings> </MultiBinding> </cs:BindableTextBlock.BoundInline> </cs:BindableTextBlock> </ControlTemplate> </Setter.Value> </Setter> </Style>
I see you have picked up on one of the two options that I proposed. Seeing that, I have started on the other one - with as many TextElements as words in the Cell. I have also not yet implemented the highlight logic, but just for test purposes I have created some in the Converter. Here is a screenshot and small code snippet of my style and converter.
<Style TargetType="{x:Type igDP:CellValuePresenter}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Label Margin="0" Padding="0"> <Label.Content> <Binding Path="Content" RelativeSource="{RelativeSource TemplatedParent}" Converter="{StaticResource converter}"/> </Label.Content> </Label> </ControlTemplate> </Setter.Value> </Setter></Style>
And converter:
public class EditorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
StackPanel sp = new StackPanel();
double i = 12.0;
string[] words = value.ToString().Split(' ');
sp = new StackPanel() { Orientation = Orientation.Horizontal };
foreach (string word in words)
Label l = new Label() { Content = word };
l.FontSize = i;
i = i + 6;
sp.Children.Add(l);
}
return sp;
// ConvertBack intentionally removed to save space
Regarding the increased size of the CellValuePresenter when applying the style is because of some default margins/paddings. Copying the default style in the DefaultStyles directory in the Infragistics folder and using it as a base will solve this issue.