読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

UWPのListViewのItemTemplate内のボタンをクリックしたときにPageのDataContextにセットしたViewModelのメソッドを呼ぶ

ということがしたいとします。

ListViewItemのDataContextは、項目の要素になってるのでひと手間必要になります。

こんな感じのViewModelがあるとして。

public sealed partial class MainPage : Page
{
    public MainPageViewModel ViewModel => this.DataContext as MainPageViewModel;

    public MainPage()
    {
        this.InitializeComponent();
    }
}

public class MainPageViewModel : BindableBase
{
    public ObservableCollection<ItemViewModel> Items { get; } = new ObservableCollection<ItemViewModel>
    {
        new ItemViewModel { Value = "Item1" },
        new ItemViewModel { Value = "Item2" },
        new ItemViewModel { Value = "Item3" },
    };

    public void Alert()
    {
        Debug.WriteLine("Alert");
    }
}

public class ItemViewModel : BindableBase
{
    private string value;

    public string Value
    {
        get { return this.value; }
        set { this.SetProperty(ref this.value, value); }
    }

}

こんな風に書きます。ElementNameでPageを指定してるのがポイントですね。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App9"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
      x:Class="App9.MainPage"
      mc:Ignorable="d"
      x:Name="Root">
    <Page.DataContext>
        <local:MainPageViewModel />
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView ItemsSource="{x:Bind ViewModel.Items}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:ItemViewModel">
                    <StackPanel>
                        <TextBlock Text="{x:Bind Value}" />
                        <Button Content="OKOK">
                            <Interactivity:Interaction.Behaviors>
                                <Core:EventTriggerBehavior EventName="Click">
                                    <Core:CallMethodAction TargetObject="{Binding ElementName=Root, Path=DataContext}" MethodName="Alert" />
                                </Core:EventTriggerBehavior>
                            </Interactivity:Interaction.Behaviors>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>