2

構造

シナリオは、各アイテムが特定の日のメニューであるピボットがあるというものです。そのPivotItem内で、カテゴリ別にグループ化されたメニューに料理を表示する必要があります（たとえば、スープ、デザートなど）。

私はこれをMVVMモデルで実装しました。

したがって、次のモデルがあります。

public class Menu{
    public string Date;
    public List<DishList> Categories;
}
public class DishList
{
    public string Category;
    public List<Dish> Dishes;
}
public class Dish
{
    public string Name;
    public string Price;
}

編集：これらはここで簡略化されています。各フィールドの実際の構造は次のようになります。

    private string _date;

    //Get_Set
    public string Date
    {
        get
        {
            return _date;
        }
        set
        {
            if (value != _date)
            {
                _date = value;
            }
        }
    }

したがって、構造は次のようになります。ピボット要素にはMenuオブジェクトが含まれます。その中に、いくつかのDishListであるCategoriesを表示します。その料理リストの中に、カテゴリとさまざまな料理をそれぞれ名前と価格で表示します。物事をもう少し明確にするためのモックアップ（SkyDriveのpdfファイル）。http://sdrv.ms/12IKlWd

私は次のビューモデルを持っています

public class MenuViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Menu> _Menus;
}

目的のレイアウト（構造）を実装する必要があるビューは次のとおりです。

<phone:Pivot 
        ItemsSource="{Binding Menus}">
        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Date}" />
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>
        <phone:Pivot.ItemTemplate>
            <DataTemplate>
                <ItemsControl
                    ItemsSource="{Binding Categories}">   
                    <TextBlock
                        Text="{Binding Category}"/>
                    <ItemsControl
                        x:Name="Dishes"
                        ItemsSource="{Binding Dishes}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="300"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock 
                                        Grid.Column="1" 
                                        Text="{Binding Name}"/>
                                    <TextBlock 
                                        Grid.Column="2" 
                                        Text="{Binding Price}"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ItemsControl>
            </DataTemplate>
        </phone:Pivot.ItemTemplate>
    </phone:Pivot>

ご覧のとおり、必要なデータにアクセスするためのネストされたデータバインディングがあります。

そのページで私が行う唯一のコードは

DataContext = App.ViewModel;

問題

起動すると、Pivo​​tItemsヘッダーに正しいデータが表示され、正しい数のPivotItemが表示されます。幸い、それだけです。PivotItemのコンテンツは空のままです。したがって、第1レベルのデータバインディングは機能しますが、それ以上は機能しません。

私の考え方

  • 第1レベル：各PivotItemは、ヘッダーMenu.Dateを使用して、Menuタイプのオブジェクトにリンクされます。
  • 第2レベル：そのPivotItem内で、ItemsControlのItemsSourceをそのMenu.Categoriesに設定しました
  • 第3レベル：ItemsSourceはMenu.Categories.Dishesになりました

私はすでにかなりの量を検索し、DatacontextとItemsSource、およびさまざまな種類の「{Binding ...}」をいじりましたが、それを機能させることができません。コードビハインドではなく、xamlでバインディングを実行したいと思います。

ノート

  • 唯一の機能はデータを表示することです。データは固定されており、ファイルから1回ロードされます。そのため、ListBoxではなくItemsControlを選択しました。何も選択する必要はありません。
  • これはMVVMです-私の前の質問へのアプローチ：データバインディング+ダイナミックピボット
4

1 に答える 1

4

まず、タイトルのプライベートフィールドにアクセスしようとしているので、機能しません。これらも、フィールドではなくプロパティである必要があります。

<TextBlock Text="{Binding Date}" />

private string Date;

次に、Categoryにバインドします。これもプライベートであり、プロパティではありません。

<TextBlock Text="{Binding Category}"/>

private string Category;

そして、あなたはプロパティである必要があるCategoriesフィールドにバインドしています。

<ItemsControl ItemsSource="{Binding Categories}">

public List<DishList> Categories;

これらの問題を修正しても、アウターにがないため、必要なものが得られItemsControlませんItemTemplate。

<ItemsControl ItemsSource="{Binding Categories}">   
  <TextBlock Text="{Binding Category}"/>
  ...
</ItemsControl>

追加：新しいエラーは、DataTemplateが子要素を1つしか持てないため、のようなコンテナを使用する必要があるためですStackPanel。

<ItemsControl ItemsSource="{Binding Categories}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Category}"/>
        <ItemsControl x:Name="Dishes" ItemsSource="{Binding Dishes}">
          ...
        </ItemsControl>
      </StackPanel>
     </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>
于 2012-12-23T16:56:03.730 に答える