XAML Gridview直接添加一个item

Question

我成功编写了一个 XAML Gridview 来显示项目列表。

但是，我想在 Gridview 的末尾添加一个 [+(ADD ITEM)] 按钮。

“添加”按钮应该有一个不同于内容项的自定义模板（至少是一个默认按钮）。

我的 XAML 来源如下：

<GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemsGridView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="116,136,116,46"
            ItemsSource="{Binding Source={StaticResource DataSource}}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Left" Width="250" Height="250">
                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                            <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                <TextBlock Text="{Binding Subject}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                <TextBlock Text="{Binding TargetDate}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
                            </StackPanel>
                        </Border>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <!--
            Something like that..
            <Button Content="+" x:Name="btnAdd" /> 
            -->
        </GridView>

而且，我如何向 XAML 添加 ADD 按钮（网格项）？谢谢

Answer 1

你可以通过使用 DataTemplateSelector 来实现，基本上你需要做的是：

定义另一个 class 来表示 GridView "addItem"

public class GridItem
{
  public String Subject { get; set; }
  public String TargetDate { get; set; }
}

public class AddGridItem : GridItem
{
  public bool IsGridItem { get; set; }
}

确保您的 GridView 的 ItemSource collection 始终包含 AddGridItem

private ObservableCollection<GridItem> _gridItems  =new ObservableCollection<GridItem>()
{
    new GridItem()
    {
        Subject = "Subject1",
        TargetDate = "TargetDate"
    },new GridItem()
    {
        Subject = "Subject2",
        TargetDate = "TargetDate"
    },new GridItem()
    {
        Subject = "Subject3",
        TargetDate = "TargetDate"
    },new AddGridItem()
    {
        IsGridItem = true
    }
};


public ObservableCollection<GridItem> GridItems
{
    get
    {
        return _gridItems;
    }

    set
    {
        if (_gridItems == value)
        {
            return;
        }

        _gridItems = value;                
    }
}

创建一个 DataTemplateSelector class，它将 return 根据项目类型

适当的 DataTemplate

public class MyDataTemplateSelector : DataTemplateSelector
{
  public DataTemplate RegularTemplate { get; set; }
  public DataTemplate AddTemplate { get; set; }

  protected override DataTemplate SelectTemplateCore(object item,
                                                   DependencyObject container)
  {
     if (item is AddGridItem)
        return AddTemplate;
     if (item is GridItem)
        return RegularTemplate;           
     return base.SelectTemplateCore(item, container);
  }
}

将您的数据模板和 DataTemplateSelector 定义为 staticresources，以便在您的 GridView

中使用它们

<Page.Resources>
  <DataTemplate x:Key="RegularTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border BorderThickness="3" BorderBrush="White">
            <StackPanel VerticalAlignment="Bottom" Background="LightSkyBlue">
                <TextBlock Text="{Binding Subject}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                <TextBlock Text="{Binding TargetDate}"  Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
            </StackPanel>
        </Border>
    </Grid>
  </DataTemplate>
  <DataTemplate x:Key="AddItemTemplate">
    <Border BorderThickness="3" BorderBrush="White" Background="DodgerBlue">
        <FontIcon Glyph="&#xE0B6;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
    </Border>
  </DataTemplate>
  <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
   RegularTemplate="{StaticResource RegularTemplate}"
  AddTemplate="{StaticResource AddItemTemplate}">
  </local:MyDataTemplateSelector>
</Page.Resources>
<Grid>
  <GridView ItemsSource="{Binding GridItems}" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}">            
  </GridView>
</Grid>

XAML Gridview直接添加一个item

XAML Gridview to add an item directly

vb.net

xaml

windows-8

winrt-xaml

win-universal-app