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.

WPF ListView->GridView->StackPanel

I have a ListView that uses GridView to display some data. One of the fields contains a list with image paths. Therefore I defin a GridViewColumn and create a DataTemplate. Dis DataTemplate contains another ListView with the Images list as new DataContext. When I don't write anything in the inner StackPanel, I can see that a list of string (in the format AppName.ClassName) is displayed in left to right order.
But whenever I try to display the strings as something else, eg
<Image Source="{Binding Name}" Height="32"/>
I get an System.Windows.Markup.XamlParseException . Even with data binding I get an exception. Eg
<Image Source="Images/Camera_32xLG.png" Height="32"/>
. Any hint, what I might do wrong?
<GridViewColumn Header="Images">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding Images}" BorderThickness="0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
--> here is where I don't know what to do next
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>

Since the StackPanel is a part of ItemsPanelTemplate, you should just define it's properties and not explicitly add any children. The way to specify appearance of each item is through the ListView.ItemTemplate property:
<ListView ItemsSource="{Binding Images}" BorderThickness="0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Name}" Height="32" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Nested ListView scrolling

I am having some issues in my Windows 8.1 app regarding getting a nested ListView to scroll properly. Basically I have the following scenario:
I have a page that needs to display a list of 'packages' in a vertical ListView. Each of those packages then has 1-15 images inside of it that I would then like to display in a horizontal ListView. Basically this means I have a list of lists that I would like to display (display the main list vertically, and for each list in the vertical list, list the images horizontally).
I have this almost working, but when it comes to trying to scroll through the nested ListView of images, it is very difficult because the scroll bar/area is right below the images and most of the time you end up touching the image and "selecting" it instead. I'd like to be able to swipe to scroll but I can't seem to get that to work either.
Is there a better way to approach getting a nested horizontal listview to scroll properly? I think one of the issue may be that my touch events aren't being routed the way I want them to be.
At this point my XAML for this looks like the following:
<ScrollViewer x:Name="OuterScrollView">
<ListView x:Name="ImageRoot" Height="851" Width="656" DataContext="{StaticResource GlobalDataContext}" ItemsSource="{Binding MainImageInfo.ImagePackages}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding PackageName}"/>
<ScrollViewer>
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageBitmap}" Height="200" Width="200"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
Any feedback is appreciated.

WP Horizontal Scrolling Grid Selection

I'm trying to create a scrollable gird, in my app i have a vertical scrolling listbox with text items as shown below.
<ListBox x:Name="selectionList" Margin="49,0,11,0" Padding="20,20,0,0" SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}" Height="606" VerticalAlignment="Top" Width="420">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding SlectionTitle}" FontSize="22" Margin="0,0,0,10" FontFamily="{StaticResource hevel}" Foreground="#FF99FFFF"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So I Changed The TextBlock to this
<Border x:Name="Selection_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="198" Margin="18,24,0,5" VerticalAlignment="Center" Width="199" CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding SelectionArt}"/>
</Border.Background>
</Border>
This is fine for a single vertical scrolling list. I'm trying to get a grid that is for example permanently 4 images high and automatically wide, so if there are 4 images it shows a column of 4 if there are 8 images it shows 2 columns of 4 and so on
i have tried this example
WP7 - issues with Horizontal scrolling Listbox
but it just kept the list vertical and scrolled horizontal
any suggestions, thanks
// Solved
Thank you, i ended up having to use the example link aswel
<ListBox x:Name="AlbumList" Margin="49,0,11,0" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}" Height="748" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border x:Name="Album_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="152" Margin="18,24,0,5" VerticalAlignment="Center" CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0" Width="152">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding AlbumArt}"/>
</Border.Background>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

If you're doing WP8.1 runtime you can easily do this by changing the <ItemsPanelTemplate> to a <WrapGrid> with Orientation set to Vertical and MaximumRowsOrColumns set to 4. Like so,
See MSDN WrapGrid (they actually do an example of what you want.. but in another Orientation)
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- your data template -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you're doing this with WP8.0+ SL then it will be a tad bit harder. You will need the Windows Phone Toolkit and use a <WrapPanel> instead but you will need to Databind some values (or hardcode it...depending on how loose your ViewModel is)
<ListBox x:Name="myListBox" Height="412">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical" ItemHeight="100" ItemWidth="100"></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- your data template -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this example I hard coded each Item to be 100x100 and I hard coded the Height to be 412, thus making it have 4 items in the Vertical.
You can Databind the Height and ItemHeight and the ItemWidth if you choose to do so.

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>