Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Tomas
150
Please help on style of first column in Tree grid
posted

Hi,

I am quite in Infragistics and I would need some help to style the first column in Tree Grid. I am not sure how to create a style for the first column without breaking the functionality of tree behavior. I need to combine two first columns (Left and Type) into single one. The image column it should be before the text value left. 

Simply moving the image column into first position breaks all tree functionality. This would be also an option if tree functionality would remain with images in the first column.

I've added sample project which I am trying out this functionality.

Or xaml code:

<Window xmlns:igDP="http://schemas.infragistics.com/xaml/wpf"  x:Class="fieldsBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:fieldsBinding="clr-namespace:fieldsBinding"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
<Grid.Resources>
<fieldsBinding:ComparisonElementTypeToIconConverter x:Key="ElementTypeToIconConverter" />
<Style TargetType="{x:Type igDP:CellValuePresenter}" x:Key="ComparisonElementTypeStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Image Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
MaxHeight="16"
MaxWidth="16"
Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Converter={StaticResource ElementTypeToIconConverter}}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ToolBar Grid.Row="0">
<Button Name="ExpandAllButton" Focusable="False" Content="Expand">
<Button.ToolTip>
<ToolTip Content="Expand all" />
</Button.ToolTip>
</Button>
<Button  Name="CollapseAllButton" Focusable="False" Content="Collapse">
<Button.ToolTip>
<ToolTip Content="Collapse all"/>
</Button.ToolTip>
</Button>
</ToolBar>
<igDP:XamTreeGrid  x:Name="xamComparison" Grid.Row="2"
Margin="3"
BorderThickness="1"
BorderBrush="LightBlue"
GroupByAreaLocation="None"
DataSource="{Binding Nodes}">
<igDP:XamTreeGrid.FieldSettings>
<igDP:FieldSettings AllowHiding="ViaFieldChooserOnly" />
</igDP:XamTreeGrid.FieldSettings>
<igDP:XamTreeGrid.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="4" />
</Style>
</igDP:XamTreeGrid.Resources>
<igDP:XamTreeGrid.FieldLayoutSettings>
<igDP:FieldLayoutSettings AutoGenerateFields="False" SelectionTypeRecord="Single" SelectionTypeCell="None" FilterUIType="LabelIcons" 
ExpansionIndicatorDisplayMode="CheckOnDisplay" />
</igDP:XamTreeGrid.FieldLayoutSettings>
<igDP:XamTreeGrid.FieldLayouts>
<igDP:FieldLayout IsDefault="True" Key="Result">
<igDP:FieldLayout.FieldSettings>
<igDP:FieldSettings AllowEdit="False"/>
</igDP:FieldLayout.FieldSettings>
<igDP:FieldLayout.Fields>
<!--<igDP:Field Name="Type" Label="Type" Width="Auto">
<igDP:Field.Settings>
<igDP:FieldSettings CellValuePresenterStyle="{StaticResource ComparisonElementTypeStyle}" />
</igDP:Field.Settings>
</igDP:Field>-->
<igDP:Field Name="Id" Label="Left" Width="*">
</igDP:Field>
<igDP:Field Name="Type" Label="Type" Width="Auto">
<igDP:Field.Settings>
<igDP:FieldSettings CellValuePresenterStyle="{StaticResource ComparisonElementTypeStyle}" />
</igDP:Field.Settings>
</igDP:Field>
<igDP:Field Name="Name" Label="Name" Width="Auto"/>
<igDP:Field Name="Children" ToolTip="Children field value" >
</igDP:Field>
</igDP:FieldLayout.Fields>
</igDP:FieldLayout>
</igDP:XamTreeGrid.FieldLayouts>
</igDP:XamTreeGrid>
 
</Grid>
</Window>

thanks for help in advance.

Tomas

Parents
No Data
Reply
  • 6365
    Verified Answer
    Offline posted

    Hello Tomas,

    Thank you for the sample application and code-snippet you have provided.

    In order to successfully display the child data and the expansion indicator in the XamTreeGrid when the first field (column) contains an image, I can suggest you set the ContentTemplate property of the CellValuePresenters for the image field instead of the Template property.
    By setting the Template property, the entire cell gets retemplated and its by-design functionality will not function properly, along with the issue of not displaying the expansion indicators.

    XAML:

    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate >
                <Grid Width="{Binding Width}" Height="{Binding Height}" DataContext="{Binding RelativeSource={RelativeSource AncestorType=igDP:TreeCellValuePresenter}}">
                    <Image Margin="{Binding Padding}"
        HorizontalAlignment="{Binding HorizontalContentAlignment}"
        VerticalAlignment="{Binding VerticalContentAlignment}"
        MaxHeight="16"
        MaxWidth="16"
        Source="{Binding Path=Content, Converter={StaticResource ElementTypeToIconConverter}}"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>

    I have attached a sample application that demonstrates the approach from above.

    If you have any questions, please let me know.

    XamTreeGridIssue(Modified).zip
Children
No Data