Xamarin.FormsでListViewのViewCellにボタンを配置したい。
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 2,780
前提・実現したいこと
Xamarin.FormsでListViewのViewCellにボタンを配置したい。
発生している問題・エラーメッセージ
一度ListViewをクリックしないと、同List内のButtonが反応しない。ListViewをクリックせずともButtonを押したら反応させたい。
該当のソースコード
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="Test.Views.ListViewTest"
Title="登録">
<StackLayout>
<ListView CachingStrategy="RecycleElement" ItemsSource="{Binding ListView}" SelectedItem="{Binding SelectItem.Value}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" TextColor="Pink"
Text="{Binding Title}" />
<Label Grid.Column="1" HorizontalTextAlignment = "End"
Text="{Binding Detail.Value}" />
<Button Grid.Column="2" Text="入力"
Command="{Binding Input}" />
<Button Grid.Column="3" Text="消去"
Command="{Binding Delete}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
using Prism.Mvvm;
using Reactive.Bindings;
using System;
using System.Linq;
using System.Reactive.Linq;
namespace Test.ViewModels
{
public class ListViewTestViewModel : BindableBase
{
public class MenuItem
{
public string Title { get; set; }
public ReactiveProperty<string> Detail { get; set; } = new ReactiveProperty<string>();
public ReactiveCommand Input { get; set; } = new ReactiveCommand();
public ReactiveCommand Delete { get; set; } = new ReactiveCommand();
}
public ReactiveCollection<MenuItem> ListView { get; set; } = new ReactiveCollection<MenuItem>();
public ReactiveProperty<MenuItem> SelectItem { get; set; } = new ReactiveProperty<MenuItem>();
public ListViewTestViewModel()
{
ListView = new ReactiveCollection<MenuItem>();
foreach (var i in Enumerable.Range(1, 1000))
{
ListView.Add(new MenuItem { Title = $"No.{i.ToString("00000")}"});
}
//LinQで書きたいが失敗した
//ListView = Enumerable.Range(1, 1000).Select(x => new MenuItem { Title = $"No.{x.ToString("00000")}" }).ToList();
SelectItem.Where(x => x != null).Subscribe(x =>
{
x.Detail.Value = "リストを押しました";
//一度はリストで選択した事のあるボタンしか反映しない…まぁ当然ではあるがどうすればいいのかはわからない。
x.Input.Subscribe(y => x.Detail.Value = "入力ボタンを押しました");
x.Delete.Subscribe(y => x.Detail.Value = "消去ボタンを押しました");
});
}
}
}
試したこと
上記コードまで仕上げましたが症状は前述のとおりです。コメントのある位置で修正できるとは思うのですが…
補足情報(FW/ツールのバージョンなど)
ReactiveProperty を使用しています。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
MenuItem
のコンストラクタで、Input
、Delete
のSubscribe
を行えばいいのではないでしょうか。
public class MenuItem
{
public string Title { get; set; }
public ReactiveProperty<string> Detail { get; set; } = new ReactiveProperty<string>();
public ReactiveCommand Input { get; set; } = new ReactiveCommand();
public ReactiveCommand Delete { get; set; } = new ReactiveCommand();
public MenuItem()
{
Input.Subscribe(() => Detail.Value = "入力ボタンを押しました");
Delete.Subscribe(() => Detail.Value = "消去ボタンを押しました");
}
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/09/06 17:04