Xanarin.AndroidのDisplayAlertに今貼っている画像のようにしたい

Question

Xanarin.Androidのチェックボックスで複数選択したモノをDisplayAlertで表示する

該当のソースコード

C#
Xamarin.Android

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019
Xamarin.Android

Answer 1

絵を描いていただいたので、やりたいことがとても良く分かるようになりました。ありがとうございます。

DisplayAlert にこだわらない方がよいと私は思います。階層ナビゲーション にすることを提案します。

ちょっとその前に、データのクラスを用意します。

public class Item
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    public bool IsSelected { get; set; }
    public int Count { get; set; }
}

最初のページを NavigationPage で包んでおきます。

public App()
{
    InitializeComponent();

    MainPage = new NavigationPage(new MainPage());
}

MainPage、Page1、Page2 を以下のように用意します。

MainPage

• 開始ボタンが押されたら、データを作って Page1 に渡して、PushAsync でページ遷移します。

<ContentPage
(略)
    <StackLayout>
        <Button Text="開始" Clicked="Start_Clicked" />
    </StackLayout>
</ContentPage>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void Start_Clicked(object sender, EventArgs e)
    {
        // データを準備します。
        var items = new List<Item>();

        var coffee = new Item()
        {
            Name = "コーヒー",
            Price = 600
        };
        items.Add(coffee);
        var ehomaki = new Item()
        {
            Name = "恵方巻",
            Price = 500
        };
        items.Add(ehomaki);
        var roast = new Item()
        {
            Name = "ロースト",
            Price = 700
        };
        items.Add(roast);

        // データを渡してページ1へ遷移します。
        await Navigation.PushAsync(new Page1(items));
    }
}

Page1

• ListView を使ってデータを表示することにします。ListView のセルは、中にいろいろ作りこめる ViewCell にします。データをビューに反映するためにデータ バインディングを使っています。
• 次へボタンが押されたら、選択されているものだけを Page2 に渡して、PushAsync でページ遷移します。
• 画面左上の「←」で前のページに戻ることもできます。

<ContentPage
(略)
    <StackLayout>
        <ListView x:Name="ListView1">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <CheckBox IsChecked="{Binding IsSelected}" />
                            <Label Text="{Binding Name}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Text="次へ" Clicked="Next_Clicked" />
    </StackLayout>
</ContentPage>

public partial class Page1 : ContentPage
{
    // データ
    public IEnumerable<Item> Items { get; set; }

    public Page1(IEnumerable<Item> items)
    {
        InitializeComponent();

        // データを ListView に渡します。
        ListView1.ItemsSource = Items = items;
    }

    // 次へボタン
    private async void Next_Clicked(object sender, EventArgs e)
    {
        // 1つ以上が選択されていること。
        if (!Items.Any(x => x.IsSelected))
            return;

        // 選択されているものだけを渡して、ページ2へ遷移します。
        await Navigation.PushAsync(new Page2(Items.Where(x => x.IsSelected)));
    }
}

Page2

• ここも ListView です。個数の入力はとりあえず Entry にしました。
• 注文確定ボタンが押されたら、何らかの処理をしたいのですが、とりあえず注文内容を DisplayAlert で表示します。SQLite については、すみませんが割愛します。その後、PopToRootAsync で一気に MainPage に戻ります。
• ここでも画面左上の「←」で1つ前のページに戻ることができます。

<ContentPage
(略)
    <StackLayout>
        <ListView x:Name="ListView2">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding Name}" />
                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Price}" />
                            <Entry Grid.Row="0" Grid.Column="2" Text="{Binding Count}" Keyboard="Numeric" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Text="注文確定" Clicked="Submit_Clicked" />
    </StackLayout>
</ContentPage>
```

```C#
public partial class Page2 : ContentPage
{
    // データ
    public IEnumerable<Item> Items { get; set; }

    public Page2(IEnumerable<Item> items)
    {
        InitializeComponent();

        // データを ListView に渡します。
        ListView2.ItemsSource = Items = items;
    }

    private async void Submit_Clicked(object sender, EventArgs e)
    {
        // 個数がすべて入力されていること。
        if (!Items.All(x => x.Count > 0))
            return;

        var stringBuilder = new StringBuilder();
        foreach(var item in Items)
        {
            stringBuilder.Append($"{item.Name} × {item.Count} コ\n");
        }
        await DisplayAlert("注文内容", stringBuilder.ToString(), "OK");

        // 最初に戻ります。
        await Navigation.PopToRootAsync();
    }
}
```

以上となります。これ以外にも様々な実装があり得ると思います。

Comments

[GId]

アクセシビリティに一貫性がありません と言われます。
どうしたらよいでしょうか？

[NakamuraYoichi]

Item クラスに public を付け忘れていませんか。あるいは他のどこかに public が抜けている。

[GId]

消えました。
Itemクラスに付け忘れていたようです。

これで、今止まっている作ってい見たいモノを進められそうです。
回答本当にありがとうございます！！

Answer 2

DisplayAlertは単純なテキスト以外を表示できません。
カスタムビューを実装しましょう。