如何使用WrapPanel的DataTemplate

时间:2014-09-21 14:30:25

标签: wpf wrappanel

我有一个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);

我认为一切都很好但是换页面没有显示任何内容:(

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

1 个答案:

答案 0 :(得分: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);

<强> DateItem:

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

<强> DateItem:

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