WP 8.1 bottom to top infinite scrolling - xaml

I have explored ISupportIncrementalLoading and seen MS sample and other examples for infinite scrolling behaviour.
But I want bottom to top scrolling where items are added on top on scrolling bottom to top.
Edit:I have found a workaround for this. I have rotated listview by 180 degree and datatemplate by 180 degree which helped me achieve desired functionality.
<ListView x:Name="GridViewMain" IncrementalLoadingThreshold="2" RenderTransformOrigin="0.5,0.5">
<ListView.RenderTransform>
<RotateTransform Angle="180"></RotateTransform>
</ListView.RenderTransform>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="DataTemplateGridViewMain">
<Grid HorizontalAlignment="Stretch" Background="#FF7C1A9B" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<RotateTransform Angle="180"/>
</Grid.RenderTransform>
<TextBlock HorizontalAlignment="Left" Text="{Binding}" VerticalAlignment="Center" FontSize="20" FontFamily="Tempus Sans ITC" />
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplate>
<StaticResource ResourceKey="DataTemplateGridViewMain" />
</ListView.ItemTemplate>
</ListView>
Is this solution has any perf impact or is there any alternate way to do this?

not sure if this will fit your needs, but I had to do something similar when creating a chat conversation screen, and was able to achieve this using ExtendedListView: https://www.nuget.org/packages/ExtendedListView
We load the most recent items, and use ScrollIntoView(lastMessage) to position the cursor at the bottom. Normally you would use MoreDataRequested event to get items when it scrolls to the bottom, but instead we reversed it and used the PullToRefreshRequested to simulate scrolling to the top, changing the loading template to say "loading more messages".
works pretty well for us, I hope this is helpful!

Related

Fluid Layouts in UWP

I am trying to position a button in a list view on the far right of the screen with no luck.
I have this so far,
<DataTemplate x:DataType="local:SSS">
<RelativePanel HorizontalAlignment="Stretch">
<TextBlock
x:Name="A"
Text="{x:Bind xxx}"
FontWeight="Bold"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
<TextBlock
x:Name="B"
Text="{x:Bind xxx}"
TextAlignment="Right"
RelativePanel.RightOf="A"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>
</DataTemplate>
How can I push the second text block to the far right of the screen ?
|A B|
This is a common issue with the listview. You need to coerce the items to take up the full width in they styling. Please see linked post...
Link to answer by Grace Feng
The bit you need:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

UWP Community Toolkit AdaptiveGridView control with one item only

I am making a media app with using UWP Community toolkit nuget package to use AdaptiveGridView Control, in order to show the video library contents.
Problem: When the items are very few or for example I have only 1 item it expands over the whole available width, which looks very bad, considering the fact its height is limited and doesn't changes and only width expands on whole screen, so the thumbnail of my item looks very bad. So when I have 4 or lesser items in a row (in this specific laptop resolution) they look bad due to width expansion, but more than 5 items in a row look good because they proportionate very good.
Attempt:
I tried to set max width property of stackpanel in data template of my item so that the item doesn't expand more than a specific width and it works good, but now the problem is the distance between the items, my content of item (stackpanel) remains limited but whole gridviewitem expands hence covering a lot of useless space, as show in the image below.
blue question marks show the useless space due to expansion of each item
red line box show the actual boundary of one item with expanded extra space.
Obviously the space decreases if I resize the window to smaller screen, but this is not optimal for all screen sizes.
Summary:
The default setting of adaptiveGridView (as in UWP community toolkit samples) works perfect if I have a lot of items, i.e: more than 5. But if item is one or 2 it expands all over the screen which looks bad because width becomes almost 700 at full expansion and height remains at 156 as I set it to be 156, if I remove the height of image one item will take whole screen, if there is 1 item only and that is not what I want because that will also look bad to the user (obviously).
here is my code.
gridview
<controls:AdaptiveGridView Name="SuggestionGridView"
Style="{StaticResource MainGridView}"
SelectionChanged="SelectionChanged"
ItemsSource="{x:Bind Suggestions, Mode=OneWay}">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate x:DataType="data:Video">
<StackPanel Margin="4" MaxWidth="276">
<Grid>
<Image Source="{x:Bind Thumbnail}" Style="{StaticResource GridViewImage}"/>
<Border Style="{StaticResource TimeBorder}">
<TextBlock Text="{x:Bind Duration}" Foreground="White"/>
</Border>
</Grid>
<TextBlock Text="{x:Bind Name}" Style="{StaticResource GridViewVideoName}"/>
<TextBlock Text="{x:Bind ParentName}" Style="{StaticResource GridViewParentName}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="{x:Bind Views}" Style="{StaticResource GridViewViews}"/>
<TextBlock Text="Views" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
Styles
<Style TargetType="controls:AdaptiveGridView" x:Key="MainGridView">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="OneRowModeEnabled" Value="False"/>
<Setter Property="DesiredWidth" Value="264"/>
<Setter Property="SelectionMode" Value="Single"/>
</Style>
<Style TargetType="Image" x:Key="GridViewImage">
<Setter Property="Height" Value="156"/> <!--if I remove this property then one item expands to full availble height and width and looks really bad specially with the thumbnail.-->
<Setter Property="Stretch" Value="UniformToFill"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
There's already a property that helps you in this case. Try setting StretchContentForSingleRow to False on the control.

How to take whole width of the screen when binding dynamic values in Universal windows Application

I try to populate radio buttons dynamically in Universal windows application. I already wrote VisualState for different
of screens. Now I try to populate the radio button, which are they have to take the whole width of the window. I able to set fixed width for every VisualState But I think that may not good practice and difficult to handle further.
<GridView Grid.Row="1" Height="auto" Width="auto" HorizontalAlignment="Stretch" ItemsSource="{Binding DamageLocationList}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:DamageLocations">
<Grid>
<RadioButton Style="{StaticResource ButtonRadioButtonStyle}" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" IsChecked="{Binding IsChecked, UpdateSourceTrigger=PropertyChanged}" Content="{Binding DamageLocation}" Margin="0" Click="RadioButton_Checked" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
As #Ashok Rathod said, you can try using UniformGrid as the ItemsPanel of your Grid to make your radio buttons take the whole width of your app's window.
Although UniformGrid is not exist in UWP. But we can implement it by ourselves or use a third party UniformGrid like what in WinRTXamlToolkit.
Using WinRTXamlToolkit for example, we can using
<toolkit:UniformGrid Rows="1" />
instead of
<VariableSizedWrapGrid Orientation="Horizontal" />
Here toolkit is the namespace of WinRTXamlToolkit.Controls:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
As I didn't set Columns property, it will be the default value which is 0. A value of zero (0) for the Columns property specifies that the column count is computed based on the number of rows and the number of visible child elements that are in the Grid. Since I set Rows to 1, all the items will be put in one row and have the same width.
After this, you may also need to set ItemContainerStyle to make the radio buttons stretch like:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>

WinRT stretch ListBox content when ItemsPanel is horizontal StackPanel

enter image description hereI have ListBoox
<ListBox>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Green" >
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Yellow"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I need the items of the ListBox to be stretched across the entire screen (list). It works perfectly if the StackPanel's orientation is vertical but in my case the orientation is horizontal and it doesn't work at all. Any ideas, suggestions - I need help
You can use
HorizontalAlignment="Stretch"
to stretch XAML containers like StackPanels over the entire space.

How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

I want to have the ListItems to extend with their orange background the full width of the Listbox.
Currently they are only as wide as the FirstName + LastName.
I've set every element I can to: HorizontalAlignment="Stretch".
I want the background of the ListboxItems to expand as the user stretches the Listbox so I don't want to put in absolute values.
What do I have to do so that the background color of the ListBoxItems fill the width of the ListBox?
<Window x:Class="TestListBoxSelectedItemStyle.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<local:CustomerViewModel x:Key="TheDataProvider"/>
<DataTemplate x:Key="CustomerItemTemplate">
<Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
<TextBlock HorizontalAlignment="Stretch">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} {1}">
<Binding Path="FirstName"/>
<Binding Path="LastName"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
ItemTemplate="{StaticResource CustomerItemTemplate}"/>
</Grid>
</Window>
I found another solution here, since I ran into both post...
This is from the Myles answer:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
This worked for me.
I'm sure this is a duplicate, but I can't find a question with the same answer.
Add HorizontalContentAlignment="Stretch" to your ListBox. That should do the trick. Just be careful with auto-complete because it is so easy to get HorizontalAlignment by mistake.
If your items are wider than the ListBox, the other answers here won't help: the items in the ItemTemplate remain wider than the ListBox.
The fix that worked for me was to disable the horizontal scrollbar, which, apparently, also tells the container of all those items to remain only as wide as the list box.
Hence the combined fix to get ListBox items that are as wide as the list box, whether they are smaller and need stretching, or wider and need wrapping, is as follows:
<ListBox HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
(credits for the scroll bar idea)
Since the border is used just for visual appearance, you could put it into the ListBoxItem's ControlTemplate and modify the properties there. In the ItemTemplate, you could place only the StackPanel and the TextBlock. In this way, the code also remains clean, as in the appearance of the control will be controlled via the ControlTemplate and the data to be shown will be controlled via the DataTemplate.
The fix for me was to set property HorizontalAlignment="Stretch" on ItemsPresenter inside ScrollViewer..
Hope this helps someone...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
<ItemsPresenter Height="252" HorizontalAlignment="Stretch"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
I also had the same problem, as a quick workaround, I used blend to determine how much padding was being added. In my case it was 12, so I used a negative margin to get rid of it. Now everything can now be centered properly