title: WPF: What are the best practices with layouts
body: <p>I'm trying to get to grips with the different ways of styling/binding data in my WPF application. To best understand this I would like suggestions/help on how I can style my specific example.</p>
  
  <p>The screenshot below demonstrates the look I am aiming for. I have also included what code I have written already. However, this just outputs the main heading and text underneath using a simple StackPanel.</p>
  
  <p>My first question is about how much "information", and what should be put into the View and then what and how should it be styled in my resources.xaml? This may be vague but I'm wanting to understand what are the controls I should be looking at to include in my View and what code should I be looking at to put in my styles.</p>
  
  <p><strong>Image Example</strong>
  <img src="https://i.stack.imgur.com/RibVU.gif" alt="WPF Control Example"></p>
  
  <p><strong>MyView.xaml</strong></p>
  
  <pre><code>&lt;ScrollViewer VerticalScrollBarVisibility="Auto" Padding="20 0"&gt;
      &lt;ItemsControl ItemsSource="{Binding MyModelList}" ItemTemplate="{StaticResource MyViewDataTemplate}" &gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;VirtualizingStackPanel Orientation="Vertical" /&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
      &lt;/ItemsControl&gt;
  &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p><strong>Resources.xaml</strong></p>
  
  <pre><code>&lt;DataTemplate x:Key="MyViewDataTemplate"&gt;
      &lt;Border BorderThickness="0 0 0 1" BorderBrush="Black"&gt;
          &lt;StackPanel&gt;
              &lt;Label Content="{Binding Heading}" FontSize="24" /&gt;
              &lt;Label&gt;
                  &lt;Label.Content&gt;
                      &lt;TextBlock&gt;
                          &lt;TextBlock.Text&gt;
                              &lt;MultiBinding StringFormat="Card: {0}, {1}"&gt;
                                  &lt;Binding Path="PropertyA"&gt;&lt;/Binding&gt;
                                  &lt;Binding Path="PropertyB"&gt;&lt;/Binding&gt;
                              &lt;/MultiBinding&gt;
                          &lt;/TextBlock.Text&gt;
                      &lt;/TextBlock&gt;
                  &lt;/Label.Content&gt;
              &lt;/Label&gt;
          &lt;/StackPanel&gt;
      &lt;/Border&gt;
  &lt;/DataTemplate&gt;
  </code></pre>