We Keep Coding

What is wrong with my grid layout formatting?

I have the following window in my application:
<Grid Width="{Binding ActualWidth,
RelativeSource = {RelativeSource AncestorType = {x:Type Window}}}"
Height="{Binding ActualHeight,
RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" x:Name="dataGrid" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>
<DataGrid Grid.Column="2" x:Name="dataGrid2" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="5"/>
</Grid>
<StatusBar Grid.Row="1" Height="20">
<StatusBarItem x:Name="StatusBarInfo" Content="Offset:" HorizontalAlignment="Right" />
</StatusBar>
</Grid>
In the designer view everything appears as expected, with two dataGrids, separated by a gridSplitter, and the status bar on the bottom of the screen. for some reason, when running the application, the layout is slightly different, the grid containing the dataGrid overlaps the status bar.
It makes me think something about my display settings on Windows 10 is causing me problems.
This is my first WPF application, I am still learning.

Maybe setting the Width and Height of the root Grid prevents you from achieving the goal. I believe by default, the grid will take the rest (*) of the space of the Window if you do not set the row height and column width. Alternatively, instead of setting the Width and Height of the first Grid you can set its VerticalAlignment and HorizontalAlignment to "Stretch"

If you have any data inside dataGrid it could stretch and overlap status bar. If this is the problem, try using:
<ScrollViewer> (data grid here) </ScrollViewer>

Dynamic width column xaml won't work

I have been trying to get dynamic column width to work for my simple WP8.1 app. The goal is to have the first column take up half of the listbox, and the other two columns a quarter each. I hoped to do this by assigning a dynamic width, using the * indicator as described here.
This let me to the piece of xaml code at the bottom of my post.
In my MainPage I set the DataContext to an ObservableCollection, and all the data shows up in their respective columns, the columns just do not get the desired width (they are all as small as can be).
What prevents my dynamic width from working? I have toyed around with HorizontalAlignment and Width of TextBoxes too, but with no success. I tried to look around for answers, and I even used some examples that did work, but that did not bring me closer to understanding why it does not work here.
Thanks in advance.
<Grid>
<ListBox Name="transactionListBox" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Category}"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Amount}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

The item Grid itself is being sized-to-fit by the ListBox. You can override this behavior by setting the ItemContainerStyle to make the ListBoxItems stretch to fill horizontally:
<ListBox Name="transactionListBox" ItemsSource="{Binding}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
...
</ListBox>

I think you need a constraining width on the ListBox or Grid. With your code, the grid and ListBox will re-size to fit the content, so there is no need for the dynamic column definitions.

Portrait Images are cropped in WP8

I am trying to bind Landscape and Portrait Images to the grid control. The Landscape images are loaded correctly, but I'm facing problems when it comes to load portrait images. Their bottom part is cut off(overflowed) so the grid row can't load the image with it's full Height. I tried setting the Row property with Height="Auto" or Height="*" but that didn't work. Here is my XAML:
<ItemsControl ItemsSource="{Binding ItemsPrasanja}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
Name="txtPrasanje"
Grid.Row="0"
Text="{Binding Tekst}"
TextWrapping="Wrap" />
<Image Name="imgPrasanje"
Grid.Row="1"
Source="{Binding Slika}"
Margin="0,5,0,0" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
How can I solve this without setting manually Width or Height to the Grid or the Image control?
P.S. The ItemsControl is part from another Grid control. It populates (Grid.Row="0") which I set to Height="*"
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I already tried all the Stretch properties, but it didn't have any effect. The image is still croped.

Maybe you will show you'r full code and xaml of this control? Is it is ListBox, try to add this:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</phone:PhoneApplicationPage.Resources>
ItemContainerStyle="{StaticResource ListBoxItemStyle}" to your control
Или просто покажи код всей контролы полностью

Trouble with Grid and StackPanel - Bindings

OK, I'm having issues properly using a ScrollViewer (containing an ItemsControl) inside a StackPanel.
The thing is the scrolling works, however :
No matter how much the user scrolls down, the bottom lines of the tables are not visible
When scrolling is... "released", the table pops back up...
<ScrollViewer Height="Auto">
<ItemsControl ItemsSource="{Binding Items, Mode=TwoWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" Margin="0,0,0,0" x:Name="ResTable">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.10*"/>
<ColumnDefinition Width="0.30*" />
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.30*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding [num]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding [A]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="2" Text="{Binding [B]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="3" Text="{Binding [C]}" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Any ideas?
P.S.
I've had a look at some of the other answers to similar issues, but none seems to be working...
My main idea is to display a table, with a fixed header, and scrollable contents (populated via Bindings) - ok, and there are also a couple of things on the top of the page (apart from the table I mean)

I guess the issue is that you should probably use parent element like Grid, not StackPanel, because StackPanel has its drawbacks when resizing child items with scrolls and so on.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Put headers in Grid.Row="0" -->
<!-- Put Scrollviewer in Grid.Row="1" -->
</Grid>
Also Height="Auto" attribute can be removed from ScrollViewer, you might want to use VerticalAlignment="Stretch" for item to take all the available space. I hope this is what you are trying to achieve.

ScrollViewer in ItemsControl - ScrollBar not shown but working

This is not your average "My ScrollViewer isn't working" question...
Assume a window with a grid. The sizes of column 0 and row 1 are set to Auto, column 1 and row 0 are set to *. (important)
In cell [0, 0] there is an ItemsControl with a Template with a StackPanel inside a ScrollViewer inside a Grid. The reason is simple: Show a scroll bar if not all items in the ItemsControl can be displayed. The visibility of the vertical scrollbar is set to Auto (important).
In Cell [1, 1] there is a Button that displays its width.
If the window is too small too display all items in the ItemsControl this will lead to the following:
The scroll bar will be there but it is not visible. It is working, because I can scroll using the mouse wheel. The reason seems to be that the grid column in which the ItemsControl is contained is not automatically extended to make space for the scrollbar.
If I change (nearly) any of the parameters, the scroll bar is displayed as expected and the second column is reduced in size. Can anyone explain this odd behavior?
Additional Info:
The following parameter changes will lead to the scrollbar becoming visible:
Changing size of column 0 to *
Changing size of column 1 to Auto
Changing size of row 1 to *
Removing the Button.
Moving the Button to [0, 1] or [1, 0]
Manually setting the width of the ItemsControl.
Setting the VerticalScrollBarVisibility of the ScrollViewer in the ItemsControl to Visible.
However, changing the button in [1, 1] to something else, e.g. another ItemsControl doesn't change the strange behavior, so it has nothing to with the button. Furthermore, changing the width of the Button to something that is smaller than the second column, also doesn't remove that behavior.
Complete sample code for reproduction:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="343" Width="253">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel IsItemsHost="True" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.Items>
<Button Content="Column1" Height="500" />
</ItemsControl.Items>
</ItemsControl>
<Button Content="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
Grid.Column="1" Grid.Row="1" />
</Grid>
</Window>

Looks like it might be a known bug in WPF. This question deals with a ListBox's ScrollViewer, but I think the principal is the same.
As an alternative, you could add something behind the ScrollViewer that has it's width bound to the ScrollViewer's ActualWidth, which will force the column to draw the correct size
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="Test" Grid.Row="0" Grid.Column="0"
VerticalScrollBarVisibility="Auto">
<Button Content="Column1" Height="500" />
</ScrollViewer>
<Grid Grid.Column="0" Grid.Row="0"
Width="{Binding ElementName=Test, Path=ActualWidth}" />
<Button Content="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
Grid.Column="1" Grid.Row="1" />
</Grid>