Develop Reference

How to STOP ListView from expanding to content

I'm trying to make my xaml squeeze list items (images) to fit the initial window size, but they cant be fixed size because i want to scale them up as i increase the size of the window. Something like a ViewBox would do.
I load images from 2 folders (software and hardware). Number and size of the images will wary in the runtime so i want to make items be the same size regardless of images size or number of items.
That's why i used uniform grid as a items panel template.
But, this is the result I'm getting...
The ListView loads images in their full size and expands itself to fit them in, cutting of some of the items in the process.
This is my xaml:
<Window x:Class="WPF_UI_Testing.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:WPF_UI_Testing"
mc:Ignorable="d"
Title="MainWindow" Height="460" Width="640">
<Grid>
<ListView x:Name="listview1">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"
FontWeight="Bold" FontSize="18" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid ></UniformGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding problemImage}"/>
<TextBlock Text="{Binding ImageName}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Window>
Is there a way to prevent ListView from expanding beyond window borders when populated with content?
EDIT:
I packed the entire solution with some dummy data and images if anyone wants to have a go at this...
https://drive.google.com/file/d/1IWqxSR3kpsVdCm5Qcgn6QZbZhbYz52n2/view?usp=sharing

The UniformGrid does basically what you want. The idea to use it as item panel is also correct. The only problem that arises, aside from using item groups, is the fact that the ListView wraps its panel into a ScrollViewer, which results in items or the UniformGrid to resize differently as the ScrollViewer gives the panel no size restrictions. UniformGrid needs to be hosted in a fixed size container in order to be able to calculate its children's max sizes.
You should either use the ItemsControl
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type viewModels:DetailItem}">
<StackPanel>
<Image Source="{Binding problemImage}"/>
<TextBlock Text="{Binding ImageName}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
or override the ControlTemplate of ListView and remove the ScrollViewer (if you need its additional features of ListView):
<ListView>
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ItemsPresenter />
</Border>
</ControlTemplate>
</ListView.Template>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type viewModels:DetailItem}">
<StackPanel>
<Image Source="{Binding problemImage}"/>
<TextBlock Text="{Binding ImageName}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The limitations of this approach is when using groups to display the items. UniformGrid should handle GroupItem (nested items) not as expected.
As said in my previous comment, if you want to group items, you need to extend a panel of your choice to manually arrange GroupItem and it's children (nested ItemsPresenter). As you think about how to calculate sizes you may realizes that it is more complicated to calculate group item sizes with dynamic grouped item sizes.
I recommend to let go the grouping and use one of the above solutions or use grouping and embrace the ScrollViewer.

Is it possible to bind Children in a StackPanel and preserve vertical SnapPoints?

I have a StackPanel inside a ScrollViewer and I would like to bind items and define their datatemplate so I use a ItemsControl. The problem appears to be the ItemsControl does not implement IScrollSnapPointsInfo and this is breaking my vertical snap points associated with the StackPanel children and the ScrollViewer.
These vertical snap points should allow the items bound to the stack panel to align in the vertical center position of the scroll viewer when the user scrolls.
Bellow is some sample code:
<ScrollViewer x:Name="ScrollViewer"
ZoomMode="Disabled"
ZoomSnapPointsType="None"
VerticalSnapPointsType="Mandatory"
VerticalSnapPointsAlignment="Center">
<ScrollViewer.Content>
<Grid>
<!-- Start StackPanel -->
<StackPanel x:Name="StackPanel" Margin="0,500,0,500" Orientation="Vertical">
<StackPanel.Children>
<ItemsControl ItemsSource="{x:Bind Items, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="model:ScrollItem">
<Button Margin="8,0">
<Button.Content>
<Grid>
<TextBlock Text="Hello" Foreground="Black" FontSize="20" />
</Grid>
</Button.Content>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel.Children>
</StackPanel>
<!-- End StackPanel -->
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
Does anyone have experience with this? any advice on how I can restore the vertical snap points and still bind to the stack panel would be great.
Ideally I would like to just bind a list of items to the stack panel and define the template in xaml. This is much better than creating elements in code etc...

A ListBox inside a stackpanel doesn't work

I have these controls:
<StackPanel>
<TextBlock Text="Bill Benson"/>
<Image Source="/Assets/Images/BB.png"/>
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=""/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="ends: 2015"/>
</StackPanel>
ListBox may have any number of items inside it. I want the whole page scroll from top to bottom, but it doesn't scroll down-up. How can I do that? I know the problem is because a scrollable control inside another scrollable one, but don't know how to fix it.

You need to assign the height to the listbox control, as it is taking an auto which means that the height keeps on increasing according to the count of items in it, so its impossible to access the items in the bottom of the control, So either give it a height or instead of stackpanel keep it in a grid with row definitions.
<StackPanel>
<TextBlock Text="Bill Benson"/>
<Image Source="/Assets/Images/BB.png"/>
<ListBox Height="200">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=""/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="ends: 2015"/>
</StackPanel>

Try specifying a height for your controls, especially StackPanel and ListBox, even just an "Auto" Height could work for testing. Also, rather than setting an ItemTemplate, which would be more useful if you had a List of items to bind the ListBox to, try some hardcoded values:
<ListBox>
<TextBlock Text="1"/>
<TextBlock Text="Test"/>
<TextBlock Text="Another"/>
<TextBlock Text="testing"/>
<TextBlock Text="Sample"/>
</ListBox>
Try to add more than the ListBox can show, and see if it scrolls.

Try a dock panel instead:
<DockPanel>
<StackPanel DockPanel.Dock="Top">
<TextBlock Text="Bill Benson"/>
<Image Source="/Assets/Images/BB.png"/>
</StackPanel>
<TextBlock DockPanel.Dock="Bottom" Text="ends: 2015"/>
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=""/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
The ListBox will automatically expand to fill the space. Note: It has to be the last child in the DockPanel. (You can change this functionality using LastChildFill="False")

Text Wrap ListBox on Windows Phone 8

How can I wrap a long text in a ListBox without using of TextBlock. My code is as follows:
public Sample()
{
InitializeComponent();
quotes.Add("LooooooooooooooooooooooooooongTeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext");
myListbox.DataContext = quotes;
}
quotes is a list.
XAML:
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" HorizontalScrollBarVisibility="Disabled">
<Grid x:Name="ContentPanel" Margin="12,0,12,0" Grid.Column="1">
<ListBox x:Name="myListbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Height="600" ItemsSource="{Binding}" Margin="10,4,10,3">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</ScrollViewer>
I have also tried with WrapPanel, but doesn't work.

ItemsPanel controls how ListBox arrange ListBoxItems in certain Layout. Try to define ItemTemplate instead of ItemsPanel, ItemTemplate controls how data in each item displayed, including whether it wrapped or not. Sorry, but I am using TextBlock here, because I can't see why avoid TextBlock. Its even very likely (haven't proved this as for now) that TextBlock is the default ItemTemplate for ListBox.
<ListBox x:Name="myListbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Height="600" ItemsSource="{Binding}" Margin="10,4,10,3">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

ScrollViewer in a listbox

I´m filling a listbox with a specific data, the code works fine, but I need to add a scrollviewer to the listbox because there are many elements inside, I tried to use a ScrolViewer and put inside the listbox, but doesn't work, here is the code
<StackPanel x:Name="Sites" Grid.Row="1" Orientation="Vertical">
<ListBox x:Name="ListSites" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="120" Click="click" Name="btn">
<Button.Content>
<StackPanel Orientation="Vertical" Height="100" Width="460">
<TextBlock Width="460" Name="txtname" FontSize="22" Text="{Binding name}" Height="40" Foreground="CadetBlue" />
<TextBlock Width="460" Name="txtUrl" FontSize="22" Text="{Binding Url}" Height="60"/>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

I fixed it, simply adding the Height property in the ListBox control

If the ListBox is not given infinite space for height then it should automatically scroll when items overflow its boundaries. For instance, if the second Grid row outside your stackpanel has explicit or 'star' height set, the scrollbar in the listbox will show up automatically.
See also: Silverlight: Difficulty with ScrollViewer

You shouldn't need to add a ScrollViewer to your ListBox. It will start scrolling when it runs out of room.
However, because you've put the ListBox inside a StackPanel it won't ever think it's run out of room because the StackPanel grows infinitely in the direction of it's orientation to accommodate its contents.
You'll need to use a different container for your ListBox.

<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>