We Keep Coding

UWP: Cannot make ListView scrollable

I have a page with a simple grid (2x2). In one grid on the bottom left corner is another Grid and inside this grid is a ListView bound to a collection. Entries can be added to the collection so the ListView grows in height (height of ListView is set to auto, so that all space available is used).
What I want is, if all available space (from the screen height) is used, scrollbars for the ListView should appear and should be usable. Funny (unfunny) thing is: scrollbars do appear but I cannot use them, I cannot scroll the ListView with the vertical scrollbar that appears when I hover the ListView.
It works, when I set the height of the ListView to a fixed value, but I don't want it that way, because then it doesn't use all the available space on the screen.
This is the XAML of the page (I removed some parts for demonstration purposes) :
<Page
x:Class="Qooli.TimeTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Qooli.TimeTracker"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
...
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Name="spAddEntry" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Add new entry:" Name="lblAddNewEntry" />
...
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Allocated time:" Name="lblAllocatedTime" />
...
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Daily overview:" Name="lblDailyOverview" Grid.Row="0" Grid.Column="0" />
<ListView Name="lvTimeEntries" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
Height="Auto"
MinHeight="100"
VerticalAlignment="Top"
MinWidth="300"
SelectionMode="Single"
ItemsSource="{x:Bind ViewModel.TimeEntriesAdvancedCollectionView, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Enabled">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:TimeEntry">
<Grid Background="{Binding Type, Converter={StaticResource TimeEntryTypeColorConverter}}" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Time, Mode=OneWay}" Style="{StaticResource TitleTextBlockStyle}"
MinWidth="60"
MaxWidth="60"
Grid.Row="0" Grid.Column="0">
</TextBlock>
<TextBlock Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource BodyTextBlockStyle}" Margin="5,0,0,0"
MinWidth="100"
MaxWidth="100"
Grid.Row="0" Grid.Column="1">
</TextBlock>
<Button Name="btnEditTimeEntry" Grid.Row="0" Grid.Column="2" Margin="5,5,5,5">
<SymbolIcon x:Name="edit" Symbol="Edit"/>
</Button>
<Button Name="btnDeleteTimeEntry" Grid.Row="0" Grid.Column="3" Margin="5,5,5,5">
<SymbolIcon x:Name="delete" Symbol="Delete"/>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Style="{StaticResource summaryTextStyle}" Text="Start time:" Name="lblDayStartTime" />
...
</StackPanel>
</Grid>
</Page>
Can someone spot why it is behaving this way?

You need to set the height of the second row to "*" for both grids.

Grid content disappears when selecting Tab Item of another Grid under Canvas

My project is based on WPF. I have created a canvas Container. Under that container, I have two grids (gSettings and gGrid).
I have used GroupBox. Under Canvas Container (gCanvas), I have created two grids (gSettings and gGrid). Under gGrid, I am using Tab Controls (tabCtrlDevice). First time when the Window is loading, it's showing data correctly in both grids, but when I am changing the tab item of tab controls, the second grid i.e. gGrid then, gSettings is disappears.
Please help to sort out this issue.
Thanks in advance.
<GroupBox x:Name="DragDropgrpbox" Height="Auto" Width="Auto">
<ZoomableCanvas x:Name="zoomCtrl">
<Canvas x:Name="gCanvas">
<Grid x:Name="gSettings" Canvas.Left="0" Height="613">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr2" Grid.Column="1" Grid.ColumnSpan="2">
<WrapPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Name="ImageViewer2" Stretch="Fill" HorizontalAlignment="Center" Width="116" Height="107" Panel.ZIndex="1" VerticalAlignment="Center" />
</WrapPanel>
</Border>
</Grid>
<Grid x:Name="gGrid" Canvas.Left="140" Height="646">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="15"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5" />
<ColumnDefinition />
<ColumnDefinition x:Name="grdConverterColumn" MinWidth="140" Width="*"/>
<ColumnDefinition />
<ColumnDefinition x:Name="grdPortColumn" Width="*"/>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Border x:Name="wrapBrdr" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2">
<WrapPanel>
<Image Name="ImageViewer1" Stretch="Fill" HorizontalAlignment="Left" Width="54" Height="49" Panel.ZIndex="1" />
<TextBlock x:Name="lblMessage" Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="4">
<TextBlock.Inlines>
<Run x:Name="step1" />
<LineBreak/>
<Run x:Name="step2" />
<LineBreak/>
<Run x:Name="step3" />
</TextBlock.Inlines>
</TextBlock>
</WrapPanel>
</Border><TabControl x:Name="tabCtrlDevice" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2" Grid.RowSpan="2">
<TabItem x:Name="CoriolisMVD" >
<TabItem.Content>
<UniformGrid x:Name="grdDevices" Columns="3" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="DensityViscosity">
<TabItem.Content>
<UniformGrid x:Name="grdDensityViscosity" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="RosemountFlow" >
<TabItem.Content>
<UniformGrid x:Name="grdRosemountFlow" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
<TabItem x:Name="Other" >
<TabItem.Content>
<UniformGrid x:Name="grdOther" Columns="2" VerticalAlignment="Top"/>
</TabItem.Content>
</TabItem>
</TabControl>
<!--End Device Tab Controler-->
<Grid Grid.Column="3" Grid.Row="6">
<UniformGrid x:Name="grdConverters" Columns="1" VerticalAlignment="Top"/>
</Grid>
<Border x:Name="grdPortsBrdr" Height="500px" Grid.Column="4" Grid.Row="6" HorizontalAlignment="Right" >
<ScrollViewer>
<UniformGrid x:Name="grdPorts" VerticalAlignment="Top"/>
</ScrollViewer>
</Border>
</Grid>
</Canvas>
</ZoomableCanvas>
</GroupBox>

After a lot struggle, I got a solution:
gCanvas.Children.Add(gSettings);
I have resolved it`

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?

DockPanel Resizing and TextBox linebreak

I have a DockPanel with two Grids (DockPanel.Dock="Right/Left"). In the left i have a TreeView and in the right i have some TextBoxes. If i resize my window the panels resize proportinal.
My problem is, if i write long text in a TextBox the TextBox enlarge and hide my left DockPanel instead of a break the text.
I have set minwidth of the left DockPanel to '300' and set TextWrapping in the TextBoxes to 'wrap' but nothing helps.
Source:
<Grid Background="#FF58ACFC" Name="main">
<DockPanel>
<Grid DockPanel.Dock="Right" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="60" />
<RowDefinition Height="26"/>
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Titel:" Grid.Row="0"/>
<TextBox Grid.Row="1" IsReadOnly="False">
<Label Content="Frage:" Grid.Row="2"/>
<TextBox Grid.Row="3" TextWrapping="Wrap" IsReadOnly="False" AcceptsReturn="True">
<Label Content="Antwort:" Grid.Row="4"/>
<TextBox Grid.Row="5" IsReadOnly="False" TextWrapping="Wrap" />
</Grid>
<Grid DockPanel.Dock="Left" Margin="5,0,0,0">
<DockPanel>
<Grid DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Kategorie" Grid.Column="0"/>
<Button Grid.Column="1" BorderThickness="0" HorizontalAlignment="Right">
</Grid>
<TreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Padding="0,0,15,0" />
</DockPanel>
</Grid>
<Grid DockPanel.Dock="Right">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Lernkarten" Grid.Column="0"/>
<Button Grid.Column="1" Width="26" Click="ButtonAddItem_Click">
</Grid>
<ListView />
</DockPanel>
</Grid>
</DockPanel>
</Grid>
</DockPanel>
</Grid>

That's pretty much why Dockpanels are useless :-)
I suggest using Grid..