c# - WinRTグリッドビュータイルを追加

Question

私は持っています、そしてそれはアイテムGridViewのバインドです。Listユーザーがアイテムをクリックしてさらにアイテムを追加できるように、静的アイテムを含める必要があります。他のアイテムをクリックすると、アイテムの詳細ページが表示されます。

内の他のすべてのグリッドアイテムとはまったく異なる動作をする静的タイルを作成するにはどうすればよいGridViewですか？下の画像の最後のタイルのように。

Answer 1

私たちのプロジェクトでは、それを行うためのクリーンなソリューションを見つけました。GridViewItemsSourceはViewModelsのコレクションにバインドされています。最後のVMは、インスタンスなどのよく知られたVMにすることができLoadMoreViewModelます。

これにより、DataTemplateSelector実装を作成し、GridViewのItemTemplateSelectorプロパティに設定できます。

public class LoadMoreTemplateSelector: DataTemplateSelector
{
    public DataTemplate LoadMoreTemplate { get; set; }
    public DataTemplate DefaultTemplate { get; set; }


    protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
    {
        if (item is LoadMoreViewModel)
        {
            return LoadMoreTemplate;
        }
        else
        {
           return DefaultTemplate;
        }
    }
}

このTemplateSelectorのインスタンスをxamlファイルのリソースとして作成し、適切なテンプレートを設定します。

<selectors:LoadMoreTemplateSelector x:Key="LoadMoreTemplateSelector" 
       DefaultTemplate="{StaticResource Template1}" 
       LoadMoreTemplate="{StaticResource LoadMoreTemplate}"/>

gridViewはこのテンプレートセレクターを使用できます

<GridView ...
    ItemTemplateSelector="{StaticResource LoadMoreTemplateSelector}" />

LoadMoreTemplateは、次のようになります。

<DataTemplate x:Key="LoadMoreTemplate">
   <Button Command="{Binding LoadMore}" Content="+"/>
</DataTemplate>

残っている唯一の問題は、LoadMoreViewModelにICommandを実装して、さらに読み込むボタンをテンプレートにバインドするか、Clickイベントに反応できるようにUserControlを作成する必要があることです。

編集：これは簡単なICommandの実装です。ボタンがクリックされたときにコンストラクターに渡されたアクションを実行します。

public class DelegateCommand : ICommand
{
    private readonly Predicate<object> _canExecute;
    private readonly Action<object> _execute;

    public event EventHandler CanExecuteChanged;

    public DelegateCommand(Action<object> execute) 
                   : this(execute, null)
    {
    }

    public DelegateCommand(Action<object> execute, 
                   Predicate<object> canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public override bool CanExecute(object parameter)
    {
        if (_canExecute == null)
        {
            return true;
        }

        return _canExecute(parameter);
    }

    public override void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        if( CanExecuteChanged != null )
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    }
}

LoadMoreViewModelをインスタンス化するときに、ユーザーが[さらに読み込む]ボタンをクリックしたときに実行されるアクションを指定できます。

public class LoadMoreViewModel:BindableBase
{
   public ICommand LoadMore{get;private set;}
   public LoadMoreViewModel(Action<object> action)
   {
     LoadMore = new DelegateCommand(action);
   }
}

また、ViewModelページで、リストにさらにアイテムをロードするときに、リストの最後にある現在のLoadMoreViewModelを削除してから、追加のアイテムを追加し、最後にLoadMoreViewModelを再度追加します（必要な場合）。

public void LoadMoreItems()
{
  if(Items.Last() is LoadMoreViewModel)
  {
    Items.Remove(Items.Last());
  }
  //Insert here add new items logic.
  Items.Add(new LoadMoreViewModel(_=>LoadMoreItems());
}

Answer 2

GridViewのコントロールテンプレートを編集するだけです。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="GridView">
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}">
                <ScrollViewer x:Name="ScrollViewer">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <!-- Your custom buttons -->
                        <StackPanel Orientation="Vertical"
                                    Grid.Column="0">

                        </StackPanel>

                        <ItemsPresenter Grid.Column="1"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        Header="{TemplateBinding Header}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Padding="{TemplateBinding Padding}" />
                    </Grid>
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>