We Keep Coding

How can I make a ScrollViewer properly size dynamically with a StackPanel?

For reference, this is a chat application. This should give you some idea of a final goal.
Additionally, I am very new to WPF. This is one of my first applications and I am making this as a proof of concept. I've been using Windows Forms up until this point, so any comparison or reference to it would help me understand a bit better.
So, the issue at hand:
The chat box for my chat application is a StackPanel (should it be?) which is programmatically populated with TextBlock elements. I need to find a way to scroll down this StackPanel once the available space runs out. I also need it to automatically scroll to the bottom (like a chat would; you wouldn't be able to see the most recent message otherwise).
The question: How can I make a ScrollViewer properly size dynamically with a StackPanel?
Additionally, I also need this StackPanel to size dynamically as the window is sized. This, in turn, would affect the scroll bar.
My current "solution" is to use a ScrollViewer with the StackPanel nested. However, the ScrollViewer and StackPanel do not size properly with a change in window size, as shown in screenshot #2. The XAML code and a screenshot of the designer is shown below.
<Window x:Name="Main" x:Class="dprCxUiDemoWpf.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:dprCxUiDemoWpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="#FF171717">
<TextBox x:Name="ChatBox" TextWrapping="Wrap" Background="#FF4F4F4F" Foreground="White" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" RenderTransformOrigin="-0.118,12.093" Margin="146,0,0,1" VerticalAlignment="Bottom" Height="46" BorderBrush="#FFFF00F3" KeyDown="ChatBox_KeyDown"/>
<Image x:Name="DprLogo" Source="/dprCxUiDemoWpf;component/Images/logo1.png" HorizontalAlignment="Left" Height="60" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="123"/>
<ScrollViewer Background="Red" Height="Auto" Width="Auto" ScrollViewer.CanContentScroll="True" Margin="146,0,0,0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Top" MinHeight="372">
<StackPanel x:Name="ChatPanel" Height="Auto" Width="Auto" Background="DimGray" ScrollViewer.CanContentScroll="True" />
</ScrollViewer>
</Grid>
</Window>
(source: gcurtiss.dev)
Please note the following regarding the first screenshot:
A. The black column (containing the logo) is simply the background color of the window; there is nothing there.
B. The gray portion is ChatBox (the StackPanel)
C. The pink highlighted box below is the text box where messages are entered.
I appreciate and accept any and all help!

You have to use the Grid panel properly. You layout its children by defining rows and columns. Grid is a column/row based layout container. Then configure row and column definitions to control the resize behavior of the cells and their content.
Using absolute positioning and sizes will of course prevent controls from responding to their parent's size changes. Most control stretch to fit the available space. But this requires dimension properties being set to Auto.
You said you are "more of a hands-on learner", but you should still read some documentations. Otherwise you will significantly slow down your progress until stagnation.
There are tons of blogs waiting for you to read them. To poke around in the dark will get you nowhere. You need at least to know the basics. Instead of waiting 13+ hours for a copy & paste ready answer, you could have finished multiple tutorials already and solve this on your own. Success is a good feeling. This is a very trivial problem.
Find yourself a good tutorial that you find easy to understand and start to experiment with the Grid after reading it.
According to your posted code, you obviously have zero idea how this panel works and how you can use it to align your controls.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
<StackPanel />
</ScrollViewer>
<Image Grid.Row="1" Grid.Column="0"
Height="60"
Width="123 />
<TextBox Grid.Row="1" Grid.Column="1" />
</Grid>

I need to find a way to scroll down this StackPanel once the available space runs out. I also need it to automatically scroll to the bottom (like a chat would; you wouldn't be able to see the most recent message otherwise)
You should read about data-binding and MVVM first. Usually you hold an ObservableCollection of items on your VM and bind them to eg a ListBox on your View.
Then you can scroll-down the ListBox, each time a new item got added to your collection:
private void ScrollRecordsListToBottom()
{
if (RecordsList.Items.Count == 0)
return;
var lastItem = RecordsList.Items[RecordsList.Items.Count - 1];
RecordsList.ScrollIntoView(lastItem);
}

How can I fill the screen with a TextBlock in WPF, but get it to add scroller if bigger?

I have the following piece of XAML code in my WPF application,
<StackPanel DockPanel.Dock="Top" >
<TextBlock Style="{StaticResource HeaderTextBlock}">Import Log</TextBlock>
<ScrollViewer Height="400" VerticalScrollBarVisibility="Auto">
<TextBlock Name="ImportFeedBack"></TextBlock>
</ScrollViewer>
</StackPanel>
which dispalys the ImportFeedBack string (in case someone is wondering, I'm using Caliburn.Micro as MVVM framework, so that the content of the TextBlock is bound by naming convention to a property of same name in my ViewModel).
The value can vary heavily in length. I want it to use the whole available space (but it should not resize the application!), and only if that is not enough, add a vertical scroll bar.
If I delete the Height="400" in the ScrollViewer, it resizes the app for big strings, and if I leave it there, it (obviously) just uses 400 height, but ads he scroll bar when needed.
How can I get it to use all the available space, and only if that is not enough, to creata a vertical scroll bar?

Instead of StackPanel use different panel like Grid or DockPanel. In the example below second row will take all available space not allocated by first row and not expand beyond that which is when scroll bar should appear when text is longer.
<Grid DockPanel.Dock="Top" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Style="{StaticResource HeaderTextBlock}">Import Log</TextBlock>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
<TextBlock Name="ImportFeedBack"></TextBlock>
</ScrollViewer>
</Grid>

WPF ScrollViewer not working with touch

I have a WPF application running on a Windows 8.1 tablet using touch. After a whole lot of reading about how to solve some common touch specific problems I found this tutorial that really pointed me in the right direction.
My problem is that after implementing the tutorial my ScrollViewer stopped working unless I scroll directly from the scroll bar itself.
this is how my ScrollViewer (which is the top element in my window) looks like:
<ScrollViewer CanContentScroll="True" PanningMode="Both">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock HorizontalAlignment="Center"
FontSize="48"
Text="{Binding SelectedView.ViewHeader}"
TextAlignment="Center"
TextWrapping="Wrap" />
<Separator Margin="0,25" />
</StackPanel>
<ContentPresenter Grid.Row="1"
Margin="10,0,0,30"
Content="{Binding SelectedView}" />
</Grid>
</ScrollViewer>
Any suggestions on how to fix it?
EDIT:
The reason I chose the method above over the one suggested above is because it eliminated many controls focus problems I was having such as textboxes the need 2 or 3 touches to receive focus or comboboxes that stay open after selecting an item:

When using this method DisableWPFTabletSupport. You are disabling all tablet support which include ScrollViewer Touch screen. See my post in this link to achieve similar behavior (show/hide windows keyboard) without disabling tablet support.
Show & hiding the Windows 8 on screen keyboard from WPF

XAML GridView to GridView Drag and Drop Mouse vs Touch

Here's XAML code where you can drag and drop GridView elements between different GridViews, however, this approach only works with mouse input and just partially with touch input.
With touch input the elements "unlock" from the GridView only on vertical drag. On horizontal drag the UI tries to scroll the screen instead of just moving the GridView element.
So mouse works perfectly and touch works only on inital vertical drag, after the inital vertical drag you can move the element around just as you could with mouse. This is a Windows 8 app.
<Page.Resources>
<DataTemplate x:Key="ItemTemplate1">
<Border Background="#25BDC0">
<Grid Width="230" Height="230" Margin="10">
<TextBlock Text="{Binding Title}" Style="{StaticResource HeaderTextStyle}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridView Grid.Column="0" ItemTemplate="{StaticResource ItemTemplate1}"
ItemsSource="{Binding FirstCollection}"
AllowDrop="True" CanDragItems="True"
DragItemsStarting="GridViewDragItemsStarting"
Drop="GridViewDrop" Margin="10">
</GridView>
<GridView Grid.Column="1" ItemTemplate="{StaticResource ItemTemplate1}"
ItemsSource="{Binding SecondCollection}"
AllowDrop="True" CanDragItems="True"
DragItemsStarting="GridViewDragItemsStarting"
Drop="GridViewDrop" Margin="10">
</GridView>
</Grid>

I've stumbled upon the same issue and found the answer here :
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/7fcf8bb8-16e5-4be8-afd3-a21e565657d8/drag-and-drop-gridview-items-and-disabled-scrollbar
It appears that with a GridView you can't initiate the drag horizontally, you have to do it vertically and it's the exact opposite with the ListView.
So if you want to drag 'n drop items horizontally you have to use a ListView. (as recommended in the MS guidelines http://msdn.microsoft.com/en-us/library/windows/apps/hh465299.aspx )
Regards

WPF Create a slide out panel

I don't know how this works technically but my requirement is as follows. I have a DataGrid and to input data into the DataGrid, I want a panel at the bottom of the DataGrid that slides out on a button click showing input options. Except, as the panel slides out, the DataGrid has to resize vertically as well. Can someone throw some light on how I can implement this?

You should be able to use a StackPanel with 2 children, your grid and your panel. Set the initial height of your panel to 0. Once the button is clicked, set the height to whatever you need it to be (e.g., MyPanel.Height = 20). You might want to wrap the grid in a ScrollViewer in case that is needed.
<StackPanel Orientation="Vertical">
<ScrollViewer Height="Auto" VerticalAlignment="Stretch">
<Grid Height="*" VerticalAlignment="Stretch" />
</ScrollViewer>
<ContentControl x:Name="MyPanel" Height="0" />
</StackPanel>
You might need to experiment with VerticalAlignment and Height="Auto" or Height="0" to get the layout you want.

You can use Expander. Please look at the following code snippet.
<DockPanel>
<Expander DockPanel.Dock="Bottom">
<StackPanel>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
</StackPanel>
</Expander>
<Border BorderBrush="LightGreen" BorderThickness="2">
<DataGrid/>
</Border>
</DockPanel >