Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Create a view model for the stack panel view. Expose a collection of the block view models in this view model. </p> <p>Bind this collection to something like an ItemsControl inside the stack panel in the view. Set up the templates so that your user control is used to display every item.</p> <p>Every control instantiated by the ItemsControl will be associated with an element from your collection. This will result in every user control associated with its own view model.</p> <p>Update - here is some code</p> <p>The main page:</p> <pre><code>&lt;Grid x:Name="LayoutRoot" Background="White"&gt; &lt;StackPanel Orientation="Vertical"&gt; &lt;ItemsControl ItemsSource="{Binding BlockViewModels}"&gt; &lt;ItemsControl.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;local:BlockView&gt;&lt;/local:BlockView&gt; &lt;/DataTemplate&gt; &lt;/ItemsControl.ItemTemplate&gt; &lt;/ItemsControl&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; </code></pre> <p>The main page code behind:</p> <pre><code>public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); DataContext = new MainPageViewModel(); } } </code></pre> <p>The main page view model:</p> <pre><code>public class MainPageViewModel { public ObservableCollection&lt;BlockViewModel&gt; BlockViewModels { get; private set; } public MainPageViewModel() { BlockViewModels = new ObservableCollection&lt;BlockViewModel&gt;(); BlockViewModels.Add(new BlockViewModel { CurrentBlock = new Block { Name = "Block 1", Price = 10 } }); BlockViewModels.Add(new BlockViewModel { CurrentBlock = new Block { Name = "Block 2", Price = 20 } }); } } </code></pre> <p>The block model:</p> <pre><code>public class Block { public string Name { get; set; } public int Price { get; set; } } </code></pre> <p>The block view model:</p> <pre><code>public class BlockViewModel { public Block CurrentBlock { get; set; } } </code></pre> <p>The block view:</p> <pre><code>&lt;Grid x:Name="LayoutRoot" Background="White"&gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;TextBlock Text="{Binding CurrentBlock.Name}"&gt;&lt;/TextBlock&gt; &lt;TextBlock Text=" - "&gt;&lt;/TextBlock&gt; &lt;TextBlock Text="{Binding CurrentBlock.Price}"&gt;&lt;/TextBlock&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload