We Keep Coding

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?

I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

How can i sort wpf textboxes straight?

I'm design a simple login window and i'm very wondering about this.
Well, this is my XAML code
<Grid ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label x:Name="label_ID" Height="30"/>
<TextBox x:Name="textBox_ID" Height="20" TabIndex="0">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
<DockPanel Grid.Row="1">
<Label x:Name="label_PW" Height="30"/>
<PasswordBox x:Name="textBox_PW" Height="20" TabIndex="1">
<PasswordBox.Margin>
<Thickness Right="5"/>
</PasswordBox.Margin>
</PasswordBox>
</DockPanel>
<DockPanel Grid.Row="2">
<Label x:Name="label_IP" Height="30"/>
<TextBox x:Name="textBox_IP" Height="20" UndoLimit="2">
<TextBox.Margin>
<Thickness Right="5"/>
</TextBox.Margin>
</TextBox>
</DockPanel>
</Grid>
label_ID's string is ID
label_PW's string is Password
label_IP's string is 'IP'
And the output is like this:
https://www.dropbox.com/s/k23ft06layp0sl4/1.PNG?dl=0
The password text box only short then other.
(I want to short another text boxes to.)
How can i fix location of text boxes?
Thanks.

I think your DockPanels are not really needed, instead you could use two columns in the Grid:
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" x:Name="label_ID" Height="30"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="textBox_ID" Height="20" TabIndex="0" Margin="5"/>
<Label Grid.Row="1" Grid.Column="0" x:Name="label_PW" Height="30"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="textBox_PW" Height="20" TabIndex="1" Margin="5"/>
<Label Grid.Row="2" Grid.Column="0" x:Name="label_IP" Height="30"/>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="textBox_IP" Height="20" UndoLimit="2" Margin="5"/>
</Grid>
Setting the first column's width to Auto ensures that the text will be visible, the second column will take the rest of the space (*).
It produces an output like this (with some test strings added by me):

Simplest way I could think of is
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Name="lblID" Content="ID:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Margin="5,2,5,2" />
<TextBox Name="txtID" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblPwd" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="1" Margin="5,2,5,2" />
<PasswordBox Name="pwdBx" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,2,0,2" Width="250" Height="25" />
<Label Name="lblIP" Content="IP:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="0" Grid.Row="2" Margin="5,2,5,2" />
<TextBox Name="txtIP" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,2,0,2" Width="250" Height="25" />
</Grid>

Right now I can only think of using the margin property as in:
<UIElement Margin="left, top, right, bottom" />
<Menu Name="EgMenu"
Margin="20,20,0,20" />
The margin property will help you position and size your UI elements in an easiser way thatt youy can visualise just looking at the text. But why not use WYSIWYG and, refine by editting XAML later.

WPF: Create box with text in four corners

In WPF, I'm trying to create a button with four labels at each corner. It would look like a dice (die?) with text in the corners instead of dots.
This code doesn't work:
<Button HorizontalAlignment="Stretch" Background="Red" Height="100" >
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
<Label Grid.Row="0" Grid.Column="1" Content="TopRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="0" Content="BottomLeft"/>
<Label Grid.Row="1" Grid.Column="1" Content="BottomRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</Button>
It mashes the text into the center of the grid instead of moving it to the corners. It seems like the grid is not taking up all the space in the button.
Any help appreciated. Thank you.

Set the VerticalContentAlignment and HorizontalContentAlignment for the Button to Stretch.
<Button HorizontalAlignment="Stretch" Background="Red" Height="100" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid ShowGridLines="True" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
<Label Grid.Row="0" Grid.Column="1" Content="TopRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="0" Content="BottomLeft" VerticalContentAlignment="Bottom" />
<Label Grid.Row="1" Grid.Column="1" Content="BottomRight" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</Button>

How to put two different textboxes into same level?

Right xaml code looks this way:
mc:Ignorable="d" d:DesignWidth="363" Height="628">
<Grid Style="{StaticResource ContentRoot}">
<ScrollViewer Margin="0,-105,-9,0">
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459">
</InlineUIContainer>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="Num1"/>
<LineBreak/>
<InlineUIContainer>
<TextBox d:DesignUseLayoutRounding="True"
Width="160"
UseLayoutRounding="True"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_numRequest"
InputMethod.IsInputMethodEnabled="False"
Height="23"
AutoWordSelection="True"/>
</InlineUIContainer>
<LineBreak/>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="ID"/>
<Run Text=" "/>
<LineBreak/>
<InlineUIContainer>
<TextBox Width="160"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_IDWork"
Height="23"/>
As you can there are two textboxes, which located one under other one, and I need to put them into same level, I tried it to via constructor, it simply don't do it in my particular case. To clearify I have added pictures.
And don't be afraid foreign inscriptiones, its doesn't matter.
I just don't know how to fix this, and I think it' related with StackPanel. Any ideas ?
UPD: All xaml code here http://snipt.org/Btff4/Default#expand
UPD: May be it possible to put one more stack panel rigt to existing one?

You are probably looking for Orientation attribute:
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459" Orientation="Horizontal">
Update
Adding a very basic example to illustrate how StackPanel works:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" SizeToContent="WidthAndHeight">
<StackPanel Orientation="Horizontal" Margin="10">
<TextBox Text="First textbox" Height="20" Margin="5, 0" />
<TextBox Text="Second textbox" Height="20" />
</StackPanel>
</Window>
Execution result:
Update
Adding XAML which allows to achieve desired layout:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sample layout" SizeToContent="Height" Width="400">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="3" Grid.Row="0" Content="Задайте параметры заявок" FontWeight="Bold" FontSize="16" />
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="номер заявки" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="приоритет заявки" />
<ComboBox Grid.Row="4" SelectedIndex="0">
<ComboBoxItem Content="Высокий" />
<ComboBoxItem Content="Средний" />
<ComboBoxItem Content="Низкий" />
</ComboBox>
</Grid>
<Grid Grid.Column="2" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="идентификатор вида работы" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="номер траектории" />
<TextBox Grid.Row="4" Text="Введите число" />
</Grid>
</Grid>
</Window>
Execution result:

You can use a StackPanel with Orientation="Horizontal", as a container. Something like:
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>Label</TextBlock>
<TextBox Width="150"/>
</StackPanel>
<StackPanel>
<TextBlock>Label 2</TextBlock>
<TextBox Width="150"/>
</StackPanel>
</StackPanel>

I prefer Grid defintion than StakPanel. You can easily design your application with that method, just cut each area in many smaller area. Use Auto and * to define proportion.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Label" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" />
<Label Content="Label" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="0" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="1" />
</Grid>
<Grid Grid.Row="1">
<Label Content="I need this kind of location" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>

Grid should do what you need:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="lblTextBlock1" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="TextBlock1" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
<TextBlock Grid.Column="1" Name="lblTextBlock2" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Grid.Column="1" Text="TextBlock2" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
</Grid>

How to stretch StackPanel to FullScreen

I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?