Trying to embed images into WPF GridView

[somnadh]

Hi,

I'am a UX Designer (very lil or no coding experience ) using Expression Blend. I have a WPF GridView and trying to databind with some sample data . I need to embed images in one of the columns, have "image" has one of the data objects and pointing to a image folder in the solution. The images show up in the data binding dialog box (please see attachment) but do not appear in the Gird.

Don't know if it's the path to the images or something else is wrong, Appreciate any help.

Here's the code:
<telerik:RadGridView x:Name="radGridView" Margin="0,-2,0,0" VerticalAlignment="Top" ItemsSource="{Binding Collection, Mode=OneTime}" AreRowDetailsFrozen="{Binding Collection[0].Collection[0].Collection[0].Collection, Mode=OneTime}" RowDetailsVisibilityMode="VisibleWhenSelected" Height="380.337" ContextMenu="{Binding Collection, Source={StaticResource ContextMenu}}" telerik:Theming.Theme="Transparent" telerik:StyleManager.Theme="Transparent" ShowGroupPanel="False" ActionOnLostFocus="None" EditTriggers="None" EnableRowVirtualization="False" IsSynchronizedWithCurrentItem="False" Background="Transparent"  GridLinesVisibility="None">
                                <telerik:RadContextMenu.ContextMenu>
                                    <telerik:RadContextMenu DataContext="{Binding Source={StaticResource ContextMenu}}" ItemsSource="{Binding Collection}"/>
                                </telerik:RadContextMenu.ContextMenu>
                                <telerik:RadGridView.RowDetailsTemplate>
                                    <DataTemplate>
                                        <telerik:RadTabControl Background="#FF3E444A">
                                            <telerik:RadTabItem Header="Composition">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                            <telerik:RadTabItem Header="Attribute Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                                </telerik:RadTabItem>
                                               <telerik:RadTabItem Header="Account Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                            <telerik:RadTabItem Header="Location Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                        </telerik:RadTabControl>
                                    </DataTemplate>
                                </telerik:RadGridView.RowDetailsTemplate>                      
                            </telerik:RadGridView>

[Vanya Pavlova]

Hi somnadh,

In your case the column points to the image folder in your solution and shows only the path to this folder.
That is normal behaviour due to the fact you have to explicitly set the property that contains this path.
Your solution is pretty simple:

<telerikGrid:GridViewImageColumn DataMemberBinding="{Binding ImageUrl}"/>

You can read more about this column type here.
Attached is a sample solution that demonstrates this approach.
If you need any additional information do not hesitate to contact us.

Sincerely yours,
Vanya Pavlova
the Telerik team

[somnadh]

Hi Vanya,

Thanks a lot for the quick response.

That kinda sounds like a simple solution but I'm still having trouble getting it to work, u know Designer at work.

I'm not defining any columns in my grid so not sure where the code would go. I also have row details donnu if that matters.

Appreciate if you can help me figure this out. Here's the code:

<telerik:RadGridView x:Name="radGridView" Margin="0,-2,0,0" VerticalAlignment="Top" ItemsSource="{Binding Collection, Mode=OneTime}" AreRowDetailsFrozen="{Binding Collection[0].Collection[0].Collection[0].Collection, Mode=OneTime}" RowDetailsVisibilityMode="VisibleWhenSelected" Height="380.337" ContextMenu="{Binding Collection, Source={StaticResource ContextMenu}}" telerik:Theming.Theme="Transparent" telerik:StyleManager.Theme="Transparent" ShowGroupPanel="False" ActionOnLostFocus="None" EditTriggers="None" EnableRowVirtualization="False" IsSynchronizedWithCurrentItem="False" Background="Transparent"  GridLinesVisibility="None">
                                <telerik:RadGridView.RowDetailsTemplate>
                                    <DataTemplate>
                                        <telerik:RadTabControl Background="#FF3E444A">
                                            <telerik:RadTabItem Header="Composition">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                            <telerik:RadTabItem Header="Attribute Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                                </telerik:RadTabItem>
                                               <telerik:RadTabItem Header="Account Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                            <telerik:RadTabItem Header="Location Detail">
                                                <Grid>
                                                    <Image HorizontalAlignment="Left" Width="950.5" Source="Images/Composition.jpg" Stretch="Fill" Height="167" Margin="3,3,3,3" ToolTip="loremipsum"/>
                                                </Grid>
                                            </telerik:RadTabItem>
                                        </telerik:RadTabControl>
                                    </DataTemplate>
                                </telerik:RadGridView.RowDetailsTemplate>                      
                            </telerik:RadGridView>


Once again Thanks for your help.

Best Regards

Som

[Vanya Pavlova]

Hi somnadh,

If you do not want to define your columns in xaml, you can do this in code-behind:

private void RadGridView_Loaded(object sender, RoutedEventArgs e)
    {
        GridViewDataColumn column1 = new GridViewDataColumn();
        column1.DataMemberBinding = new Binding("Property1");
        this.radGridView1.Columns.Add(column1);
        GridViewImageColumn column = new GridViewImageColumn();
        column.DataMemberBinding = new Binding("Property2");
        column.ImageHeight = 100;
        column.ImageWidth = 100;
        column.ImageStretch = Stretch.Fill;
        this.radGridView1.Columns.Add(column);
    }

When you create a sample data source in Blend, you should define the columns either in xaml or in code behind,because Blend generates automatically the ItemSource property of the GridView.
Hope this helps.

Sincerely yours,
Vanya Pavlova
the Telerik team