We Keep Coding

How can I implement the equivalent of a split view container in WPF?

I'm looking to port a WinForms app to WPF. I have a classic split view container in the form which I need to replicate in WPF. Not a hamburger menu or the like, but a full on split view with a slider the user can use to resize horizontally or vertically as needed.
I can't imagine I'm the first one to need this but for the life of me, I can't find a solution. I guess I just don't know the correct keywords to use in searching for this. Any advice is appreciated. TIA.

As gdir's comment says, try the GridSplitter.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="Blue" />
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
<Rectangle Fill="Red" Grid.Column="2" />
</Grid>
It needs to sit in it's own cell of the grid, and you can change between Rows and Columns with the ResizeDirection property.

Dynamically add UI elements to StackPanel after button pressed

This is my first question here :)
I'm not a professional programmer, I'm only 18 and I haven't studied at university or anything, so please don't hate me if I say something stupid :p
I'm making (or rather trying to make...) an app for Windows 10 UWP and a piece of my xaml code looks like this:
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="12"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12"/>
</Grid.RowDefinitions>
<Rectangle Margin="0" Grid.Row="1" Fill="White" RadiusX="7" RadiusY="7"/>
<Grid Grid.Row="1" Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBox x:Name="textProduct" Margin="0,6,6,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Produkt..." BorderThickness="1"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBox x:Name="textAdditionalInfo" Margin="6,6,0,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Dodatkowe info..." BorderThickness="1"/>
</StackPanel>
</Grid>
I also have an app bar at the bottom with Add and Delete buttons. I'd like to be able to dynamically add another line of TextBoxes to both StackPanels every time the user presses the Add button and Delete one every time they hit the Delete button. Unfortunetely I have no idea how to achieve this. I've tried to find an answer and I think this can be done by using UserControl, however I have no idea how to implement this.
I hope it's not too comlicated to do, because I don't want to seeem like a person that asks other people to do all my work for me...
If it's a big problem, then it doesn't even need to support deleting the TextBoxes.
I hope you understand what I mean. I'm not native english so sorry for any mistakes ;)

Welcome to XAML, it's well worth the time learning it!
For displaying data XAML has something smart called DataBinding. The general concept is you bind a List (for example all strings you want to display in your StackPanel) to an element in the view. Now whenever you modify that list, the view automatically adapts. StackPanel does not support Binding, but for example ListView does (as seen below)
How about you take a look at this for basic informations about databinding: https://blogs.msdn.microsoft.com/jerrynixon/2012/10/12/xaml-binding-basics-101/
With this in mind, you can do something like this:
<!-- insert at the top -->
<Page.Resources>
<DataTemplate x:Name="MyDataTemplate">
<TextBlock Text="{Binding } />
</DataTemplate>
</Page.Resources>
<!-- insert where you want the list to appear -->
<ListView x:Name="ListView" ItemTemplate="{StaticResource MyDataTemplate}" ItemsSource="{Binding MyCollection}" />
The only hard part for you will be to bind the list to the ListView, but I'm sure you can do it with the tutorial from above ;)
Alernatively, you can name your StackPanel with x:Key="MyStack", and add the items manually:
MyStack.Children.Add(new TextBlock() {Text = "myText"});
However, I can really recommend you to do the DataBinding approach, as it makes interacting with the UI so much easier in bigger projects.

Controls within grid column don't respect size of column

So, I have a Windows Phone 8.1 application (Windows Store style) and I'm trying to make a simple 3 column layout. I'm running into the problem though that the controls I put in the smaller columns of the grid do not respect the width of the column. The control instead will be some (I assume) default size that is way too big, unless I manually specify in pixels how wide I want the control to be. I don't want to specify pixels though, since I want this to easily work on different screen sizes.
My XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="0.70*" />
<ColumnDefinition Width ="0.15*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="A" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Stretch" FontFamily="Global User Interface" FontSize="40" Width="auto"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="B" VerticalAlignment="Center" Height="576" Width="Auto" TextAlignment="Center" FontSize="206" />
<Button Grid.Column="2" Content="C" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontFamily="Global User Interface" FontSize="40" Height="640" Width="auto"/>
</Grid>
Screenshot showing the overflowing "C" button going beyond the column line of the grid
Funny enough, taking this EXACT same XAML code and putting it in a Windows Phone 8.1 Silverlight application results in it working as I'd expect with the controls being fit to the grid
edit: Actually, even setting widths in pixels has no effect... uhh wat?

Set MinWidth="0" on each of your buttons.

Set textBlock text that is inside a datatemplate from C# (XAML)

I'm starting to try to create a modern app with C# and XAML. I've already worked with C# but I never touched in a XAML or WPF piece of code, so I've a beginner question..
I'm using a MSFT template Hub App (XAML) but I don't know how can I set the text value on a TextBlock through the C# code if that textblock is inside the datatemplate.
Is there somebody who can help me with this one?
I already googled for it but I can't get any site with that answer/explanation.
This is an example about what I'm trying to do:
XAML:
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="Assets/MediumGray.png" Stretch="Fill" Width="420" Height="280"/>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
x:Uid="Section1Subtitle" Text="{Binding Score}"/>
<TextBlock x:Name="desc" Grid.Row="2" Margin="0,10,0,0"
x:Uid="DescriptionHeader" Text="{Binding Test}"/>
<TextBlock x:Name="texttest" Grid.Row="3"
Text="{Binding Name}"/>
</Grid>
</DataTemplate>
C# code:
public class Class1
{
string name = "This is a test";
public string Name
{
get { return name; }
set { name = value; }
}
}
What am I doing wrong here?
Thanks in advance,

Problem solved.
Thanks a lot for you help.
Here is the code with the changed which allow me to get the variable from C#:
<DataTemplate>
<Grid>
<Grid.DataContext>
<local:Class1/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="Assets/MediumGray.png" Stretch="Fill" Width="420" Height="280"/>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
x:Uid="Section1Subtitle" Text="{Binding Score}"/>
<TextBlock x:Name="desc" Grid.Row="2" Margin="0,10,0,0"
x:Uid="DescriptionHeader" Text="{Binding Test}"/>
<TextBlock x:Name="texttest" Grid.Row="3"
Text="{Binding Name}"/>
</Grid>
</DataTemplate>

This one will also walks you through many aspects of the WP development, including using devices, live tiles, etc:
http://www.jeffblankenburg.com/2011/10/31/31-days-of-mango/
It's a bit old though.

Usually there is no way to set something inside of a DataTemplate easily in c# code. However, there are some messy ways to do it through binding, converters, and selectors.

XAML provides a simple and powerful way to auto-update data between the
business model and the user interface. This mechanism is called
DataBinding. Everytime when the data of your business model changes,
it automatically reflects the updates to the user interface and vice
versa. This is the preferred method in WPF to bring data to the user
interface.
Databinding can be unidirectional (source -> target or target <-
source), or bidirectional (source <-> target).
try out the link Learn XAML.

In abstraction, a DataTemplate is a Visual representation of a certain piece of Data.
UI elements inside a DataTemplate should reflect the state of such piece of data.
In XAML-based technologies, DataBinding helps in keeping the UI in sync with the data, using really clean and beautiful declarative means, as opposed to traditional procedural programming.
So, say you have a certain piece of data, like:
public class Person
{
public string FirstName {get;set;}
public string LastName {get;set;}
}
Then you may have a DataTemplate which represents that data, like:
<DataTemplate DataType="local:Person">
<StackPanel>
<TextBlock Text="{Binding LastName}"/>
<TextBlock Text="{Binding FirstName}"/>
</StackPanel>
</DataTemplate>
The key is in the {Binding} declarations.
See the above linked MSDN article for more information.

Using TextWraping within a TextBox, inside a Grid for use within a ListBox in WP7

I am trying to get my data to display properly within a GridLayout, which is to be used as a DataTemplate for an Item within ListBox. Here is the code associated with what I am doing:
<Grid Name="FeedItemTemplate">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ProfileImage}" Grid.RowSpan="2" Height="75" Width="75" VerticalAlignment="Center" Margin="1" />
<TextBlock Text="{Binding UserName}" Grid.Column="1" Foreground="#FFC8AB14" FontSize="28" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding TimeStamp}" Grid.Column="2" TextWrapping="Wrap" FontSize="18" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Message}" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" TextWrapping="Wrap" FontSize="24" />
</Grid>
The issue is that using this layout, when TextWrapping is set to Wrap, the Item is displayed correctly, but when scrolling through the ListBox everything is really jittery, you cannot scroll in small increments, and it just jumps all over the place.
Any reason why it does this? As I said, only when TextWrapping is set to Wrap it does this. When its not used, it scrolls fine, but the text is all along one line and off the screen.

Does it keep jumping if you explicitly set the top-level Grid element's width to a fixed size?

For some reason that I do not fully understand, settings the ListBox's ItemsPanel property to a StackPanel might solve your problem:
<UserControl.Resources>
<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
<StackPanel/>
</ItemsPanelTemplate>
</UserControl.Resources>
...
<ListBox ... ItemsPanel="{StaticResource MyItemsPanelTemplate}"/>

This is a known issue with listbox scrolling in the current ctp when you have variable height items. The workaround for now is to set a fixed height on your listbox item content. You'll probably also notice the scroll bar doesnt properly go to the bottom all the time. The workaround fixes that too.
Reference.