WPF Need help understanding how to turn into a template custom control - wpf

Question

I am trying to design a layout for a custom control for a project I am working on and got it looking the way I would like it to look, the problem is that from functional point of view I don't believe it is going to work for what I really need it to do. The following can be dropped into a Window to get the look I am going for.
<Window x:Class="TestProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestProject"
mc:Ignorable="d"
Title="MainWindow" Height="1080" Width="1920">
<StackPanel Margin="15,80,1535.333,85.667">
<Border BorderBrush="#FFD9D9D9" BorderThickness="0,1.5,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="3" Background="#FFF1F1F1">
</StackPanel>
<StackPanel Grid.Column="1" Margin="0,1,20,3" VerticalAlignment="Center">
<TextBlock FontSize="18" FontWeight="SemiBold">Header</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Margin="0,1,10,3" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Right" FontWeight="SemiBold" FontSize="18">$125,400.00</TextBlock>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$0.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$125,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$1,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</Window>
Now the issue I am struggling with is turning this is a template, that can be used with a binding, and I was thinking that I should maybe have gone with a listview and Grid View for the column headers. So any advice would be appreciated here as well.
The above has a few things I can see as an issue, mainly that I would need to click on each item row that will then run some code, and that is why I feel that I should have gone with a Grid View option instead. But the one reason I didn't go with the Grid View, was mainly because I could see no way to do the same layout here, with the columns.
So to recap
Should I have gone with a Grid View, if so how can I get the same results with the scaling of the middle column?
Best way to go about learning to turn this into a custom control, that I can style. Mainly looking for an explanation, resources to learn from.
Edit:
For those following or interested, the part I am struggling with is the following section. How would I do this from data binding, and get the template to be controlled to look this way? I understand the binding part, it's the actual template to control the data in the same way as the following code demonstrates.
<StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$0.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$125,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$1,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>

Answer 1

The reason to use a custom control is because you want to re-template it entirely for theming. They are more complicated than usercontrols or templating and if you don't need theming functionality then a usercontrol or template would be the way to go.
It does look like a listview would do what you're looking for.
You would want a row viewmodel which exposed a brush to bind foreground of the second column to.
And that column would look something like:
ForeBrush being a public solidcolorbrush.
Brushes are arguably a view responsibility so you could use an enum or some such instead. And a converter to translate that into a brush.
The whole of that markup could then be turned into a datatemplate and your data into a viewmodel. Use type of that viewmodel to template it into the ui via the datatype matching your viewmodel.
<DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<ListView>
.....
Or you could put it in a UserControl
<DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<local:CostingsListView/>