Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

How to draw rectangle or image in column of datagrid RSS

12 replies

Last post Jan 15, 2012 07:55 PM by mtiede@swtechnologies.com

(1)
  • Marek Bober

    Marek Bober

    Member

    54 Points

    37 Posts

    How to draw rectangle or image in column of datagrid

    Mar 14, 2008 11:42 AM | LINK

     Hi,

    I have datagrid with ItemsSource List<MyClass> ....

    In my class I have attributes: string, string, Rectangle.

    How can I draw Rectangle in column in this datagrid?

    Because when I use it, I have only text "System.Window...." in every Column for attribute Rectangle.

    Thanks a lot. 

  • Allen Chen – MSFT

    Allen Chen –...

    Star

    14215 Points

    1854 Posts

    Microsoft

    Re: How to draw rectangle or image in column of datagrid

    Mar 17, 2008 07:27 AM | LINK

    Hi:

      You can use template to do so. For instance:

     <my1:DataGrid x:Name="DataGrid1" Width="500" Height="500">
                <my1:DataGrid.Columns>
                    <my1:DataGridTemplateColumn Width="80">
                        <my1:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Image Width="50" Height="50" Source="http://msdn2.microsoft.com/en-us/library/ms610982.JOLT_imageobject(en-us,VS.95).png"></Image>

                            </DataTemplate>
                        </my1:DataGridTemplateColumn.CellTemplate>
                    </my1:DataGridTemplateColumn>
                </my1:DataGrid.Columns>
            </my1:DataGrid>

    Regards

    Sincerely,
    Allen Chen
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Marek Bober

    Marek Bober

    Member

    54 Points

    37 Posts

    Re: Re: How to draw rectangle or image in column of datagrid

    Mar 17, 2008 10:01 AM | LINK

     Is it possible draw by source code in c#? How?

  • Allen Chen – MSFT

    Allen Chen –...

    Star

    14215 Points

    1854 Posts

    Microsoft

    Re: Re: How to draw rectangle or image in column of datagrid

    Mar 17, 2008 10:51 AM | LINK

    Hi:

     Currently  FrameworkTemplate has no VisualTree properties supported in SilverLight. So it's impossible to do this in code behind now.

    Regards

    Sincerely,
    Allen Chen
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Marek Bober

    Marek Bober

    Member

    54 Points

    37 Posts

    Re: Re: Re: How to draw rectangle or image in column of datagrid

    Mar 17, 2008 01:10 PM | LINK

     Ouh,
    it is bad. So another Idea? I have this problem: I need to preview color (by rect or color of text) for each column in DataGrid by code. Is there another way, how to do this?

  • Allen Chen – MSFT

    Allen Chen –...

    Star

    14215 Points

    1854 Posts

    Microsoft

    Re: Re: Re: How to draw rectangle or image in column of datagrid

    Mar 18, 2008 03:01 AM | LINK

    Hi:

      If my understanding is correct what you want to do is to add different controls to DataGrid according to relevant data binding to each row. If so you can try something like this:

           <my1:DataGrid x:Name="DataGrid1" Width="500" Height="500">
                <my1:DataGrid.Columns>
                    <my1:DataGridTemplateColumn Width="80">
                        <my1:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                            
    <StackPanel Loaded="StackPanel_Loaded"></StackPanel>
                            </DataTemplate>
                        </my1:DataGridTemplateColumn.CellTemplate>
                    </my1:DataGridTemplateColumn>
                </my1:DataGrid.Columns>
            </my1:DataGrid>

       public Page()
            {
                InitializeComponent();
                
         
                for (int i = 0; i < 10; i++)
                {

                    Customer c = new Customer { age = i };
                    array.Add(c);
                }
            
                this.DataGrid1.ItemsSource = array;
             }

       private void StackPanel_Loaded(object sender, RoutedEventArgs e)
            {
            StackPanel sp=    sender as StackPanel;
                Customer c = ((Grid)((StackPanel)sender).Parent).DataContext as Customer;
                if (sp!=null&&c != null)
                {
                    Rectangle rt = new Rectangle();
                    rt.Width = 30;
                    rt.Height = 30;
                    if (c.age % 2 == 0)
                    {
                                 
                        rt.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 0, 0));
                      
                    }
                    else
                    {
                        rt.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255,100, 50, 200));
            
                    }
                    sp.Children.Add(rt);
                }

            }

      public class Customer : INotifyPropertyChanged
        {


            #region INotifyPropertyChanged Members

            public event PropertyChangedEventHandler PropertyChanged;

            private int _age;

            public int age
            {
                get { return _age; }
                set
                {
                    _age = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("age"));
                    }
                }
            }

            #endregion
        }

    Regards

    Sincerely,
    Allen Chen
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Marek Bober

    Marek Bober

    Member

    54 Points

    37 Posts

    Re: Re: Re: How to draw rectangle or image in column of datagrid

    Mar 18, 2008 07:39 AM | LINK

     Hi,

    it's working [:)]. Thank you very much.

    I had to remove property AUTOGENERATECOLUMNS and than it's works very well.
     

  • Dhawal Shah

    Dhawal Shah

    Member

    14 Points

    9 Posts

    Re: Re: Re: Re: How to draw rectangle or image in column of datagrid

    Jun 11, 2008 06:37 AM | LINK

    Hi,

    I had used something similar to this in my application:
     Customer c = ((Grid)((StackPanel)sender).Parent).DataContext as Customer;
    But now that I have converted my application to Beta 2, I get the following error:

    Unable to cast object of type 'System.Windows.Controls.ContentPresenter' to type 'System.Windows.Controls.Grid'.

     

  • Buttsch

    Buttsch

    Member

    1 Points

    6 Posts

    Re: Re: Re: Re: How to draw rectangle or image in column of datagrid

    Jun 12, 2008 07:48 AM | LINK

    Hey Dhawal,

    I had the same problem and i solved it like this:

    Customer c = ((ContentPresenter)((StackPanel)sender).Parent).Content as Customer;

    Hope this helps.
    Buttsch

  • skea

    skea

    Member

    54 Points

    111 Posts

    Re: Re: Re: How to draw rectangle or image in column of datagrid

    Mar 10, 2010 12:04 AM | LINK

    I would like to implement exactly the same thing, but my c in

    //Customer c = ((Grid)((StackPanel)sender).Parent).DataContext as Customer;

    Customer c = ((ContentPresenter)((StackPanel)sender).Parent).Content as Customer; is always null.

    Using SL3.Where am i going wrong.

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.ComponentModel;
    
    namespace DataGridCustomColumn
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                List<Customer> array = new List<Customer>();
                for (int i = 0; i < 10; i++)
                {
                   
                    Customer c = new Customer { age = i };    
                    
                    array.Add(c);
                }
    
                this.DataGrid1.ItemsSource = array;
            }
    
            private void StackPanel_Loaded(object sender, RoutedEventArgs e)
            {
                StackPanel sp = sender as StackPanel;
                
                //Customer c = ((Grid)((StackPanel)sender).Parent).DataContext as Customer;
                Customer c = ((ContentPresenter)((StackPanel)sender).Parent).Content as Customer;
                if (sp != null && c != null)
                {
                    Rectangle rt = new Rectangle();
                    rt.Width = 30;
                    rt.Height = 30;
                    if (c.age % 2 == 0)
                    {
    
                        rt.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 0, 0));
    
                    }
                    else
                    {
                        rt.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 100, 50, 200));
    
                    }
                    sp.Children.Add(rt);
                }
            }
    
            public class Customer : INotifyPropertyChanged
            {
    
    
                #region INotifyPropertyChanged Members
    
                public event PropertyChangedEventHandler PropertyChanged;
    
                private int _age;
    
                public int age
                {
                    get { return _age; }
                    set
                    {
                        _age = value;
                        if (PropertyChanged != null)
                        {
                            PropertyChanged(this, new PropertyChangedEventArgs("age"));
                        }
                    }
                }
    
                #endregion
            }
        }
    }