This is a migrated thread and some comments may be shown as answers.

Trying to embed images into WPF GridView

3 Answers 261 Views
GridView
This is a migrated thread and some comments may be shown as answers.
somnadh
Top achievements
Rank 1
somnadh asked on 09 Sep 2010, 01:56 AM
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>

3 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 09 Sep 2010, 03:22 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
somnadh
Top achievements
Rank 1
answered on 09 Sep 2010, 08:06 PM
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
0
Vanya Pavlova
Telerik team
answered on 10 Sep 2010, 12:57 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
GridView
Asked by
somnadh
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
somnadh
Top achievements
Rank 1
Share this question
or