locked
Grid with name and color binded to it? RRS feed

  • Question

  • Hello all, I am having some trouble binding some data to a grid. I have an object which has 2 properties:

    public string Name { get; set; }
    
    public string Color { get; set; } //Hex value of the colour
    
    
    

     

    I am trying to bind the grid with this color but having some issues. I have tried using a converter but no luck. Maybe I am doing something silly but I would appreciate a simple example from someone so I could get started. My grid looks like this:

     

    <StackPanel Margin="0,0,0,10" VerticalAlignment="Top" HorizontalAlignment="Center">
    			<sdk:DataGrid x:Name="dgScoreRanges"
    				MaxHeight="350" 
    				AutoGenerateColumns="False" 
    				HeadersVisibility="Column"
            SelectionChanged="dgScoreRanges_SelectionChanged"
    				IsReadOnly="True" d:LayoutOverrides="GridBox">
    				<sdk:DataGrid.Columns>                  
    					<sdk:DataGridTemplateColumn Header="Score Range" Width="*" SortMemberPath="Score">
    						<sdk:DataGridTemplateColumn.CellTemplate>
    							<DataTemplate>
    								<TextBlock Text="{Binding Range}" Margin="7 4 8 5" Foreground="Black" />                        
    							</DataTemplate>
    						</sdk:DataGridTemplateColumn.CellTemplate>
    					</sdk:DataGridTemplateColumn>
    					<sdk:DataGridTemplateColumn Header="Color" Width="*">
    						<sdk:DataGridTemplateColumn.CellTemplate>
    							<DataTemplate>
                    <TextBlock Text="Hello" Foreground="{Binding Color, Converter={StaticResource ColorConverter} }"></TextBlock>
    							</DataTemplate>
    						</sdk:DataGridTemplateColumn.CellTemplate>
    					</sdk:DataGridTemplateColumn>					
    					<sdk:DataGridTemplateColumn Width="100" CanUserSort="False">
              	<sdk:DataGridTemplateColumn.CellTemplate>
                	<DataTemplate>
                  	<StackPanel Orientation="Horizontal">
                    	<Button Style="{StaticResource IconButton}" ToolTipService.ToolTip="Edit" Cursor="Hand" Margin="7,4,8,5" Name="linkEdit" Click="linkEdit_Click">
                      	<Button.Content>
                      		<Image Source="/ReACTSL;component/Assets/Images/Icons/icon-edit-20.png" Style="{StaticResource IconStyle}"/>
    										</Button.Content>
    									</Button>
                      <Border Width="2"></Border>
                      	<Button Style="{StaticResource IconButton}" ToolTipService.ToolTip="{Binding Path=IsDisabled, Mode=OneWay, Converter={StaticResource DeleteConverter}}" Cursor="Hand" Margin="7,4,8,5" Name="linkDelete" Click="linkDelete_Click">
                        	<Button.Content>
                          	<Image Source="/ReACTSL;component/Assets/Images/Icons/icon-delete-20.png" Style="{StaticResource IconStyle}"/>
    											</Button.Content>
                        </Button>
    								</StackPanel>
    							</DataTemplate>
    						</sdk:DataGridTemplateColumn.CellTemplate>
    					</sdk:DataGridTemplateColumn>
    				</sdk:DataGrid.Columns>
    			</sdk:DataGrid>
      public class ColorConverter : IValueConverter
      {
        //public Color ConvertIntoColor(string hexValueOfColor)
        //{
    
        //}
    
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
          return new SolidColorBrush(Colors.Green);
          //string myColor = value.ToString();
          //Color col = Color.FromArgb(System.Convert.ToByte(myColor.Substring(1, 2), 16)
          //  , System.Convert.ToByte(myColor.Substring(3, 2), 16)
          //  , System.Convert.ToByte(myColor.Substring(5, 2), 16)
          //  , System.Convert.ToByte(myColor.Substring(7, 2), 16));
    
          ////SolidColorBrush brush = new SolidColorBrush(col);
          ////lblCreationDate.Background = brush;
          //return col;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
          return new SolidColorBrush(Colors.Yellow);
        }
      }
    

     

    Thank you, Onam.

    Monday, May 16, 2011 8:18 AM

Answers

  • I realised that from viewing another similar post that I needed to wrap a StackPanel in my column so it looks like this:

              <sdk:DataGridTemplateColumn Header="Color" CanUserReorder="False" MaxWidth="100">
                <sdk:DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <StackPanel Background="{Binding Colour, Converter={StaticResource ColorConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center">
                      <TextBlock Text="" Margin="5 5 5 5" MinHeight="5" MinWidth="5" Width="5" Height="5"/>
                    </StackPanel>
                  </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
              </sdk:DataGridTemplateColumn>

     

    I learned that I can't bind a background color to a TextBlock, instead I need to wrap the TextBlock into a StackPanel and then color the background of the StackPanel. Thanks for the reply Chuck, you've helped me in the past related to a DLL issue and hope you continue doing a great job.

    Thanks, Onam.

    Tuesday, May 17, 2011 10:20 AM

All replies

  • Are you getting any particular errors?
    Monday, May 16, 2011 2:00 PM
    Moderator
  • No errors, its just not setting a color on my second column...
    Monday, May 16, 2011 2:59 PM
  • Does your converter get run? You could run it in VS and put a breakpoint in your Convert method to verify the binding is working and running the converter.

    If you can't solve it, I'd be happy to take a look if you email me the zipped project to first.last@microsoft.com using my name.

    Monday, May 16, 2011 3:34 PM
    Moderator
  • I realised that from viewing another similar post that I needed to wrap a StackPanel in my column so it looks like this:

              <sdk:DataGridTemplateColumn Header="Color" CanUserReorder="False" MaxWidth="100">
                <sdk:DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <StackPanel Background="{Binding Colour, Converter={StaticResource ColorConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center">
                      <TextBlock Text="" Margin="5 5 5 5" MinHeight="5" MinWidth="5" Width="5" Height="5"/>
                    </StackPanel>
                  </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
              </sdk:DataGridTemplateColumn>

     

    I learned that I can't bind a background color to a TextBlock, instead I need to wrap the TextBlock into a StackPanel and then color the background of the StackPanel. Thanks for the reply Chuck, you've helped me in the past related to a DLL issue and hope you continue doing a great job.

    Thanks, Onam.

    Tuesday, May 17, 2011 10:20 AM