We Keep Coding

how to make a side bar in WPF

I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>

For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.

dynamically create control using mvvm

I've been trying to create control dynamically and so far it is working. But my problem is the layout
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120*"/>
<RowDefinition Height="120*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
With the xaml above. this is the screenshot of the layout
and if i use a xaml like this
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Width="100" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
But my goal is i want the textbox to expand if the program is maximized.
How can i adjust the xaml code in order to expand the textbox? Thank you

Directly use Grid instead of StackPanel also remove Width="100".
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>

Wpf Multiple GridSplitter row is Growing out of the window size

I have 10 rows, and a button between each row,and in the rows between each button a DockPanel
The function of the button is to fully collapse or make visible the DockPanel inside the next row to collapse or make it visible again
(by visibility.collapse and visible)
The problems i am experiencing is that after returning the DockPanel to visible state the row won't grow back again, so i have to restore its height by storing its value.
this leads me to a problem, once the height of the row is restored, the rest of the rows won't fit the window size anymore, and they can grow out of the window size,
is there a workaround to solve this issue
WPF :
<Grid.RowDefinitions>
<RowDefinition Height="20" Name="rowmenu"/>
<RowDefinition Height="0" Name="rowfirst" MinHeight="0" MaxHeight="0"></RowDefinition>
<RowDefinition Height="20" MinHeight="20" MaxHeight="20"/>
<RowDefinition Height="81*" Name="rowchapter" MinHeight="20" ></RowDefinition>
<RowDefinition Height="25" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="81*" Name="rowSongs" MinHeight="20" ></RowDefinition>
<RowDefinition Height="25" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="81*" Name="rowImages" MinHeight="20" ></RowDefinition>
<RowDefinition Height="25" MinHeight="25" MaxHeight="25" />
<RowDefinition Height="81*" Name="rowEfects" MinHeight="20" ></RowDefinition>
<RowDefinition Height="1*" MinHeight="1" Name="lastrow" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="417*"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Button
Name="HeaderChapters"
Content="Chapters"
Margin="5,0,0,0"
HorizontalContentAlignment="Center"
Grid.Column="1"
Grid.Row="2"
VerticalAlignment="Top"
BorderBrush="CornflowerBlue"
BorderThickness="1"
Click="Button_Click"/>
<DockPanel Name="chaptersdock" Grid.Column="1" Grid.Row="3" Margin="5,0,0,0" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="ChaptersControl" BorderBrush="CornflowerBlue" BorderThickness="3" >
</ItemsControl>
</ScrollViewer>
</DockPanel>
<Button Name="HeaderSongs"
Content="songs"
Margin="5,5,0,0"
HorizontalContentAlignment="Center"
Grid.Column="1" Grid.Row="4"
VerticalAlignment="Top"
BorderBrush="GreenYellow"
BorderThickness="1"
Click="Button_Click"/>
<DockPanel Name="songsdoc" Grid.Column="1" Grid.Row="5" Margin="5,0,0,0" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="songsControl" BorderBrush="GreenYellow" BorderThickness="3" >
</ItemsControl>
</ScrollViewer>
</DockPanel>
<Button Name="HeaderImages" Content="Images"
Margin="5,5,0,0" HorizontalContentAlignment="Center"
Grid.Column="1" Grid.Row="6" VerticalAlignment="Top" BorderBrush="Salmon" BorderThickness="1" Click="Button_Click"/>
<DockPanel Name="Imagesdoc" Grid.Column="1" Grid.Row="7" Margin="5,0,0,0" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="ImagesControl" BorderBrush="Salmon" BorderThickness="3" >
</ItemsControl>
</ScrollViewer>
</DockPanel>
<Button Name="HeaderEfects" Content="Efects" Margin="5,5,0,0" HorizontalContentAlignment="Center" Grid.Column="1" Grid.Row="8" VerticalAlignment="Top" BorderBrush="Purple" BorderThickness="1" Click="Button_Click"/>
<DockPanel Name="Efectsdoc" Grid.Column="1" Grid.Row="9" Margin="5,0,0,0" >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Name="EfectsControl" BorderBrush="Purple" BorderThickness="3" >
</ItemsControl>
</ScrollViewer>
</DockPanel>
<GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" Width="5" HorizontalAlignment="Left" Grid.RowSpan="13" />
<GridSplitter Name="GridSplitterChapters" Grid.Row="4" Grid.Column="1" VerticalAlignment="Top" Height="5" HorizontalAlignment="Stretch" Grid.RowSpan="1" DragStarted="GridSplitterImages_DragStarted" />
<GridSplitter Name="GridSplitterSongs" Grid.Row="6" Grid.Column="1" VerticalAlignment="Top" Height="5" HorizontalAlignment="Stretch" Grid.RowSpan="1" DragStarted="GridSplitterImages_DragStarted" />
<GridSplitter Name="GridSplitterImages" Grid.Row="8" Grid.Column="1" VerticalAlignment="Top" Height="5" HorizontalAlignment="Stretch" Grid.RowSpan="1" DragStarted="GridSplitterImages_DragStarted" />
CS:
private void showhidedoc(string ControlName)
{
DockPanel changedock = getdock(ControlName); //get the dockpanel to shrink
RowDefinition changerow = getgrid(ControlName); //get the row to shrink
GridSplitter changeGridSplitter = getGridsplitter(ControlName); //get the gridsplitter to disable
changerow.Height = GridLength.Auto;
if (changedock.Visibility == System.Windows.Visibility.Collapsed) //to restore the row
{
changerow.MinHeight = 30; //it won't restore if it doesn't have a minwidth
changedock.Visibility = System.Windows.Visibility.Visible;
changeGridSplitter.IsEnabled = true; //reenable the gridsplitter
}
else
{
changerow.MinHeight = 0; //for full collapse
// Setrowheight(ControlName); //rowheight is stored before collapsing
changedock.Visibility = System.Windows.Visibility.Collapsed;
changeGridSplitter.IsEnabled = false; //disable the gridsplitter
}
}

Viewbox fill all column grid space WPF

I am creating a program to tell the user his account balance and stuff like that. I show this information on a Grid with a ViewBox (so it can be resized to any screen resolution) the problem is that the ViewBox does not fills its space at the Grid. Here is my code:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<TextBlock Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBox Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<TextBlock Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBox Margin="5" Text="0.0" TextAlignment="Center"/>
</Viewbox>
</Grid>
Here is the result:
As you can see the "discount" TextBox is smaller than the above, and i need them to have the same width and height. How can i achieve this? I am putting everything inside a ViewBox to make the resize for me, but is it right? i already tried several methos like this one, but it makes the text really small.

You don't need the Viewboxes at all:
<TextBlock Grid.Row="0" Grid.Column="1" Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
<TextBox Grid.Row="0" Grid.Column="2" Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
<TextBlock Grid.Row="1" Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
<TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" TextAlignment="Center"/>
Works just fine on my machine, no matter how I resize it.
If you need to keep the Viewboxes you can force your Textboxes to be the same size using Bindings
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" >
<TextBlock Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" >
<TextBox x:Name="SubtotalBox" Grid.Row="0" Grid.Column="2" Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" >
<TextBlock Grid.Row="1" Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" >
<TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" MaxLength="6" Height="{Binding ElementName=SubtotalBox, Path=ActualHeight}" Width="{Binding ElementName=SubtotalBox, Path=ActualWidth}" TextAlignment="Center"/>
</Viewbox>
This binds the Width and Height of the second Textbox to the same as the first, keeping it consistent and forcing the Viewbox to size up to accommodate the bigger TextBox.

How do I get line break in textBlock working

I somehow can't seem to get a line break in my TextBlock.
TextWrapping="Wrap" doesn't work. Also anything else such as TextTrimming doesn't affect my TextBlock at all. I assume an other control is blocking? Talking about the "txtErrorLabel"
<Window x:Class="BLVKServiceDashboard.Pages.ErrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ErrorWindow" Height="555" Width="420" Icon="/BLVKServiceDashboard;component/error.ico" ResizeMode="NoResize" WindowStartupLocation="Manual" ShowInTaskbar="False" Background="#FFEEEEEE" WindowStyle="None">
<Grid Margin="0,0,4,-3" RenderTransformOrigin="0.588,0.554">
<Label Content="Fehlermeldungen" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontFamily="Segoe UI Semibold" FontSize="25"/>
<ListBox x:Name="lstErrorItems" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="0" Background="{x:Null}" Margin="0,58" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="500" Height="38" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="380"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.ColumnSpan="2">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" Text="Fehler: " HorizontalAlignment="Left" Height="Auto" Width="Auto" VerticalAlignment="Top" Margin="5,10,0,2" FontSize="14" FontFamily="Segoe UI" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
<TextBlock x:Name="txtErrorLabel" Foreground="Black" Text="{Binding}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Margin="5,10,0,2" FontSize="14" FontFamily="Segoe UI"/>
</StackPanel>
</ScrollViewer>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="btnDelete" Content="Meldungen löschen" Margin="147,514,147,0" VerticalAlignment="Top" Width="122" Click="btnDelete_Click" HorizontalContentAlignment="Center" RenderTransformOrigin="0.467,0.909"/>
</Grid>

Your textblock is in stackPanel which gives no boundary to your textBlock.
change parent to something which provides boundary to your textblock or set limits to stack panel itself.
TextWrapping will come into effect only when the textblock exceeds width of parent control. But stackPanel never imposes any boundary to its childs and hence all space is available.
a possible solution can be --
<Grid Width="500" Height="Auto" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="380"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Text="Fehler: " HorizontalAlignment="Left" Height="Auto" Width="Auto" VerticalAlignment="Top" Margin="5,10,0,2" FontSize="14" FontFamily="Segoe UI" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
<TextBlock Grid.Column="1" x:Name="txtErrorLabel"
Foreground="Black"
TextWrapping="Wrap"
Text="123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,10,0,2"
FontSize="14" FontFamily="Segoe UI"/>
</Grid>
</ScrollViewer>
</Grid>