We Keep Coding

C# WPF - Showing 15-20 User Controls with 4-6 TextBlocks each / Performance issues

I'm struggling with performance in my WPF application.
I have a ListView i populate with some buttons, which contain a bunch of TextBlocks with bindings.
I managed to get Virtualization going, so it seems the same whether its 20 or 2000 i load.
The problem is between 5 and 20. It simply appears that rendering a bunch of somewhat complicated User Controls, is simply too much for basic sub-par hardware.
This is how my Buttons/UserControls in my ListView looks ->
ListViewSample
I feel like WPF should be able to render this on sup-par hardware.
This is the xaml for the ListView:
<ListView ItemsSource="{Binding ButtonModels, IsAsync=True}"
Margin="0"
x:Name="ButtonsListView"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.VirtualizationMode="Recycling"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SnapsToDevicePixels="True"
Background="Transparent"
BorderThickness="0">
<ListView.Resources>
<Style TargetType="ScrollBar">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="0" CenterY="0"
ScaleX="3" ScaleY="3" />
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:UniformGridPanel IsItemsHost="True" VerticalAlignment="Top" Height="Auto" Rows="4" Columns="{Binding Columns}" Margin="0">
</local:UniformGridPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Height="117" Width="Auto"
Margin="6,0,6,0"
x:Name="MasterButton"
Click="MasterButton_Click"
Visibility="{Binding IsVisible, Converter={StaticResource BoolToVis}}"
Template="{StaticResource ProductButtonTemplate}"
Padding="0">
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here is the xaml for the Button template:
<ControlTemplate TargetType="{x:Type Button}" x:Key="ProductButtonTemplate">
<UserControl>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{Binding HeaderBrush}" CornerRadius="3,3,0,0">
<TextBlock VerticalAlignment="Center" FontSize="12"
Text="{Binding DisplayName}"
Foreground="{Binding FontIsWhite, Converter={StaticResource BoolToFontColour}}"
FontFamily="{StaticResource DefaultRegular}"
Padding="8,0,0,0"/>
</Border>
<Border Grid.Row="1" Background="{StaticResource LightGrey}" CornerRadius="0,0,4,4" BorderBrush="{StaticResource BorderGrey}" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
FontSize="12" TextTrimming="CharacterEllipsis" Text="Nr.:"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding Combinations}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding SizeAndColour}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<Grid Grid.Row="3" Grid.Column="0"
Width="24" Height="24"
VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="8,0,0,0"
Visibility="{Binding ShowStockValue, Converter={StaticResource BoolToVis}}">
<Ellipse Fill="{Binding StockStatus, Converter={StaticResource EnumToBrush}}" Stroke="{StaticResource LightGrey}" StrokeThickness="0.1">
</Ellipse>
<TextBlock Text="{Binding Stock}"
Foreground="{StaticResource White}"
FontSize="9"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1"
FontSize="12" TextTrimming="CharacterEllipsis" Text="{Binding ProductNr}"
Foreground="{StaticResource Black}"
VerticalAlignment="Center" HorizontalAlignment="Right"
FontFamily="{StaticResource DefaultFont}"
Padding="0,0,8,0"/>
<Label Grid.Row="3" Grid.Column="1" FontSize="13"
Padding="0,0,8,8"
Content="{Binding Price}"
Foreground="{StaticResource Black}"
FontWeight="Bold"
FontFamily="{StaticResource DefaultFont}"
VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right"
ContentStringFormat="{}{0:#,0.00}" />
</Grid>
</Border>
</Grid>
</UserControl>
</ControlTemplate>
tldr; I'm looking for performance tips on how to make this render faster. And this is BEFORE i reach a size in the ListView where my virtualization kicks in (Which works flawlessly)
Thanks in advance!

I managed to find a high performance solution - it just wasn't what i would expect to be better performing.
So instead of having one ListView with a binding, changing the data in the binding and repopulating the Listview, i just spawn a ListView for every collection i have.
It seems weird to me, that having a bunch of ListViews and just collapsing and showing them is more effcient, but it performs absolutely flawlessly.

Changing Grid Row background color in WPF

I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png

Black Background occurs when using microsoft.windows.shell

I am using the microsoft.windows.shell to customize my wpf window chrome. Everything is fine until I added a datagrid. The problem is that the appearance of the window become black sometimes. This situation does not happen constantly! Sometimes it looks fine but sometimes it has a black background.
Here is my xaml code:
<Window x:Class="CodeGeneratorWpf.Config"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Config" Height="300" Width="300" Style="{StaticResource MainWindowStyle}"
WindowStartupLocation="CenterOwner" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<DataGrid Name="dataGrid" Grid.Row="0" ItemsSource="{Binding data}"
AlternatingRowBackground="{StaticResource {x:Static SystemColors.ControlBrushKey}}"
ClipToBounds="True" VerticalGridLinesBrush="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"
HorizontalGridLinesBrush="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"
LoadingRow="dataGrid_LoadingRow">
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow},
Path=Header}"/>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
</DataGrid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Name="btnSave" Grid.Column="0" Content="Save" Style="{StaticResource EmphasizeButton}" HorizontalAlignment="Stretch" Margin="25,5,25,5" Click="btnSave_Click"/>
<Button Name="btnCancel" Grid.Column="1" Content="Cancel" Style="{StaticResource NormalButton}" Margin="25,5,25,5" Click="btnCancel_Click"/>
</Grid>
</Grid>
</Window>
The MainWindowStyle:
<!--Captions Buttons to control the window borderless-->
<DockPanel Grid.Row="0">
<DockPanel.Background>
<SolidColorBrush Color="#FF5D91DC"></SolidColorBrush>
</DockPanel.Background>
<Image Name="imgTitle" Source="{TemplateBinding Icon}" DockPanel.Dock="Left" Margin="5"></Image>
<Label Content="{TemplateBinding Title}" Foreground="White"></Label>
<ctrl:CaptionButtons Margin="0,0,0,0" Grid.Row="0" HorizontalAlignment="Right" Type="Full"
Foreground="{DynamicResource CaptionButtonColor}" FontSize="14" MarginButton="0,0,5,0"
VerticalAlignment="Center" shell:WindowChrome.IsHitTestVisibleInChrome="True">
</ctrl:CaptionButtons>
</DockPanel>
<ContentPresenter Margin="0" Grid.Row="1" Content="{TemplateBinding Content}"/>
</Grid>
</Border>
</ControlTemplate>
<Style x:Key="MainWindowStyle" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome
ResizeBorderThickness="6"
CaptionHeight="25"
CornerRadius="0"
GlassFrameThickness="0,0,0,1" />
</Setter.Value>
</Setter>
<Setter Property="Template" Value="{StaticResource MainWindowControlTemplate}"/>
</Style>
Can I get some help?

How to Change Pivot Header Template in Windows Phone 8

I would like to be able to change the background of the Pivot Headers and Application Title in Windows Phone 8. From what I gather, I must create a custom style targeting the Pivot control. I am not sure, however, to change the background of only the headers?
I would like to adjust the style somehow
<Style x:Key="MyPivotStyle" TargetType="phone:Pivot">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid CacheMode="BitmapCache" Grid.RowSpan="2">
<Grid.Background>
<ImageBrush ImageSource="/Assets/bg_header.png"/>
</Grid.Background>
</Grid>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Margin="24,17,0,-7">
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/company_name.png" Width="213.75" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="140,-20,0,35" BorderThickness="0" x:Name="btnHome">
<Image Source="/Assets/btnHome.png" Width="48" Height="48" ></Image>
</Button>
</StackPanel>
</ContentPresenter>
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="White" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

EDITED for WinRT (sorry for the delay and thanks for the reminder to update this answer):
To edit a full template right click on the control when in Document Outline and select Edit Template - Current (in Visual Studio or Blend) and the template will be generated for you and you can edit as you want, see my answer here for screenshots.
Here are the two examples below (posted in 2013) redone for Windows Phone Windows Runtime:
<Grid Background="Transparent">
<Pivot Title="Re-templating example">
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid Background="Blue">
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.TitleTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</Pivot.TitleTemplate>
<PivotItem Header="One">
<TextBlock FontSize="35"
Text="This is item one" />
</PivotItem>
<PivotItem Header="Two">
<TextBlock FontSize="35"
Text="This is item 2" />
</PivotItem>
</Pivot>
</Grid>
And second example, notice that we are wrapping the ContentPresenter in a Grid (you could use a border as well or any other element):
<Page.Resources>
<SolidColorBrush x:Key="PivotBackground" Color="#FFE46C08"/>
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Notice that ContentControl is wrapped in a Grid and Background set to resource furtehr up-->
<Grid VerticalAlignment="Center" Background="{StaticResource PivotBackground}">
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
</Grid>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<!--Background set to resource further up-->
<PivotHeaderPanel Background="{StaticResource PivotBackground}" x:Name="Header" >
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
Using the above style:
<Grid Background="Transparent">
<Pivot Style="{StaticResource PivotStyle}"
Title="Re-templating example">
<PivotItem Header="One">
<TextBlock FontSize="35" Text="This is item one" />
</PivotItem>
<PivotItem Header="Two">
<TextBlock FontSize="35" Text="This is item 2"/>
</PivotItem>
</Pivot>
</Grid>
By the way, it's usually preferred to keep styles in a separate style file- I've only kept them on the same page for simplicity for this example. If you remove the x:key attribute the style will be applied to all the controls of the set target type (Pivot in this example).
Answer from 2013 for Windows Phone 7.X and Windows Phone 8 (WP Silverlight:
There are a few ways you can do it, but here is one example:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<phone:Pivot Grid.Row="1">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Background="Red" Height="200">
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Test">
<TextBlock Text="ghjgb"/>
</phone:PivotItem>
<phone:PivotItem Header="Test">
<TextBlock Text="ghjgb"/>
</phone:PivotItem>
</phone:Pivot>
If you however want to do this:
You can do this, remove the x:key to apply to all pivoits, or use the key to set the style on just selected pivoit elements like so:
<controls:Pivot Title="The Marathon Runner" Style="{StaticResource PivotStyle}">
<Style x:Key="PivotStyle" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#ff9000" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Dont forget to use:
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"

ControlTemplate not showing Grid

I'm trying to create a Button that contains a grid, with rows that contain certain text.
The Button will have two rows, both with different pieces of text. The text that is passed to the ControlTemplate is showing, but not the text specified in the template.
Also, the heights of the Grid rows is not showing. I want it to expand the height of the button. In fact, I'm not sure that the Grid is showing at all really.
<Window x:Class="MAQButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="695" Width="996">
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="OverridesDefaultStyle" Value="True"/>
</Style>
<ControlTemplate TargetType="Control" x:Key="1">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#e9f1f6"></Grid>
<Grid Grid.Column="1" Background="#d2e3ed">
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="22" FontWeight="Medium" Margin="52,58,0,0" Foreground="#0c3d5d">Your Quizzes <TextBlock FontFamily="Segoe UI" FontSize="18" FontWeight="Medium" Foreground="#0c3d5d">(7)</TextBlock></TextBlock>
<Grid>
<Button Width="444" Background="{x:Null}" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<TextBlock>This is a second piece of text</TextBlock>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
</Window>
Here's how it shows at the moment with a rough illustration of what I'm trying to achieve as a button layout:

You're setting the Style of the Button, when you should be setting the Template
Resource:
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter />
</Grid>
</Grid>
</ControlTemplate>
And the button:
<Button Template="{StaticResource ButtonTemplate}" >
Text 2
</Button>

Why are you using TargetType as "Control", use Button. You will need to define a button. Use Blend to edit button template to strip all unnecessary content from it.