Show an Image & text in the same cell in XamDataGrid


 

 Show an Image & text in the same cell (One Column) in XamDataGrid :-

 

 

ImageWithText
ImageWithText

[code language=”csharp”]
<Style TargetType=”{x:Type igWPF:CellValuePresenter}” x:Key=”FileWithIcontyle” BasedOn=”{StaticResource {x:Type igWPF:CellValuePresenter}}”>

<Setter Property=”ContentTemplate” >

<Setter.Value>

<DataTemplate>

<StackPanel Orientation=”Horizontal”>

<Image VerticalAlignment=”Center” Width=”16″ Height=”16″ Margin=”5,0,0,0″ Source=”{Binding Record.DataItem.ImageSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type igWPF:DataRecordCellArea}}}”/>

<TextBlock VerticalAlignment=”Center” Margin=”5,0,0,0″ Text=”{Binding Record.DataItem.Name, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type igWPF:DataRecordCellArea}}}” />

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>
[/code]

Apply this style on the xamdataGrid

[code language=”csharp”]

<igWPF:XamDataGrid Name=”gridParametersets” DataSource=”{Binding ParameterSets}”>
<igWPF:XamDataGrid.FieldLayouts>
<igWPF:FieldLayout>
<igWPF:FieldLayout.Fields>
<igWPF:Field Name=”Name” Label=”Name”>
<igWPF:Field.Settings>
<igWPF:FieldSettings AllowEdit=”False” CellValuePresenterStyle=”{StaticResource FileWithIcontyle}” Width=”150″/>
</igWPF:Field.Settings>
</igWPF:Field>
<igWPF:Field Name=”Type” Label=”Type” >
<igWPF:Field.Settings>
<igWPF:FieldSettings AllowEdit=”False” Width=”200″ />
</igWPF:Field.Settings>
</igWPF:Field>
</igWPF:Field.Settings>
</igWPF:Field>
</igWPF:FieldLayout.Fields>
</igWPF:FieldLayout>
</igWPF:XamDataGrid.FieldLayouts>
</igWPF:XamDataGrid>

[/code]


Style on XamDataGrid

 

Selection of whole row on click on 1st cell of the row
Selection of whole row on click on 1st cell of the row

[code language=”csharp”]
private void grid_Loaded(object sender, RoutedEventArgs e)
{
// Fixed the location of First row so that it will looks like Header.
gridAxis.Records[0].FixedLocation = FixedRecordLocation.FixedToTop;

// First cell of first row should be disabled.
((DataRecord)gridAxis.Records[0]).Cells[0].IsEnabled = false;

// Fixed the location of First column so that it will looks like Header.
gridAxis.FieldLayouts[0].Fields[0].FixedLocation = FixedFieldLocation.FixedToNearEdge;

// Click on first cell of the row will select whole row
gridAxis.FieldLayouts[0].Fields[0].Settings.CellClickAction = CellClickAction.SelectRecord;
}

[/code]

Written by 

Leave a Reply

Your email address will not be published. Required fields are marked *