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?

Answer 1

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; }
}