如何使用 WrapPanel 的 DataTemplate

Question

我有一个 WrapPanel 来显示一些元素。但我想用 DataTemplate 来展示它们。 这是我的 WrapPanel 的 XAML 代码

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

这是DateItem

的代码

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

当窗口初始化时，我使用 DateString 参数创建一个 DateItem 并将其作为子项添加到 WrapPanel。

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

我认为一切都很好，但换行面板什么也没显示 :(

你能帮我解决这个问题吗？

Answer 1

您将 UI 控件与用于定义数据表示的 DataTemplates 混淆了。要呈现数据，您必须设置可以使用 ContentControl 完成的控制内容。 另外，如果要多次添加，可以使用ItemsControl。

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>

背后的代码：

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

日期项目：

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

---

如果您仍然有兴趣将其呈现为控件，则必须定义默认样式而不是默认模板。

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>

背后的代码：

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

日期项目：

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