UWP中GridView生成的项目数据模板的行为错误

时间:2016-10-29 13:34:26

标签: uwp win-universal-app windows-10-universal uwp-xaml

我在UWP中为GridView生成的项目创建了一个自定义数据模板。这是截图:

enter image description here

以下是XAML代码:

   <DataTemplate x:Key="FileExplorer_FolderItem">
        <Grid x:Name="FileExplorer_Item" MaxWidth="0" MaxHeight="0" Margin="0" MinWidth="450" MinHeight="250" RequestedTheme="Dark">

            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border x:Name="PathBorder" BorderThickness="2" Grid.RowSpan="2">
                <Border.BorderBrush>
                    <SolidColorBrush Color="{StaticResource Jet}"/>
                </Border.BorderBrush>
            </Border>
            <Grid x:Name="Header" Grid.RowSpan="2">
                <Image x:Name="ThumbnailImage" Source="{Binding Thumb}" Stretch="UniformToFill"/>
            </Grid>
            <Grid x:Name="Footer" Grid.Row="1">
                <Grid.Background>
                    <SolidColorBrush Color="#FF343434"/>
                </Grid.Background>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid x:Name="PathGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="Name" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Storage_item.DisplayName}" VerticalAlignment="Top" Margin="10,10,0,0" FontSize="15" LineHeight="20"/>
                    <TextBlock x:Name="Path" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Storage_item.Path}" VerticalAlignment="Top" Grid.Row="1" Margin="10,0,0,10" FontSize="13" LineHeight="16"/>
                </Grid>
                <Image x:Name="Logo" HorizontalAlignment="Center" Height="48" VerticalAlignment="Center" Width="48" Grid.Column="1" Source="Images/Folder48.png" Stretch="UniformToFill">



                </Image>
            </Grid>
        </Grid>
    </DataTemplate>

之后,我为微软安装了#34; Behaviors.Managed for UWP&#34;来自GitHub在我的模板中创建一些行为。我拖放&#34; ChangePropertyAction&#34;在我的模板中进行图像控制。但是,XAML设计器中出现此错误:

&#39; EventTriggerBehavior&#39;不支持直接内容。

XAML Designer的图片:

enter image description here

和XAML图像控制代码:

 <Image x:Name="Logo" HorizontalAlignment="Center" Height="48" VerticalAlignment="Center" Width="48" Grid.Column="1" Source="Images/Folder48.png" Stretch="UniformToFill">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="PointerPressed">
                            <Core:ChangePropertyAction/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>

                </Image>

我无法解决为什么XAML设计师会出现此错误。我该如何解决?

感谢您的支持。

1 个答案:

答案 0 :(得分:0)

根据我们的讨论以及我发布的最后一个答案,这是一个演示,以显示此场景中Converter的用法:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <local:ThumbnailToImageConverter x:Key="cvt" />
        <local:MusicTypeConverter x:Key="typecvt" />
    </Grid.Resources>
    <GridView x:Name="gridView">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Image Source="{Binding Thumbnail, Converter={StaticResource cvt}}" Stretch="None" />
                    <TextBlock Text="{Binding Name}" Margin="0,5" />
                    <Image Source="{Binding FileType, Converter={StaticResource typecvt}}" Stretch="None" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>
代码背后的代码:

private ObservableCollection<Model> Collection = new ObservableCollection<Model>();

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    var files = await KnownFolders.MusicLibrary.GetFilesAsync();
    foreach (var file in files)
    {
        var thumbnail = await file.GetThumbnailAsync(ThumbnailMode.PicturesView, 100);

        Collection.Add(new Model { Name = file.Name, Thumbnail = thumbnail, FileType = file.FileType });
    }
    gridView.ItemsSource = Collection;
}

数据模型:

public class Model
{
    public StorageItemThumbnail Thumbnail { get; set; }
    public string Name { get; set; }

    public string FileType { get; set; }
}

MusicTypeConverter

public class MusicTypeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value != null)
        {
            if ((string)value == ".mp4")
                return "Assets/Music.PNG";
        }
        return "Assets/Video.PNG";
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

对于ThumbnailToImageConverter的部分,我已在最后一个问题中发布了代码。

在新的MusicTypeConverter中,您可以添加想要的文件类型和图标图片路径。