WPF: What are the best practices with layouts

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.

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.

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.

Image Example

MyView.xaml

<ScrollViewer VerticalScrollBarVisi开发者_开发技巧bility="Auto" Padding="20 0">
    <ItemsControl ItemsSource="{Binding MyModelList}" ItemTemplate="{StaticResource MyViewDataTemplate}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

Resources.xaml

<DataTemplate x:Key="MyViewDataTemplate">
    <Border BorderThickness="0 0 0 1" BorderBrush="Black">
        <StackPanel>
            <Label Content="{Binding Heading}" FontSize="24" />
            <Label>
                <Label.Content>
                    <TextBlock>
                        <TextBlock.Text>
                            <MultiBinding StringFormat="Card: {0}, {1}">
                                <Binding Path="PropertyA"></Binding>
                                <Binding Path="PropertyB"></Binding>
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </Label.Content>
            </Label>
        </StackPanel>
    </Border>
</DataTemplate>

---

I am not sure how much I understand your question but first thing you asked was what to put in resources and what to put in main layout.

Well a simple rule would be to put the code which can be reused in the Resources and rest in the main layout. For example let's say you have to display textbox in many places of your UI. Now you can put the textbox backgroud, font, foreground, size, etc in a resource so that every time you use the textbox this information can easily be reused from resources. Similarly in case of change you would only need to make change at a single place rather than each textbox itself.

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.

Well, regarding first part, it totally depends on what scenario you are trying to achieve. From the image example a Grid can be used with three columns as it seems there are three parts of your UI i.e. Heading then two text blocks . Place a stackpanel with two textblocks inside first column (one for heading and one for small description below it) and in next two columns you can put one textblock in each.

Now regarding your second point once you have put the textblocks in the columns of Grid you can put the styling info like blue background and etc in the resources

I used this XAML to create structure in the image

 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" Grid.Column="0">
            <TextBlock FontSize="20">Hilighted</TextBlock>
            <TextBlock FontSize="10">Card</TextBlock>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="1">
            <TextBlock FontSize="20">0</TextBlock>
            <TextBlock FontSize="10">Text</TextBlock>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="2">
            <TextBlock FontSize="20">0</TextBlock>
            <TextBlock FontSize="10">Text</TextBlock>
        </StackPanel>
    </Grid>

Now these are plain controls without any styles. You can put styles in the resources and apply them to textblocks

---

The answer to the question "should I put this in the View or in the Resources?" turns out to answer itself. If you put it in the View, which is where I start for most things, eventually that either will or won't turn into a problem. If it becomes a problem, it's straightforward to yank the thing (whatever it is) out of the view and turn it into a resource.

Ultimately, as Haris Hasan points out, the need for reuse is what drives this decision. Unless you know that you're going to need to reuse a style, the YAGNI principle applies here as in all other things.