是否可以不在 GridView 上定義數據類型？

Question

我想訪問 ViewModel 本身的屬性，這些屬性不一定是我正在使用的集合的屬性的一部分。

我已經嘗試創建一個類，它具有我想要的所有屬性，作為一個包。 但此應用程序的性質需要所有實體都可以訪問的共享屬性。

假設我有以下內容：

<GridView
    ItemClick="{x:Bind ViewModel.GridView_ItemClick}"
    ItemsSource="{x:Bind ViewModel.GridViewGames, Mode=OneWay}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="models:GameModel">
                <ScrollViewer VerticalScrollBarVisibility="Visible">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding Name}" />
                        <TextBlock
                            Style="{StaticResource BodyTextBlockStyle}"
                            Text="{Binding CallToAction}"
                            TextWrapping="Wrap" />
                        <Button Command="{BIND TO AN ICOMMAND FROM THE VIEWMODEL AND NOT THE GAMEMODEL}"/>
                    </StackPanel>
                </ScrollViewer>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

我如何將作為 GridView 項目的按鈕綁定到 ViewModel 的命令？

Answer 1

您需要為Page命名並使用該名稱來綁定您的 ViewModel 命令。

主頁.xaml

<Page
    x:Class="GridViews.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:GridViews"
    x:Name="ThisPage"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid>
        <GridView ItemsSource="{x:Bind ViewModel.GridViewGames, Mode=OneWay}">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="models:GameModel">
                    <ScrollViewer VerticalScrollBarVisibility="Visible">
                        <StackPanel Orientation="Vertical">
                            <TextBlock
                                Style="{StaticResource SubtitleTextBlockStyle}"
                                Text="{x:Bind Name}" />
                            <TextBlock
                                Style="{StaticResource BodyTextBlockStyle}"
                                Text="{x:Bind CallToAction}"
                                TextWrapping="Wrap" />
                            <Button Command="{Binding ElementName=ThisPage, Path=ViewModel.TestCommand}" />
                        </StackPanel>
                    </ScrollViewer>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

MainPageViewModel.cs

我在這里使用CommunityToolkit.Mvvm NuGet 包，但這與您的問題無關。

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace GridViews;

public class GameModel
{
    public string Name { get; set; } = string.Empty;
    public string CallToAction { get; set; } = string.Empty;
}

public partial class MainPageViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<GameModel> gridViewGames = new()
    {
        new GameModel() {Name="Name A", CallToAction="Call To Action A" },
        new GameModel() {Name="Name B", CallToAction="Call To Action B" },
        new GameModel() {Name="Name C", CallToAction="Call To Action C" },
    };

    [RelayCommand]
    private void Test()
    {
    }
}

Answer 2

您可以使用Xaml Behaviior SDK來實現它。

主頁.Xaml：

    <GridView x:Name="MyGridView"
ItemClick="{x:Bind ViewModel.GridView_ItemClick}"
ItemsSource="{x:Bind ViewModel.GridViewGames, Mode=OneWay}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="models:GameModel">
                <ScrollViewer VerticalScrollBarVisibility="Visible">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding Name}" />
                        <TextBlock
                        Style="{StaticResource BodyTextBlockStyle}"
                        Text="{Binding CallToAction}"
                        TextWrapping="Wrap" />


                        <Button x:Name="MyButton" Foreground="BurlyWood" FontSize="30" Content="{Binding Name}">
                            <Interactivity:Interaction.Behaviors>
                                <Core:EventTriggerBehavior EventName="Click" >
                                    <Core:InvokeCommandAction Command="{Binding DataContext.ViewModel.ButtonClickEvent, ElementName=MyGridView}" CommandParameter="{Binding}" />
                                </Core:EventTriggerBehavior>
                            </Interactivity:Interaction.Behaviors>
                        </Button>

                    </StackPanel>
                </ScrollViewer>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

ViewModel.cs

  public class TestViewModel 
{
    public List<GameModel> GridViewGames = new List<GameModel>();

    //*****
    // your original code 
    //*****


    // add the command
    public ICommand ButtonClickEvent
    {
        get
        {
            return new CommadEventHandler<GameModel>((s) => this.DataProcessing(s));
        }

    }

    private void DataProcessing(GameModel data)
    {
        try
        {
            Debug.WriteLine(data);
        }
        catch (Exception ex)
        {
           
        }
    }
}

public class CommadEventHandler<T> : ICommand
{
    public event EventHandler CanExecuteChanged;

    public Action<T> action;
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        this.action((T)parameter);
    }
    public CommadEventHandler(Action<T> action)
    {
        this.action = action;

    }
}