x：DataTemplate内のイベントにViewModelメソッドをバインドします

Question

私は基本的にthis personと同じ質問をしますが、新しいx:Bindのコンテキストで質問しています。私は、テンプレート内で動作しないことがとても

ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}" 

ようのViewModelに私は明示的にそれを行うに何かをバインドする必要があるとき

のviewmodels' DataContextのは、だから、そう

<Page.DataContext> 
    <vm:ChapterPageViewModel x:Name="ViewModel" /> 
</Page.DataContext> 

のように定義されて

<FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}"> 
    <FlipView.ItemTemplate> 
     <DataTemplate x:DataType="models:Image"> 
      <ScrollViewer SizeChanged="{x:Bind ViewModel.PageResized}"> <-- this here is the culprit 
       <Image Source="{x:Bind url}"/> 
      </ScrollViewer> 
     </DataTemplate> 
    </FlipView.ItemTemplate> 
</FlipView> 

ドキュメントを読むと、Pathは、基本的にページにコンテキストをリセットする必要がありますが、これは（x:Bind Path=ViewModel.PageResizeEventも動作しませんでした。私はまだObject reference not set to an instance of an objectを取得していますが、それはメソッド（しかしヌル）が表示されないことを意味するはずです。

Imageクラス：

public class Image { 
    public int page { get; set; } 
    public string url { get; set; } 
    public int width { get; set; } 
    public int heigth { get; set; } 
} 

そしてChapterPageViewModel

private List<Image> _pageList; 
public List<Image> pageList { 
    get { return _pageList; } 
    set { Set(ref _pageList, value); } 
} 

public override async Task OnNavigatedToAsync(object parameter, NavigationMode mode, 
    IDictionary<string, object> suspensionState) 
{ 
    Initialize(); 

    await Task.CompletedTask; 
} 

private async void Initialize() 
{ 
    pageList = await ComicChapterGet.GetAsync(_chapterId); 
} 

public void PageResized(object sender, SizeChangedEventArgs e) 
{ 
    //resizing logic happens here 
} 

Answer 1

に我々はここで二つの問題があります。直接イベントハンドラデリゲートにイベントをバインドしようとしている

まず、を

単純に、動作しません。
MVVMパターンでイベントを処理する方法の1つは、EventTrigger and ICommand.
です。これには、ICommandを実装するクラスが必要です。 This postあなたがそれを行う方法がわからない場合に役立ちます。私はDelegateCommandと呼ぶでしょう。ここで

は、私は2つのステップでそれをリファクタリングする方法をです：

1）VMにコマンドを追加します。

public class ChapterPageViewModel 
{ 
    public ChapterPageViewModel() 
    { 
     this.PageResizedCommand = new DelegateCommand(OnPageResized); 
    } 

    public DelegateCommand PageResizedCommand { get; } 

    private void OnPageResized() 
    { } 
} 

2）EventTriggerとInvokeCommandActionとSizeChangedイベントにコマンドをバインド。

<Page (...) 
    xmlns:i="using:Microsoft.Xaml.Interactivity" 
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"> 
    (...) 
    <FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}" > 
     <FlipView.ItemTemplate> 
      <DataTemplate x:DataType="models:Image"> 
       <ScrollViewer> 
        <i:Interaction.Behaviors> 
         <core:EventTriggerBehavior EventName="SizeChanged"> 
          <core:InvokeCommandAction 
           Command="{x:Bind ViewModel.PageResizedCommand }" /> 
         </core:EventTriggerBehavior> 
        </i:Interaction.Behaviors> 

        <Image Source="{x:Bind url}"/> 
       </ScrollViewer> 
      </DataTemplate> 
     </FlipView.ItemTemplate> 
    </FlipView> 
</Page> 

"しかし、ガブリエル"、あなたが言う、"動作しませんでした！"

私は知っています！そして、それは理由がXにしようとしている第二の問題、のだ： - 私はそこからいくつかの情報を借りるように、この1が密接に、this questionに関連しているのDataTemplateクラス

に属していないプロパティをバインドします。DataTemplateを（項目テンプレート、コンテンツ テンプレート、またはヘッダテンプレートとして使用するかどうか）の内部DataTemplate and x:Bind

について、パスの値は、の文脈で 解釈されないMSDNから

、ページが、データオブジェクト がテンプレート化されているという状況では、コンパイル時にそのバインディングが検証され（効率的に コードが生成されるように）、DataTemplateはx：DataTypeを使用してデータオブジェクトの型を 宣言する必要があります。

あなたが<ScrollViewer SizeChanged="{x:Bind ViewModel.PageResized}">を行うときに、あなたは実際のDataTemplateのx:DataTypeであるmodels:Imageクラス、上のViewModelというプロパティを探しています。そしてそのようなプロパティはそのクラスには存在しません。

ここには2つのオプションがあります。 ：

ViewModelをImageクラスのプロパティとして追加し、VMに入力します。これだけでは

public class Image { 
    (...) 
    public ChapterPageViewModel ViewModel { get; set; } 
} 

public class ChapterPageViewModel 
{ 
    (...) 
    private async void Initialize() { 
     pageList = await ComicChapterGet.GetAsync(_chapterId); 
     foreach(Image img in pageList) 
      img.ViewModel = this; 
    } 
} 

、その前のコードは、他の何かを変更する必要はありませんで動作するはずです。

これを削除します。x：バインドして、ElementNameを使用してgood'bindingに戻ってください。

<FlipView ItemsSource="{x:Bind ViewModel.pageList, Mode=OneWay}" x:Name="flipView"> 
    <FlipView.ItemTemplate> 
     <DataTemplate x:DataType="models:Image"> 
      <ScrollViewer> 
       <i:Interaction.Behaviors> 
        <core:EventTriggerBehavior EventName="SizeChanged"> 
         <core:InvokeCommandAction 
          Command="{Binding DataContext.PageResizedCommand 
          , ElementName=flipView}" /> 
        </core:EventTriggerBehavior> 
       </i:Interaction.Behaviors> 

       <Image Source="{x:Bind url}"/> 
      </ScrollViewer> 
     </DataTemplate> 
    </FlipView.ItemTemplate> 
</FlipView> 

敗北のこの一種あなたの質問の目的に、それは仕事をし、それは、前の1をやってのけるする方が簡単です。