none
Adding image columns dynamically in datagrid in silverlight

    Question

  • I am creating 

    DataGridTextColumn at runtime in my project, Now

    I want to add an image columns,

    I am using the following code for this

    DataGridTextColumn

    dtextcol = new DataGridTextColumn

    ();

    TextBlock txtbl = new TextBlock

    ();

    txtbl.TextWrapping =

    TextWrapping

    .Wrap;

    dtextcol.CanUserSort =

    true

    ;

    dtextcol.IsReadOnly =

    false

    ;

    dtextcol.Header = strHeaderName;

    dtextcol.SortMemberPath = strBindingParameterName;

    indexingConverter convert = new indexingConverter

    ();

    System.Windows.Data.

    Binding bind = new System.Windows.Data.

    Binding

    {

    Converter = convert,

    ConverterParameter = strBindingParameterName

    };

    dtextcol.Binding = bind;

    Tuesday, July 13, 2010 2:18 AM

Answers

  • You need to use the DataGridTemplateColumn in order to display an image in a DataGrid. That can all be done in code behind, e.g.:

                var myTemplateColumn = new DataGridTemplateColumn();
                myTemplateColumn.Header = "Image Column";
                myTemplateColumn.CellTemplate = (DataTemplate)XamlReader.Load("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"><Image Source=\"http://diditwith.net/content_images/Dog_With_Santa.jpg\"/></DataTemplate>");
                mProjectDataGrid.Columns.Add(myTemplateColumn);

                var myTemplateColumn = new DataGridTemplateColumn();

                myTemplateColumn.Header = "Image Column";

                myTemplateColumn.CellTemplate = (DataTemplate)XamlReader.Load("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"><Image Source=\"http://diditwith.net/content_images/Dog_With_Santa.jpg\"/></DataTemplate>");

                myDataGrid.Columns.Add(myTemplateColumn);


    Tuesday, July 13, 2010 7:29 AM

All replies

  • Hi Sachin

    To show an image in a datagrid column you can use the DataGridTemplateColumn as follows:


                                <datacontrols:DataGridTemplateColumn>
                                    <datacontrols:DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <Image  HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    Stretch="None"
                                                    Source="{Binding UrlPathRepeat}" />
                                            <!--<Image Source="http://diditwith.net/content_images/Dog_With_Santa.jpg" Height="30"/>-->
                                        </DataTemplate>
                                    </datacontrols:DataGridTemplateColumn.CellTemplate>
                                </datacontrols:DataGridTemplateColumn>

                                <datacontrols:DataGridTemplateColumn>

                                    <datacontrols:DataGridTemplateColumn.CellTemplate>

                                        <DataTemplate>

                                            <Image Source="http://diditwith.net/content_images/Dog_With_Santa.jpg"/>

                                        </DataTemplate>

                                    </datacontrols:DataGridTemplateColumn.CellTemplate>

                                </datacontrols:DataGridTemplateColumn>


    The image can be bound or programmatically set in code behind as you wish. Note however that in Silverlight 4 the Image Source in this context seem to require absolute image path or be read from a resource file. Just pointing to the image relative to the XAP-file as we use to might not display the image...


    Best Regards

    Christian

    Tuesday, July 13, 2010 2:44 AM
  • Hi

    Thanks for reply

    But our requirement to create image textcolumn at runtime not at design time. 

    Tuesday, July 13, 2010 6:44 AM
  • You need to use the DataGridTemplateColumn in order to display an image in a DataGrid. That can all be done in code behind, e.g.:

                var myTemplateColumn = new DataGridTemplateColumn();
                myTemplateColumn.Header = "Image Column";
                myTemplateColumn.CellTemplate = (DataTemplate)XamlReader.Load("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"><Image Source=\"http://diditwith.net/content_images/Dog_With_Santa.jpg\"/></DataTemplate>");
                mProjectDataGrid.Columns.Add(myTemplateColumn);

                var myTemplateColumn = new DataGridTemplateColumn();

                myTemplateColumn.Header = "Image Column";

                myTemplateColumn.CellTemplate = (DataTemplate)XamlReader.Load("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"><Image Source=\"http://diditwith.net/content_images/Dog_With_Santa.jpg\"/></DataTemplate>");

                myDataGrid.Columns.Add(myTemplateColumn);


    Tuesday, July 13, 2010 7:29 AM
  • I am having a silverlight datagrid with 3 Columns (IconImage , ProjectID , ProjectStatus) for that the databinding happens on the .CS side

    I want to change the 'IconImage' column's  image at runtime in .cs based on the projectstatus(On Rowdatabound i should read the row data and validate and the set the image to 'IconImage'. )

    for e.g.

    if ProjectStatus ='Active'  = then i shold load 'GreenImage' in IConImage Column

    elseif ProjectStatus ='InActive'  = then i shold load 'RedImage' in IConImage Column

     

    My Xaml Code :

     <data:DataGrid CanUserResizeColumns="False" AutoGenerateColumns="False" IsReadOnly="True" Name="dgProjectList" ItemsSource="Binding" Margin

    ="0,0,0,133">

            <data:DataGrid.Columns>

    <data:DataGridTemplateColumn>

    <data:DataGridTemplateColumn.CellTemplate>

     <DataTemplate x:Name ="IconImageTemplate" > 

     <Image x:Name="IconImage" Source="" Stretch="None"></Image>

     </DataTemplate>

     </data:DataGridTemplateColumn.CellTemplate>

     </data:DataGridTemplateColumn>

    <data:DataGridTextColumn Binding="{Binding _ProjectID}" Header="Project ID" />

     

     <data:DataGridTextColumn Binding="{Binding _ProjectStatus}" Header ="Project Status" /></data:DataGrid.Columns >

    </data:DataGrid >

     

     My .CS Code

    void Metrics_GetProjectListDetailsCompleted(object sender, WalmartPMOSilverlight.MetricesService.GetProjectListDetailsCompletedEventArgs e)

    {

                ObservableCollection<MetricesService.ProjectListDetails> projectList = e.Result;

    dgProjectList.ItemsSource = projectList;

    }

     

     Kindly Help me to solve this Problem.

    Thanks in advance.

    Sam Joshua

     

     

    Monday, December 06, 2010 12:45 AM