I have next XAML for main grid:
<ListView Grid.Row="1" x:Name="NewsListBox">
<ListView.Background>
<SolidColorBrush Color="#FF006C67" Opacity="0.5"/>
</ListView.Background>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
And it looks nice, how it is needed:
But it doesn't scroll the content!
Ok, i add ScrollViewer:
<ScrollViewer Grid.Row="1" VerticalScrollMode="Disabled" ZoomMode="Disabled">
<ListView Grid.Row="1" x:Name="NewsListBox">
<ListView.Background>
<SolidColorBrush Color="#FF006C67" Opacity="0.5"/>
</ListView.Background>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
And it stacks everything vertically:
What am i doing wrong?
Found a solution. No ScrollViewer is needed.
Just had to replace ListView with GridView because ListView isn't designed for horizontal scrolling.
You can try this
<ListView
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
>
Related
I am trying to have a leftheader fixed in a scrollviewer but its height is not equal to the itemspresenter. I have given the code snippet.
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled"
HorizontalSnapPointsType="Mandatory">
<ScrollViewer.LeftHeader>
<Grid Width="190" Height="1000" Background="Black"/>
</ScrollViewer.LeftHeader>
<ItemsPresenter HorizontalAlignment="Left"
VerticalAlignment="Top"/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" ItemsUpdatingScrollMode="KeepItemsInView">
</ItemsStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Grid Width="1536" Height="1000" Background="Yellow"/>
<Grid Width="1536" Height="1000" Background="Red"/>
<Grid Width="1536" Height="1000" Background="Black"/>
</ItemsControl.Items>
</ItemsControl>
You need to scroll up to see the gap.
I have tested your code and reproduce your issue. I will report this issue to the related team. Currently one workaround to fix the content of LeftHeader is that you could wrap the Grid with Canvas just like the following code .
<ScrollViewer.LeftHeader >
<Canvas>
<Grid Width="190" Height="1000" Background="Red" />
</Canvas>
</ScrollViewer.LeftHeader>
I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.
I am able to do this using a ListView like this.
<ListView ItemsSource="..."
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.ZoomMode="Disabled"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<callistoControls:WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Title}" Command="..." CommandParameter="..." />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I don't need all the features of a ListView though. I'd rather just items an ItemsControl instead of turning off all the unwanted features in the ListView by re-doing the templates/etc.
How can I achieve this with an ItemsControl?
You can do this:
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
HorizontalScrollMode="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalScrollMode="Disabled"
ZoomMode="Disabled">
<ItemsControl ItemsSource="...">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<callistoControls:WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Best of luck.
I want to override the default transtionion of miy ListView control which is bound to an observable collection. I want to use the more fluit transitions when adding / removing items to it or setting it completely new.
What am I doing wrong?
<ListView
VerticalAlignment="Top"
ItemsSource="{Binding FilteredNewsDealsList}"
ItemTemplate="{StaticResource DealItemTemplateStretch}"
ItemContainerStyle="{StaticResource ListViewItemStyleStretch}"
Grid.Row="5" Padding="40,10,25,0"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
I have also tried to do realize the transtitions in the ItemsPanel but that doesn't work either:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal">
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Thanks and best regards!
I have a GridView containing VariableSizedWrapGrid, like this...
<local:MyGridview
Padding="116,0,0,0"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.Column="1"
Grid.Row="1"
SelectionMode="None"
ItemTemplateSelector="{StaticResource templateSelector}"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Key}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" ItemWidth="1" ItemHeight="1" Margin="0,3,40,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</local:MyGridview>
Which displays items like this...
I want to make it stack items horizontally rather than vertically so that the orange tile sits next to the blue one rather than below it
I've tried changing the Orientation of the VariableSizedWrapGrid to Horizontal but this happens....
Am I doing something really silly?
Why did you set ItemWidth and ItemHeight to 1? Do you set proper ColumnSpan and RowSpan values from code? I suggest you to set ItemWidth and ItemHeight to something more big, maybe to the size of the smallest item. VariableSizedWrapGrid layout algorithm is not perfect, in my samples sometimes it places small items horizontally as you want and sometimes - not (I don't set VariableSizedWrapGrid Orientation at all).