How to use WrapPanel's DataTemplate

Question

I've a WrapPanel to show some elements. But I want to use DataTemplate to show them. Here is my XAML code of WrapPanel

<WrapPanel Margin="10,57,12,10" x:Name="wrp1">
        <WrapPanel.Resources>
            <DataTemplate DataType="{x:Type local:DateItem}">
                <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Width="250" Height="300" Background="Blue">
                    <Label Content="{Binding Path=DateString}" FontSize="20" Cursor="Hand" Foreground="White" Background="Red" FontWeight="Bold" VerticalAlignment="Bottom" HorizontalAlignment="Left" Height="38" VerticalContentAlignment="Center" Padding="5,0,5,0"/>
                </Grid>
            </DataTemplate>
        </WrapPanel.Resources>
    </WrapPanel>

And this is the code of DateItem

 public class DateItem : UIElement
{
    public string DateString { get; set; }
}

When the window initialized, i'm creating one DateItem with DateString parameter and adding that to WrapPanel as child.

  DateItem di = new DateItem();
  di.DateString = "28.04.2014";
  wrp1.Children.Add(di);

I think everything is fine but wrap panel shows nothing :(

Can you help me with this?

Rohit Vats · Accepted Answer · 2014-09-21T15:33:00.467

You have confused UI controls with DataTemplates which is used to define the presentation of your data. To render data, you have to set content of control which can be done using ContentControl. Also, you can use ItemsControl if you want to add multiple times.

XAML:

<WrapPanel x:Name="wrp1">
    <WrapPanel.Resources>
        <DataTemplate DataType="{x:Type local:DateItem}">
            <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Width="250"
                  Height="300" Background="Blue">
                <Label Content="{Binding Path=DateString}" FontSize="20" Cursor="Hand"
                       Foreground="White" Background="Red" FontWeight="Bold" 
                       VerticalAlignment="Bottom" HorizontalAlignment="Left"
                       Height="38" VerticalContentAlignment="Center"
                       Padding="5,0,5,0"/>
            </Grid>
        </DataTemplate>
    </WrapPanel.Resources>
    <ItemsControl x:Name="itemsControl"/>
</WrapPanel>

Code behind:

DateItem di = new DateItem();
di.DateString = "28.04.2014";
itemsControl.Items.Add(di);

DateItem:

public class DateItem
{
    public string DateString { get; set; }
}

In case you still interested in rendering it as a Control, you have to define default Style and not default template.

XAML:

<WrapPanel x:Name="wrp1">
    <WrapPanel.Resources>
        <Style TargetType="{x:Type local:DateItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch"
                              Width="250" Height="300" Background="Blue">
                            <Label
                               Content="{Binding Path=DateString, RelativeSource=
                                            {RelativeSource Mode=TemplatedParent}}" 
                               FontSize="20" Cursor="Hand" Foreground="White"
                               Background="Red" FontWeight="Bold"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Left"
                               Height="38" VerticalContentAlignment="Center" 
                               Padding="5,0,5,0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </WrapPanel.Resources>
</WrapPanel>

Code behind:

DateItem di = new DateItem();
di.DateString = "28.04.2014";
wrp1.Children.Add(di);

DateItem:

public class DateItem : Control
{
    public string DateString { get; set; }
}

Hi, thank you for the answer but it is not working too. or I can't make it work. I've one more thing, I'll add DateItem multiple times. How can I achieve this? — cKNet, Sep 21 '14 at 15:20
First item definitely works for me. Anyhow, if you still want it to render as control, you need default style. Check out updated in answer for second approach. — Rohit Vats, Sep 21 '14 at 15:21
Sorry, first one is working. OK, how can I add DateItem multiple times with using the first sample? — cKNet, Sep 21 '14 at 15:26
According to first code, when I add items to ItemsControl, the WrapPanel means nothing. My goal is, I'll add ONE horizontally stretched GRID, and add some image thumbnails with grids after that add one more horizontally stretched grid, and thumbnails again... With this code, I just add items INSIDE the ItemsContainer, so, WrapPanel does not work as I wanted. — cKNet, Sep 21 '14 at 19:59
THis is what I want actually. https://community.devexpress.com/blogs/theprogressbar/WPF_Silverlight_Gallery_Control_Groups_Images_61ECD700.png — cKNet, Sep 21 '14 at 20:01
You need to set `ItemsPaneTempalte` as `WrapPanel` for `ItemsControl` for that. Refer to the third sample [here](http://www.wpf-tutorial.com/list-controls/itemscontrol/). — Rohit Vats, Sep 22 '14 at 06:44
can you check that question? [link](http://stackoverflow.com/questions/26039002/wpf-xaml-datatemplate-multiple-items-as-children) — cKNet, Sep 25 '14 at 13:05

How to use WrapPanel's DataTemplate

1 Answers1