How to bind a Dictionary List to a WrapDataGrid

Jun 1, 2009 at 1:03 PM

Hi,

We have below issue with the WrapDataGrid.

How to bind a Dictionary List to a WrapDataGrid; we have tried with below code sample.

In xaml.cs

Dictionary<string, string> dataDict = new Dictionary<string, string>();

dataDict.Add("EmployeeID", "SAM");

 List<Dictionary<string, string>> dataRows = new List<Dictionary<string, string>>();

dataRows.Add(dataDict);

ctlWrapDataGrid.DataContext = dataRows;

 In .xaml

<DataTemplate>

<TextBlock Margin="0,0,10,0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Converter={StaticResource dictionaryToStringConverter}, ConverterParameter=EmployeeID}"/>

</DataTemplate>

Thanks in Advance

Regards

Mahesh

 

Coordinator
Jun 15, 2009 at 11:32 AM

Below is the code for a minimal sample. It is not styled at all, and just shows a column called StartDate and adds a bunch of rows. Note that the only column using the DictionaryToStringConverter is in the ColumnDefintion, so that it shows in the main view.

-Stuart.

Code behind:

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;

namespace Microsoft.Cui.SamplePages
{
    public partial class GridSample : UserControl
    {
        private MyListCollection aList = new MyListCollection();

        public GridSample()
        {
            InitializeComponent();
            for (int i = 0; i < 100; i++)
            {
                Dictionary<string, string> entry = new Dictionary<string, string>();
                entry.Add("Field1", i.ToString(System.Globalization.CultureInfo.InvariantCulture));
                aList.Add(entry);
            }

            this.WrapDataGrid.DataContext = aList;
           
        }
    }

    public class MyListCollection : List<Dictionary<string, string>>
    {
 
    }

 XAML

<UserControl x:Class="Microsoft.Cui.SamplePages.GridSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctl="clr-namespace:Microsoft.Cui.Controls;assembly=Microsoft.Cui.Controls"            
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Red">
        <Grid.Resources>
           
            <ctl:DictionaryToStringConverter x:Key="DictionaryToStringConverter" />
           
            <ColumnDefinition x:Name="WGColumn1" MinWidth="88" Width="13*" />
            <DataTemplate x:Key="LookAheadCellTemplate">
                <StackPanel Orientation="Horizontal" Margin="-2,0,0,0" Cursor="Hand">
                    <StackPanel.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="#FFD7DDE3" Offset="0.107"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.964"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.604"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.582"/>
                            <GradientStop Color="#FF000000" Offset="0.022"/>
                            <GradientStop Color="#FF000000" Offset="0.036"/>
                            <GradientStop Color="#FFFCFDFD" Offset="0.018"/>

                        </LinearGradientBrush>


                    </StackPanel.Background>
                    <Ellipse Margin="3,3,8,0" Fill="Black" Height="5" Width="5" StrokeThickness="1" Stroke="Black"></Ellipse>
                    <TextBlock FontSize="13.333" FontFamily="Arial" Margin="0,3,8,0" Grid.Column="0" Grid.Row="0" Text="One" />
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="LookAheadSummaryCellTemplate">
                <Grid Height="Auto" Width="Auto">
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="#FFD7DDE3" Offset="0.107"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.964"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.604"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.582"/>
                            <GradientStop Color="#FF000000" Offset="0.022"/>
                            <GradientStop Color="#FF000000" Offset="0.036"/>
                            <GradientStop Color="#FFFCFDFD" Offset="0.018"/>

                        </LinearGradientBrush>

                    </Grid.Background>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="55"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock FontSize="13.333" FontFamily="Arial" Margin="0,3,5,0" Cursor="Hand" Text=" more " Grid.Column="1" Grid.Row="0"></TextBlock>
                    <TextBlock FontSize="13.333" FontFamily="Arial" HorizontalAlignment="Right" Cursor="Hand" Margin="5,3,0,0" Grid.Column="0" Grid.Row="0"
                               Text="Three"/>
                </Grid>
            </DataTemplate>


            <DataTemplate x:Key="LookBehindCellTemplate">
                <StackPanel Orientation="Horizontal" Margin="-2,0,0,0" Cursor="Hand">
                    <StackPanel.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFD7DDE3" Offset="0"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.884"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.604"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.582"/>
                            <GradientStop Color="#FF000000" Offset="0.942"/>
                            <GradientStop Color="#FFF6FAFB" Offset="1"/>
                            <GradientStop Color="#FFF2F6F7" Offset="0.969"/>
                        </LinearGradientBrush>
                    </StackPanel.Background>
                    <Ellipse Margin="3,0,8,0" Fill="Black" Height="5" Width="5" StrokeThickness="1" Stroke="Black"></Ellipse>
                    <TextBlock FontSize="13.333" FontFamily="Arial" Margin="0,0,8,0" Grid.Column="0" Grid.Row="0" Text="Two" />
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="LookBehindSummaryCellTemplate">
                <Grid Height="Auto" Width="Auto">
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="#FFD7DDE3" Offset="0.107"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.964"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.604"/>
                            <GradientStop Color="#FFD7DDE3" Offset="0.582"/>
                            <GradientStop Color="#FF000000" Offset="0.022"/>
                            <GradientStop Color="#FF000000" Offset="0.036"/>
                            <GradientStop Color="#FFFCFDFD" Offset="0.018"/>

                        </LinearGradientBrush>

                    </Grid.Background>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="55"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock FontSize="13.333" FontFamily="Arial" Margin="0,3,5,0" Cursor="Hand" Text=" more " Grid.Column="1" Grid.Row="0"></TextBlock>
                    <TextBlock FontSize="13.333" FontFamily="Arial" HorizontalAlignment="Right" Cursor="Hand" Margin="5,3,0,0" Grid.Column="0" Grid.Row="0"
                               Text="Three"/>
                </Grid>
            </DataTemplate>

        </Grid.Resources>
        <ctl:WrapDataGrid x:Name="WrapDataGrid"
            LookAheadCellTemplate="{StaticResource LookAheadCellTemplate}"
            LookAheadSummaryCellTemplate="{StaticResource LookAheadSummaryCellTemplate}"
            LookBehindCellTemplate="{StaticResource LookBehindCellTemplate}"                         
            LookBehindSummaryCellTemplate="{StaticResource LookBehindSummaryCellTemplate}" 
            >
            <ctl:WrapDataGrid.WrapDataGridColumns>
                <ctl:WrapDataGridColumn
                    ColumnDefinition="{StaticResource WGColumn1}"
                    BodyMarginAsString="0,0,8,0">
                    <ctl:WrapDataGridColumn.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock FontSize="12" FontFamily="Arial" HorizontalAlignment="Right" Height="20" Margin="0,4,5,0" Text="Start Date"/>
                        </DataTemplate>
                    </ctl:WrapDataGridColumn.HeaderTemplate>
                    <ctl:WrapDataGridColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock FontSize="13.333" FontFamily="Arial" Margin="0,0,10,0" HorizontalAlignment="Right" Text="{Binding Converter={StaticResource dictionaryToStringConverter}, ConverterParameter='Field1'}"/>
                        </DataTemplate>
                    </ctl:WrapDataGridColumn.CellTemplate>
                </ctl:WrapDataGridColumn>
                </ctl:WrapDataGrid.WrapDataGridColumns>
        </ctl:WrapDataGrid>
    </Grid>
</UserControl>

Aug 11, 2009 at 2:32 PM
Edited Aug 11, 2009 at 7:25 PM

Hi stuartri,

Thanks for the above code examle , i am working on a SL3 project .on the main page i display the usercontrol created by the same code above but its is not able to show any data in the WrapDataGrid ,

insted all the rows in the grid display   --> " System.Collections.Generic.Dictionary'2[ System.String]".

I am not sure but is it due to improper/missing converter ??  the xaml page property is  BuildAction:Page , Copy to Output Directory:Do not copy ,CustomTool: MSBuild:Compile

"{Binding Converter={StaticResource dictionaryToStringConverter}, ConverterParameter='Field1'}"/>

I have taken a look at the   Microsoft.Cui.SamplePages\WrapDataGridpageSmall.xaml   and  facing same problem  , it would be helfull if some one can point why is this error

 

 Update

the error is related to the <ctl:DictionaryToStringConverter > , may be it is not found or not accecible not sure

 

SOLVED

I did not copy the Application.Resources from the CUI Sample Application to my application .

my confusment is why do we have a<ctl:DictionaryToStringConverter x:Key="DictionaryToStringConverter" /> in the WrapDataGridPageSmall.xaml

when we already have same Resource defined in the App.xaml