I have an Itemscontrol using a VirtualizingStackPanel to display a huge (and growing) list of items:
<ItemsControl Grid.Row="1" Name="ConversationItemsControl" VirtualizingStackPanel.VirtualizationMode="Recycling">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:Message />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The virtualization is working like a charm, but i cannot get the management of the scrollbar right. If I try to programmatically (e.g. on load) scroll to the bottom like i do in non-virtualized StackPanels:
var scrollViewer = VisualTreeHelper.GetChild(ConversationItemsControl, 0) as ScrollViewer;
scrollViewer.ChangeView(null, double.MaxValue, 1f, true);
the scrollviewer tries to scroll to the bottom, but does not do so completely - it always stops a bit before the "real" bottom. This makes sense in a way since VirtualizingStackPanels are using the scroll value to determine which items to render, but it is totally grinding my gears and unacceptable for end users.
How can I scroll to the "real" bottom? What do I have to do if i want to scroll exactly so far down that the top of a certain item is at the top of the viewport (unless the "real" bottom is too close, naturally)?
This is because the built-in ItemsControl class doesn't support virtualization. You can try a ListBox instead, which uses UI virtualization by default.
If you don't want to have selection behaviour, just set:
<ListBox x:Name="lbCustom">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and then something like:
lbCustom.ScrollIntoView(lbCustom.Items[lbCustom.Items.Count - 1]
Related
I coded a list that has as an Itemsource an Observable Collection, which is of type Grids. So the listview is containing 4 Items (Grids). I want the Grids to be like horizontal next to each other, so I tried this in Xaml.
<StackPanel Orientation="Horizontal">
<ListView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" ItemsSource="{Binding DropGrids, Source={StaticResource view}}" Height="100" x:Name="DropList" RenderTransformOrigin="0.5,0.5" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<AppBarButton Icon="MapPin" Label="Go!" HorizontalAlignment="Right"></AppBarButton>
</StackPanel>
But when I try scrolling the list to the left it is instantly going back (If you want to simulate is use WGA resolution 4 Inch Emulator) and I can't see the fourth Grid on the screen. How do I fix this?
The ListView.ItemsPanel property I got from this post:
Stackoverflow Post - Horizontal Mode
Not sure on the Grid part in your ListView itemsource, but I blogged about how to create a Horizontal ListView here
http://depblog.weblogs.us/2015/03/25/show-items-scrolling-horizontally-with-listview-in-winrt/
I hope this helps...
The complete style is set as
<Style x:Name="BaseListViewStyle" TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
I have to create custom list box the same as on the picture.
I've created UpDown control for each item in list box. But I need to have two columns in list box if will be many items. If it will be two columns, they must be separated as on the picture and each of the column should have border with round corners.
Code for list box is below:
<Style TargetType="{x:Type ListBox}" x:Key="ListBoxService">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type model:Service}">
<Border
x:Name="border"
VerticalAlignment="Center"
BorderThickness="0, 0, 0, 2"
BorderBrush="{StaticResource CommonBackgroundColor}">
<view:ServiceUpDown/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="2" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
Thanks for any help.
Not a solution for your exact problem, but maybe this can get you started:
<ListBox
ItemsSource="{Binding Items}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin"
Value="0 0 20 0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I have set the ListBox' ItemsPanel to a vertical oriented WrapPanel, so once it filled up one "column" in the ListBox it will just wrap into another column.
I have disabled the vertical scrollbar of the ListBoxsince otherwise it would have infinite vertical space, thus the WrapPanelwould never wrap.
This example will wrap the items into additional columns, once all the vertical space of the ListBox has been used. Depending of the vertical size of your listbox and the amount of items there might also be a third or fourth column, when required. You can use the ItemContainerStyle to separate the columns, though this does not resolve the requirement of the rounded borders.
I'm trying to make a Windows Phone page with 2 columns, where the columns fill all of their space to make rectangular buttons similar to the Windows Phone menu. Surprisingly, this is trickier than expected. I have the layout working, and the 2 columns, however, they are small rectangles, not filling their width or height.
I don't want to use any "Width = 250" or whatever. I'm purely interested in a responsive layout solution. My current code is below. I've been here for about 2 days now...
<ListView
Grid.Row="1"
ItemsSource="{Binding Locations}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="12">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="12"
BorderThickness="0">
<Button.Template>
<ControlTemplate>
<StackPanel Background="{ThemeResource PhoneAccentBrush}">
<Image />
<TextBlock
TextAlignment="Center"
Text="{Binding Name}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here's a screenshot of what it currently looks like. As you can see, the buttons have a massive margin that is not actually given by me...
http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b
As you say it looks like you do have two columns in your picture. I'm also seeing from your markup that you have 12 pixels margin on your list and 12 pixels margin on your buttons. That means that you're going to have at least 24 pixels of margin between all your UI elements. Looking at the picture I'm seeing closer to 60 pixels between UI elements. We should break this down further to see where the extra size is coming from.
For debugging purposes can you please add a temporary background color to your ListView and a different background color to your DataTemplate item's StackPanel. Then take a new screenshot and see what elements are consuming all the space. I bet it's the ListViewItem. You might want modify the ItemContainerStyle to remove any built in non-visible UI elements taking up space.
I'm trying to databind a Dockpanel in wpf to a viewmodel collection. I'm using this in order to create a customizable form and so I will not know how many children should be in the dockpanel until runtime.
The problem that I am having is that the attached property DockStyle.Dock doesn't seem to be getting applied when I set it from within a data template. The following xaml is a simplified version of what I am doing. I would expect the first button to fill up the top portion of the screen but what really happens is that they are stacked horizontally. Even hardcoding the DockPanel.Dock property has no effect on the layout of the buttons. When I look at the Visual Tree in XAMLPad I notice that there are ContentPresenters as children of the DockPanel instead of the buttons. Do ContentPresenters get layed out differently then other elements? Is there another technique to databinding to DockPanels?
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<ItemsControl >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel LastChildFill="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button DockPanel.Dock="{Binding}" Content="{Binding}"></Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<sys:String>Top</sys:String>
<sys:String>Bottom</sys:String>
<sys:String>Left</sys:String>
<sys:String>Right</sys:String>
<sys:String>Top</sys:String>
<sys:String>Top</sys:String>
<sys:String>Top</sys:String>
</ItemsControl>
</Grid></Page>
The reason that the items aren't docked is because the control in the DataTemplate is not a direct child of the DockPanel. I believe that the ItemsControl creates one ContentPresenter for each item, just like how a ListBox creates one ListBoxItem for each item.
You could try using the ItemContainerStyle to dock the controls. I think that any properties set on it should be set on the ContentPresenter. Something like this might work:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="DockPanel.Dock" Value="{Binding}" />
</Style>
</ItemsControl.ItemContainerStyle>
...
</ItemsControl>
I'm not sure if binding a string to the Dock property will work or not, though. You might try using the values in the enum directly to see if that helps as well.
This is because your Button is wrapped by ItemsControl in ContentPresenter which does not have DockPanel.Dock set. Try setting ItemContainerStyle to something like this:
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="DockPanel.Dock" Value="{Binding}"/>
</Style>
</ItemsControl.ItemContainerStyle>
I have a CustomControl (say CC) that has been inherited from ContentControl and contains a ScrollViewer which includes a ContentPresenter. When I put a ListBox into the CC it works without any problem. But when I set the ItemsPanelTemplate of the ListBox it doesn't notify CC to scroll into the ListBox selected item.
What's the reason for it? -Thanks
UPDATE:
I'll encounter the problem described above only if I set HorizontalScrollBarVisibility or VerticalScrollBarVisibility to Hidden and customize the ItemsPanelTemplate of the ListBox simultaneously. (I need to hide scollbars.)
I wonder if hiding Scrollbars prevents ScrollViewer contents from notifying it to bring selected item into view, why this issue doesn't happen when I don't change items panel???
Generic.xaml:
<ResourceDictionary ...>
<Style TargetType="{x:Type local:CustomControl1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl1}">
<Border ...>
<ScrollViewer ...
CanContentScroll="True"
HorizontalScrollBarVisibility="Hidden" « PROBLEM
VerticalScrollBarVisibility="Hidden"> «
<ContentPresenter Content="{TemplateBinding Content}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.xaml:
<Window x:Class="MyNamespace1.MainWindow"
...
xmlns:proj="clr-namespace:MyNamespace0;assembly=...">
<Grid>
<proj:CustomControl1 x:Name="CC">
<ListBox>
<ListBox.ItemsPanel> «
<ItemsPanelTemplate> «
<StackPanel Orientation="Horizontal"/> « PROBLEM
</ItemsPanelTemplate> «
</ListBox.ItemsPanel> «
<!--content goes here-->
</ListBox>
</proj:CustomControl1>
</Grid>
</Window>
Have you set the IsItemsHost property for the Panel in the ItemsPanelTemplate to True?
E.g. if the itemspaneltemplate should use a Canvas:
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" />
</ItemsPanelTemplate>
Related
StackPanel treats its content has having infinite space..
You will have to limit its size explicitly, or change it to other panel, Grid for example.
Try this:
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
Or:
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Width="100" Height="100"/>
</ItemsPanelTemplate>