Search code examples
c#silverlightbindinggriditemscontrol

Grid Items was not render in proper position of row and column


i have a trouble in bind data to Grid, element was generated but not in a proper row and column

when assign a source at that time all data will be present but not in a proper grid's row and column all controls will be render in a Column 0 and row 0

enter image description here

my code is below Xaml

<UserControl.Resources>
    <DataTemplate x:Name="DTItemTemp">
        <Border Width="200" Height="Auto" BorderBrush="Red" BorderThickness="2" Grid.Row="{Binding Grow}" Grid.Column="{Binding Gcol}" Margin="5">
            <StackPanel Orientation="Vertical" >
                <TextBlock Text="{Binding Name, Mode=OneWay}"></TextBlock>
                <TextBlock Text="{Binding Grow, Mode=OneWay, StringFormat='Row {0}'}"></TextBlock>
                <TextBlock Text="{Binding Gcol, Mode=OneWay, StringFormat='Col {0}'}"></TextBlock>
            </StackPanel>
        </Border>
    </DataTemplate>
    <DataTemplate x:Name="DTGridTemp">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Name, Mode=OneWay}"></TextBlock>
            <Grid ShowGridLines="True" Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <ItemsControl   ItemsSource="{Binding MyItem,Mode=TwoWay}" 
                            ItemTemplate="{StaticResource DTItemTemp}" 
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
            </Grid>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Name="DTStack">

    </DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">

    <ItemsControl x:Name="stksource"   ItemTemplate="{StaticResource DTGridTemp}" 
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />

</Grid>

Cs File

public partial class MainPage : UserControl
{
    public MainPage()
    {         
        InitializeComponent();           
        mydata data = new mydata();
        data.DTGrid = new List<Grids>();
        for (int i = 0; i < 3; i++)
        {
            Grids grd = new Grids();
            grd.MyItem = new List<Items>();
            grd.Name = string.Format("Grid of {0}", i);
            for (int j = 0; j < 3; j++)
            {
                Items it = new Items();
                it.Name = string.Format("Item {0} of {1}", i, j);

                it.Grow = 0;
                it.Gcol = j;

                grd.MyItem.Add(it);
            }
            data.DTGrid.Add(grd);
        }            
        stksource.ItemsSource = data.DTGrid;
    }
}

public class mydata
{
    public List<Grids> DTGrid { get; set; }
}
public class Grids
{
    public string Name { get; set; }
    public List<Items> MyItem { get; set; }
}
public class Items
{
    public string Name { get; set; }
    public int Grow { get; set; }
    public int Gcol { get; set; }
}

Solution

  • After much back-and-forth, here's my final answer. Add a Style for ContentPresenters to the ItemsControl's resources.

    <ItemsControl x:Name="stksource"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name, Mode=OneWay}"></TextBlock>
                    <ItemsControl ItemsSource="{Binding MyItem}" 
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    
                        <!-- The ItemsPanel property tells the ItemsControl2 what type of container to use for all items -->
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Grid ShowGridLines="True" Margin="10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                </Grid>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
    
                        <!-- The ItemTemplate property tells the ItemsControl2 how each data item will be represented in the UI -->
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Width="200" Height="Auto" BorderBrush="Red" BorderThickness="2" Margin="5">
                                    <StackPanel Orientation="Vertical" >
                                        <TextBlock Text="{Binding Name, Mode=OneWay}"></TextBlock>
                                        <TextBlock Text="{Binding Grow, Mode=OneWay, StringFormat='Row {0}'}"></TextBlock>
                                        <TextBlock Text="{Binding Gcol, Mode=OneWay, StringFormat='Col {0}'}"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
    
                        <!-- The style for ContentPresenter will target the item containers -->
                        <ItemsControl.Resources>
                            <Style TargetType="ContentPresenter">
                                <Setter Property="Grid.Row" Value="{Binding Grow}" />
                                <Setter Property="Grid.Column" Value="{Binding Gcol}" />
                            </Style>
                        </ItemsControl.Resources>
    
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>