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);
}

WPF: Listbox custom items unable to auto size

I have a listbox with dynamically added items which are custom user controls (PriceGroupControl).
I am trying to resize that custom user control based on the size of the parent, but it always has a fixed size not related to the size of the listboxitem as far as I can see and resizing just clips the control.
I am using a similar control in a grid and that resizes perfectly.
My page has a grid, the first row has a combobox, the second has the custom control that resizes and the third row has a scrollviewer with a listbox in it. Since the listbox items are quite large and dynamically added, I use the scrollviewer.
The reason why I use a listbox is that, because based on the selected item, the content of the custom control on the second row of the grid is updated.
In XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<StackPanel Margin="12" Grid.Row="0">
<ComboBox Name="comboBoxPriceGroups" ItemsSource="{Binding Groups}"
SelectedValuePath="GroupName"
Width="250" SelectionChanged="comboBoxPriceGroups_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding GroupDescription}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<Frame x:Name="ModPriceFrame" NavigationUIVisibility="Hidden" Grid.Row="1" Margin="10"/>
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
<ListBox x:Name="PriceListBox" Margin="10" Background="{StaticResource BackgroundLightBrush}" BorderThickness="0" SelectionChanged="PriceList_SelectionChanged"/>
</ScrollViewer>
</Grid>
The way I bound my listbox content to the listbox is the following:
List<PriceGroupControl> priceGroupControls = new List<PriceGroupControl>();
foreach (GroupDetail detail in groupDetails)
{
priceGroupControls.Add(new PriceGroupControl(detail.GroupName, detail.GroupDetailDescription));
}
PriceListBox.ItemsSource = priceGroupControls;
I have tried the following:
listbox: width set to auto in XAML, width = double.NaN code behind
my custom control: horizontalAlignment = stretch, horizontalContentAlignment = stretch, width = double.NaN.
bind a list of listboxitems with each listboxitem having a pricegroupcontrol.
If I put an actual number e.g. 1000 as the minimum width of pricegroupcontrol, it sizes to this width and looks more normal (now everything is cramped together in the minimum space needed), but obviously doesn't resize with the screen.
I am fairly new to WPF, so maybe I am missing the obvious.
I have used the live visual tree to get an idea which part is causing the issue and this seems to indicate that it is the PriceGroupControl that is too small, while the listbox is the size of the screen.
Any help would be appreciated.

Windows Store App GridView Horizontal Scrolling

I'm trying to do news app for windows store with c# and xaml..
In this project, I created a Panorama GridView like windows phone 8.. And inside of this Panorama GridView, I created small gridviews for cathegories..
Structure is like this in Document Online;
-<Grid> (whole page)
-<Grid> (Header/Logo etc.)
-<PanoramaGridView> (All cath will be under of this)
-<HotNewsGridView>
-<HotNewsGrid>
-<GroupHeaderTextBlock>
-<HotGridView>
-<SportNewsGridView>
-<PoliticsGridView>
-<GalleryGridView>
And first side of code..
<GridView x:Name="PanoramaGridView"
Grid.Row="1"
Style="{StaticResource GridViewStyle1}"
ItemContainerStyle="{StaticResource GridViewItemStyle2}">
<GridViewItem Margin="0,0,2,0" VerticalAlignment="Top">
<Grid Margin="30,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GridView x:Name="HotNewsGrid"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource MansetItemTemplate}"
Grid.Row="1"
SelectionChanged="HotNewsGrid_SelectionChanged"/>
<TextBlock x:Name="GroupHeaderTextBlock"
HorizontalAlignment="Left"
Margin="0,0,-7,-18"
Grid.RowSpan="1"
TextWrapping="Wrap"
Text="Hot News"
Foreground="DarkGreen"
VerticalAlignment="Top"
Style="{StaticResource SubheaderTextStyle}"/>
</Grid>
The problem is, I cannot scroll when my mouse cursor come on the "HotNewsGrid" grid. I can only scroll from top and bottom of the application..
I think, my PanoramaGridView is okay with scrolling but when my cursor comes subgridviews (like hot news gridview) it stops scrolling, cannot scroll from it. I tried to put IsSwipeEnable, ScrollViewer.HorizontalScrollMode="Enabled" etc.. Did not worked..
I do not want scrolling the "HotNewsGrid". I just want to continue scrolling when my cursor comes on it..
I hope you understand me.. This is a very big problem for me..
Waiting your helps..
Thank you..

Add this Template to your GridView
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
and you will be able to scroll using a mouse.
Note that a side effect of this is that you can no longer swipe select on your GridView

WP8: Button events triggering when navigating in panorama/pivot

I'm currently devloping an App for WP8 and am having a Problem when navigating Panorama or Pivot-Views.
For example:
I have a Panorama which itself contains a few Buttons on every Page. If I try to navigate between those Pages, I sometimes accidentally manage to Raise a Click-Event for some Buttons.
After trying to reproduce the bug, I found out, that this mainly happens when I swipe over a short distance. If I swipe long distance, the bug doesn't appear and no event is raised.
I am using Command Binding for Eventhandling, should I maybe change this? I'm really trying to figure this out, but I still can't find a way other than a Service which disables all Events if a swipe occurs.
Thanks in advance for any Help you can give me!
PS: Here is some code, don't know if/how it might help:
<phone:Panorama x:Name="Panorama" Title="{Binding LocalizationService.Resources.ApplicationTitle}">
<phone:PanoramaItem Header="{Binding LocalizationService.Resources.MainPage_Header}" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
...
<Button Command="{Binding CmdNavigateToZipSearch}" Style="{StaticResource PizzaButtonAccentStyle}" Width="214" Height="172">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Assets/icon_plz-suche.png" Stretch="Uniform" Height="77" Margin="1,6,0,0" />
<TextBlock Grid.Row="1" Text="{Binding LocalizationService.Resources.MainPage_ZipSearch_Label}" Style="{StaticResource PizzaTextContrastStyle}" />
</Grid>
</Button>
...

Internally (AFAIK) the command on a button is fired based on a click event. Instead of using the click/command event use an EventToCommand solution to bind your command to the Tap event as this cannot be fired at the same time as a swipe due to it's threshold of movement.

WPF window resizes when ListBox scrolled

I want to have my window size to the items in the listbox. The listbox contains variable lenght strings (20 to 120 chars). When I scroll the listbox and longer strings in the listbox scroll off the display the listbox shrinks and my window shrinks with it. How can I keep my window size fixed as the user scrolls and yet still have the window initially size to content. You know, cake and eat it too.
<Window x:Class="MyApp.MyDialog
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyApp"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="My Dialog" MaxHeight="600" SizeToContent="WidthAndHeight" ShowInTaskbar="False" Width="Auto" Height="Auto" Loaded="Window_Loaded">
<Grid Width="Auto" Height="Auto" Margin="5,5,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="48" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" >
<TextBlock>Total: </TextBlock>
<TextBlock Text="{Binding myData.Count}"></TextBlock>
</StackPanel>
<ListBox Grid.Row="1" ItemsSource="{Binding myData}"/>
<Button Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Height="28" Click="buttonOK_Click" Margin="0,5,0,5" IsDefault="True" Name="buttonOK" Width="75">OK</Button>
</Grid>

I think you should remove your sizetocontent property and programatically resize your windows as you wish based on your listbox content.

I have, on occasion, had the requirement that a window size to fit its content initially, then keep the size fixed unless explicitly resized. Typically, I would just hook the window's ContentRendered event, and clear out the SizeToContent property in the event handler (and also unhook the event). This ensures that layout has fully completed, and the window has been shown and its bounds fully computed by the time you revert to a fixed size.
This isn't the best solution in the world, and it breaks down in cases where your content isn't fully available when the ContentRendered event fires. The most likely example I can think of would be if data in your view model is not yet available, and, consequently, your view is not fully populated yet. This may not be an issue for you--it depends on your design and whether you are doing any deferred/async data loading. But it works in simpler scenarios, and it has the virtue of being simple to implement.