Vertival Orientation GridViewImageColumn Cells

[Maurizio]

I'm using a GridViewImageColumn to display images that are smaller than the cell.

How do I change Horizontal Orientation or Vertical Orientation in XAML to let the image appear e.g. on top or on bottom of the cell?

[Stefan Nenchev]

Hello Peter,

You can create a Style that targets and set the needed properties within it. I am adding a code snippet that I have tested from my side:

<Style x:Key="ImageColumnStyle" TargetType="telerik:GridViewCell">
            <Setter Property="Background" Value="Red"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Top"></Setter></Style>

Eventually, you can assign the style to the corresponding GridViewImageColumn through the CellStyle property:

<telerik:GridViewImageColumn  ImageStretch="None"
     DataMemberBinding="{Binding Image}"
     CellStyle="{StaticResource ImageColumnStyle}" >

Peter, please update me if the information provided was useful.

Regards,
Stefan Nenchev
Telerik

[Maurizio]

Thanks Stefan for you reply, but it does not work. I had tried this also already in vain.

 Here is my Style:

    <telerik:RadGridView.Resources>
 <Style x:Key="MyImageColumnStyle" TargetType="telerik:GridViewCell">
     <Setter Property="VerticalContentAlignment" Value="Top"/>
 </Style>
</telerik:RadGridView.Resources>

 And this is my ColumnDefinition:

<telerik:GridViewImageColumn
DataMemberBinding=
"{Binding Level, converter=converter:LoggingLevelToImageSourceConverter}}"
Header="Level" UniqueName="Level"
IsGroupable="False" IsFilterable="False"
ShowFieldFilters="False" ImageWidth="16"
CellStyle="{StaticResource MyImageColumnStyle}" />

 

Though, the image/icon in the cell is not aligned top of the cell (see screenshot). Any ideas?

 

[Stefan Nenchev]

Hi Peter,

I have created a simple project from my end that implements the same approach and setting the HorizontalContentAlignment and VerticalContentAlignment properties seems to do the job. I am also attaching a screenshot and the project itself for you just to check if this is the behavior you need to achieve. 

Peter, would it be possible to send me a sample project from your end as well which I can review and further investigate?

Regards,
Stefan Nenchev
Telerik