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

【问题标题】：Behaviors Error on GridView Generated Items Data Template in UWPUWP 中 GridView 生成的项目数据模板上的行为错误
【发布时间】：2016-10-29 13:34:26
【问题描述】：

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

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

之后，我从 GitHub 安装了“Behaviors.Managed for UWP by Microsoft”，用于在我的模板中创建一些行为。我将“ChangePropertyAction”拖放到模板中的图像控件。但是，在 XAML 设计器中发生了此错误：

“EventTriggerBehavior”不支持直接内容。

XAML 设计器的图片：

图像控件的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 设计器出现此错误的原因。我该如何解决？

感谢支持。

【问题讨论】：

在这种情况下ChangePropertyAction 在做什么？
@TóthTibor 由于错误，我无法完全完成该行为。但是如果生成的项目是存储文件和具有行为的“.mp4”文件，我计划在模板中更改带有视频文件图标的文件夹图标。
为什么在这种情况下需要行为？根据您的描述，为什么我认为使用没有行为的 Converter 更适合您的情况？
嗨@GraceFeng-MSFT，感谢您的建议。到目前为止，我在我的项目中使用了行为，这完全是一个习惯问题。我无法准确预测在这种情况下如何使用 Converter。
注意到我回答了你的最后一个问题，这是一个可以接受的答案吗？这个案例是您上一个案例的后续问题吗？如果是这样，那么你的项目应该从后面的代码中添加，文件图标应该在添加项目时生成，而不是在用户按下项目时生成，对吧？

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

【解决方案1】：

根据我们的讨论，以及我提供的最后一个答案，这里有一个演示来展示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 中，您可以添加您想要的文件类型和您的图标图像路径。

【讨论】：