我有一个像图片的想法。但我不知道如何通过代码来做到这一点。请帮我。我是新手。
这是我为show GridView编写的代码
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridView Grid.Row="0" x:Name="gridView" ItemsSource="{x:Bind Tabs}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Tab">
<Grid Width="350" Margin="10">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="#FF035CA8" BorderThickness="2">
<Image Width="350" Source="{x:Bind Image }" Grid.Row="0"/>
</Border>
<Grid Margin="0,110,0,0"
Height="40"
Width="350">
<Grid.Background>
<SolidColorBrush Color="#FF035CA8" Opacity="0.34"/>
</Grid.Background>
<TextBlock Foreground="White"
Height="20"
HorizontalAlignment="Center"
Margin="0"
Text="{x:Bind tabName}"/>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid
答案 0 :(得分:1)
MainPage.xaml中
<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView
x:Name="gv"
IsItemClickEnabled="True"
ItemClick="gv_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<local:ItemView/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Page>
MainPage.xaml.cs中
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
namespace App2
{
public sealed partial class MainPage : Page
{
ObservableCollection<object> items = new ObservableCollection<object>();
public MainPage()
{
this.InitializeComponent();
this.items.Add(new ItemAddModel());
this.gv.ItemsSource = this.items;
}
private void gv_ItemClick(object sender, ItemClickEventArgs e)
{
if (e.ClickedItem is ItemAddModel)
{
this.items.Insert(this.items.Count - 1, new ItemModel { Text = $"Item {this.items.Count}" });
}
}
}
}
ItemView.xaml
<UserControl
x:Class="App2.ItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
Background="White"
Width="320"
Height="240">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="ItemOrAddStates">
<VisualState
x:Name="ItemViewState"/>
<VisualState
x:Name="ItemAddViewState">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ItemViewTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ItemAddTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock
x:Name="ItemViewTextBlock"
Margin="15"
Text="{Binding Text}"
FontSize="24" />
<TextBlock
x:Name="ItemAddTextBlock"
Text="+"
Visibility="Collapsed"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="72" />
</Grid>
</UserControl>
ItemView.xaml.cs
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App2
{
public sealed partial class ItemView : UserControl
{
public ItemView()
{
this.InitializeComponent();
this.DataContextChanged += ItemView_DataContextChanged;
}
private void ItemView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
VisualStateManager.GoToState(
this,
args.NewValue is ItemModel
? "ItemViewState"
: "ItemAddViewState",
false);
}
}
}
class ItemAddModel
{
}
class ItemModel
{
public string Text { get; set; }
}