We Keep Coding

WPF Listbox stretching issues

I have created a UserControl that is suppose to display some text and then present a listbox for the user to select some item.
It is supposed to strech to the height to the grid cell it is placed in. And if there are more items than can fit on screen then to display a vertical scrollbar. After much trial and error I have finally managed to get it working as expected. But only when the row height is a pixel value. If I use any partial (by partial I mean the star symbol), the grid cell's height is not contained. Since I need the app the match screen size I need the partials to work.
Putting 100 items in the listbox suddenly makes the height of the entire grid is around 11000 (which I think is everything with no contraint). Meaning there is no scrollbar. See [Screenshot] https://i.stack.imgur.com/faES9.png.
I have a similar issue with my TextBox only horizontally. It will only activate when clicking on a specific pixel since it is empty the width is only 1 pixel. I hope someone can help me point out where I am going wrong, cause since I'm having more than one issue I suspect the problem is on my end.
This is my XAML code.
<UserControl x:Class="PackingStation.UserControls.SearchItemListing"
x:Name="SearchItemListingRoot"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:PackingStation.UserControls"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<Grid DataContext="{Binding ElementName=SearchItemListingRoot}"
x:Name="TheGrid"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".1*" />
<RowDefinition Height=".1*" />
<!-- If this value isnt a pixel value it will not vertically strech to available space -->
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Center"
Margin="0,0,0,0"
x:Name="TheHeadLineField"
Grid.Row="0"
Grid.Column="1">
<Label Style="{StaticResource LabelStyleHeadline32}"
Content="{Binding Title}"
HorizontalAlignment="Left"/>
<Label Style="{StaticResource LabelStyleText}"
HorizontalAlignment="Left"
Content="{Binding SubTitle}"
FontSize="20"/>
</StackPanel>
<!-- Search Field -->
<Border Style="{StaticResource Border6}"
x:Name="TheSearchField"
Grid.Row="1"
Grid.Column="1"
Background="{StaticResource ColorSummaryPanelBackground}"
BorderBrush="{StaticResource ColorSummaryPanelBorder}"
BorderThickness="1"
Margin="0,40,0,0">
<StackPanel Orientation="Horizontal"
Height="78"
HorizontalAlignment="Stretch">
<Image Stretch="Uniform"
Height="24"
Source="pack://application:,,,/WpfUI;component/Icons/Search.png"
Margin="36,0,0,0"
VerticalAlignment="Center"/>
<!-- Search Textbox -->
<!-- Similar issue with this textbox, only horizontally. With no content you have to hit a specific pixel to activate it -->
<TextBox Style="{StaticResource TextBoxSearchInlay}"
Name="TbxSearchTerm"
TextChanged="TextBoxBase_OnTextChanged"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="20,0,0,0"/>
</StackPanel>
</Border>
<!-- Search results listings -->
<ListBox ItemsSource="{Binding Items}"
x:Name="TheListBox"
Grid.Row="2"
Grid.Column="1"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" Margin="0,-10,0,-10">
<Label Style="{StaticResource LabelSearchItem}"
Content="{Binding Name}"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>

I could repro your problem when I put your UserControl in a StackPanel. When it's in a Grid the ListBox shows its vertical scrollbar. So, try your UserControl in a Grid.
I think this answer will give a good explanation about Grid and StackPanel stretching behavior.

GridView item height is fixed

I am working on a project where I have a GridView and I need to show an image and 3 TextBlocks. The image has a fixed Height and Width properties and the first TextBlock have either 1 line of text or 2. The other TextBlocks have only 1 line of text.
The problem is that if the first TextBlock has 1 line of text everything is shown perfectly but if the text is longer than one line the last TextBlock is not shown in the GridViewItem and it is pushed down where it gets hidden.
<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemHelper">
<UserControl>
<StackPanel>
<Image Name="image" Source="{x:Bind ItemImage}"
Height="144" Width="256" HorizontalAlignment="Center"/>
<TextBlock Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
<TextBlock Name="section" Text="{x:Bind ItemSection}"/>
<TextBlock Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
</StackPanel>
</UserControl>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I have also tried the above XAML with RelativePanel and the same thing happens. I want the height to be fixed at max height with 2 lines of text for title or adjustable for each item in the GridView.
As you can see that the first item shows 3 TextBlocks but the 2nd item shows only 2 where the first one has 2 lines of text.
I only see the following possible options:
Set the height of the StackPanel to be fixed for the max height of the items
Set the height of the title to be fixed with 2 lines of text
Maybe editing the default Style for GridViewItem would help
Or maybe there is any other possible option which doesn't involve setting the fixed height for any element.
Any suggestions? Thanks.

Why don't you use a Grid inside your UserControl instead of the StackPanel. The StackPanel sizes to content Heights only. I would use a Grid, set the RowDefinition at third Row to Height="*" and the other ones to Height="Auto". I tested this with an ItemsControl (that worked...)
<GridView ItemsSource="{Binding HomeList, Mode=OneWay}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemHelper">
<UserControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Name="image" Source="{x:Bind ItemImage}" Height="144" Width="256" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" Name="title" Text="{x:Bind ItemTitle}" Style="{StaticResource OneLinedItemTitle}"/>
<TextBlock Grid.Row="2" Name="section" Text="{x:Bind ItemSection}" TextWrapping="Wrap"/>
<TextBlock Grid.Row="3" Name="pubUpdate" Text="{x:Bind ItemPublishTime}"/>
</Grid>
</UserControl>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

It seems the first item is not rendering correctly (at least this is what happened to me). Check Justin XL answer, maybe it can help. Apparently the problem (from poor rendering) is solved by setting the ItemHeight property
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemHeight="DesiredHeight"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

ScrollViewer.ChangeView() does not scroll horizontally

I'm trying to create two scrollviewers that scroll vertically and horizontally respectively.
The scrolling should start when the manipulationdelta event is detected, and I have used the ChangeView method to move the scrollviewers accordingly. The vertical scrollviewer is ok, but it's not the same for the horizontal one.
I have added an image to show the 2 scrollviewers since i cannot post it right here.
Here's the code: XAML
<!--horizontal scrollviewer-->
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalScrollMode="Disabled"
VerticalScrollMode="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="100"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!--upperGrid-->
<GridView Grid.Row="0"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ItemsSource="{Binding dataItems}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Height="80" Width="80" Text="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!--bottomGrid-->
<GridView Grid.Row="2"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ItemsSource="{Binding dataItems}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Height="80" Width="80" Text="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</ScrollViewer>
and the .cs
private void dataGrid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var x = e.Delta.Translation.X;
var y = e.Delta.Translation.Y;
if(Math.Abs(x)> Math.Abs(y))
{
bool result = horizontalScrollViewer.ChangeView( horizontalScrollViewer.HorizontalOffset - x , null, null);
result = centralScrollViewer.ChangeView(horizontalScrollViewer.HorizontalOffset - x, null, null);
}
else
{
bool result = centralScrollViewer.ChangeView(null, verticalScrollViewer.VerticalOffset -y, null);
verticalScrollViewer.ChangeView(null, verticalScrollViewer.VerticalOffset - y, null);
}
}
In the msdn documentation I have read that :
horizontalOffset
Type: IReference [C++] | System.Nullable [.NET]
A value between 0 and ScrollableWidth that specifies the distance the content >should be scrolled horizontally.
but my ScrollableWidth is equal to zero and I can't understand why.
Does anyone know what's wrong with my code?

I've found a solution by myself!
I had to add the horizontalscrollbar visibility option on the horizontal scrollviewer. It's quite odd since I didn't need to add it to the vertical one. Anyway here's the code of the horizontal scrollviewer:
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.RowSpan="3"
Grid.Column="1"
HorizontalScrollMode="Disabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled">

I don't think you can scroll while scrolling is disabled. If you're just trying to hide the scrollbars, then do the following:
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalScrollMode="Enabled"
VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
...
</ScrollViewer>

Making vertical nested scroll always visible

I have the following Xaml. I have a grid containing some "columnheaders" and a list box. Currently my horizontal scroll bar scroll both the column headers and the listbox. My vertical scroll bar only scrolls the listbox as I want the column header "frozen". The issue I have is that I have to scroll all the way to the right to see the vertical scroll bar. Is there anyway of "locking" the vertical scroll bar to be always visible ( when its required ) and for it to only scroll the listbox? Please let me know if you need anymore information.
<Grid Name="test1" Margin="0,0,50,0" Grid.Row="0">
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" Width="{Binding ElementName=test1, Path=ActualWidth}">
<Grid Name="grdMain" >
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ItemsControl Name="ColumnHeaders" ..>
</ItemsControl>
</StackPanel>
<StackPanel Name="check" Grid.Row="1">
<ScrollViewer Height="{Binding ElementName=check, Path=ActualHeight}" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
<ListBox Name="lstDrop" ..>
</ListBox>
</ScrollViewer>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
Here are screen shots of current functionality:

Finally, it was a bit nastier as I thought. Nevertheless, here is some stuff. I had to do some changes on the initial idea and your layout, but afterwards it'll look all the same.
<Grid Name="test1" Margin="0,0,50,0" Grid.Row="0">
<Grid Name="grdMain" >
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" Name="scv_headers">
<ItemsControl Name="ColumnHeaders">
<!--Headers here-->
</ItemsControl>
</ScrollViewer>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" ScrollChanged="List_OnScrollChanged">
<ListBox Name="lstDrop">
<!--Items here-->
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
Because the scrollbars are hidden in the template, I had to add some code behind
private void List_OnScrollChanged(object sender, ScrollChangedEventArgs e)
{
var scrollbarSrc = (ScrollBar)((ScrollViewer)e.OriginalSource).Template.FindName("PART_HorizontalScrollBar", (ScrollViewer)e.OriginalSource);
scv_headers.ScrollToHorizontalOffset(scrollbarSrc.Value);
}
Because your stackpanels only contain one item, I left them away which looks pretty much the same.

Drag&Drop Failure with Scatterview Items and Grid Layout

Link to the Image of my App
I want to detect if the 2 Pictures on canvas are neary each other, an than make some compare operation with the data that is embedded in the pictures if both are touched an near each other.
The brown Area is a ScatterView where i can drop picture elements an add them to the green listbox.
I can drop picture items directly from the blue list box to the brown drop area.
But when i drop them first on the yellow scatterview, then i can't get out of there to drop them on the brown scatterview.
<Grid ShowGridLines="True">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<s:ScatterView
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.RowSpan="1"
x:Name="ScatterLayer"
Background="Yellow"
ItemContainerStyle="{StaticResource ScatterItemStyle}"
AllowDrop="True"
ItemTemplate="{StaticResource ImageAndCaptionTemplate}"
ItemsSource="{Binding ScatterItems}"
s:SurfaceDragDrop.Drop="ScatterLayer_Drop"
s:SurfaceDragDrop.DragEnter="ScatterLayer_DragEnter"
s:SurfaceDragDrop.DragCompleted="ScatterLayer_DragCompleted" >
</s:ScatterView>
<s:SurfaceListBox
Grid.Row="0" Grid.Column="2"
AllowDrop="True"
x:Name="ListBoxVerticalBasket"
VerticalAlignment="Top"
Background="GreenYellow"
ItemsSource="{Binding Path=BasketItems}"
ItemTemplate="{StaticResource BasketTemplate}" >
<s:SurfaceListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</s:SurfaceListBox.ItemsPanel>
</s:SurfaceListBox>
<s:SurfaceListBox
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
x:Name="ShoppingList"
AllowDrop="True"
s:SurfaceDragDrop.DragCompleted="OnShoppingListDragCompleted"
s:SurfaceDragDrop.DragCanceled="OnShoppingListDragCanceled"
PreviewMouseLeftButtonDown="OnShoppingListPreviewMouseLeftButtonDown"
PreviewMouseMove="OnShoppingListPreviewMouseMove"
PreviewMouseLeftButtonUp="OnShoppingListPreviewMouseLeftButtonUp"
ItemsSource="{Binding Path=LibraryItems}"
ItemTemplate="{StaticResource ImageAndCaptionTemplate}"
PreviewTouchDown="OnShoppingListPreviewTouchDown"
PreviewTouchMove="OnShoppingListPreviewTouchMove"
PreviewTouchUp="OnShoppingListPreviewTouchUp"
Background="#FF00BDD8">
<s:SurfaceListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" AllowDrop="True"/>
</ItemsPanelTemplate>
</s:SurfaceListBox.ItemsPanel>
</s:SurfaceListBox>
<s:ScatterView
Grid.Column="2"
Grid.Row="1"
Background="DarkGoldenrod"
Width="300"
Height="100"
x:Name="ScatterViewDropArea"
VerticalAlignment="Top"
HorizontalAlignment="Left"
AllowDrop="True"
s:SurfaceDragDrop.Drop="ScatterViewDropArea_Drop">
</s:ScatterView>

I think you should consider using the DragDropScatterView that comes with the Shopping Cart demo in the Surface SDK instead of ScatterView.