We Keep Coding

Horizontal list of images from ObservableCollection

I like to show images from ObservableCollection in horizontal scroll list like in Windows Store but i would scroll it horizontaly like in FlipView with all images being visible. I have something like that at this moment:
<FlipView x:Name="MasterListView" ItemsSource="{x:Bind PopularTVSeries}"
Grid.Row="1" Margin="10,10,10,0" Height="278">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="data:PopularTVSeries">
<Image Source="{x:Bind poster_path}" Width="185" Height="278"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>

There are controls to do it.
Method 1:
Using Carousel XAML Control by UWPCommunityToolkit. Install Microsoft.Toolkit.Uwp.UI.Controls nuget package to use it.
Here is the syntax
<controls:Carousel x:Name="CarouselControl" InvertPositive="0"
ItemDepth="0" ItemMargin="0"
ItemRotationX="0" ItemRotationY="0"
ItemRotationZ="0" Orientation="Horizontal">
<controls:Carousel.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
For more info download UWP Community Toolkit Sample App
Method 2:
Using Carousel Control by AppStudio. Install WindowsAppStudio.Uwp nuget package to use it.
Here is the syntax
<controls:Carousel MaxItems="5" MinHeight="240"
MaxHeight="480" GradientOpacity="0.3">
<controls:Carousel.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
For more info download Windows App Studio Sample App
Method 3:
Using GridView
<GridView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled">
<GridView.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

Final working code:
<controls:Carousel
ItemsSource="{x:Bind popularTVSeries}"
x:Name="MasterListView"
InvertPositive="True"
ItemDepth="153"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="29"
ItemRotationZ ="0"
Orientation="Horizontal"
SelectedIndex="3"
Grid.Row="1">
<controls:Carousel.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</controls:Carousel.EasingFunction>
<controls:Carousel.ItemTemplate>
<DataTemplate x:DataType="data:PopularTVSeries">
<Image
Width="185"
Height="278"
VerticalAlignment="Bottom"
Source="{x:Bind poster_path}"
Stretch="Uniform" />
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>

How to display listbox items in column view in WPF c#

Am using listbox control in WPF its display listbox item in row wise but I want to display in column wise ( Something like bootstrap grid)
XMAL
<ListBox x:Name="lb_items">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10 0 0 0">
<Image Source="{Binding ImageSource}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Am binding Listbox from code behind
lb_items.ItemsSource = modules.ToList();

Try this one.
<ListBox x:Name="lb_items">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10 0 0 0">
<Image Source="{Binding ImageSource}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

ListBox has property called ItemsPanel, which determines how items are rendered.
Somewhere in application resource create different ItemsPanelTemplate, so you can easily reuse it:
<ItemsPanelTemplate x:Key="WrapPanelTemplate">
<WrapPanel />
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="HorizontalStackPanelTemplate">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
then you can easily use it:
<ListBox ItemsPanel="{StaticResource HorizontalStackPanelTemplate}">...
<ItemControl ItemsPanel="{StaticResource WrapPanelTemplate}">...
always put such assets into application resources in order to make the code for your views clean and readable.
Extra Tip:
Here is animated WrapPanel, that animates items, when you resize window or an item is inserted to the list:
<ItemsPanelTemplate x:Key="FluidWrapPanel">
<WrapPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.5">
<ei:FluidMoveBehavior.EaseY>
<SineEase EasingMode="EaseInOut" />
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<CubicEase EasingMode="EaseInOut" />
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</WrapPanel>
</ItemsPanelTemplate>
dont forget to include these xml namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

ScrollView not working in Windows 10

I have a ViewModel with about 200 contacts and I am binding it to a ListView
<Grid>
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Would be great if someone could explain the details behind the ScrollViewers visibility

A ListView control already contains a ScrollViewer and implements scrolling based on the amount of items, there is no need to wrap this control in another ScrollViewer. You can double check this in the default ControlTemplate of ListView at line 6219 in the generic.xaml file containing all Windows 10 styles:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
So you simply have to remove the ScrollViewer from your XAML fragment.
<Grid>
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Note: As you're using a ListView, I suppose you want all your items stacked above each other. If you want multiple columns to show your items, use a GridView instead.

Listview in WinRT using C#

I want my ListView to display the items in a group horizontally as displayed in the image below. I could not find anything relating to this online. This screen was taken from the Groove music application. Since I am new to asking questions here it seems I don't have enough reputation to post images therefore I provided a link to the image in question sorry for the inconvenience.
http://i.imgur.com/boCK9iy.png
Edit:
I am trying to imitate the groove music player for a school project this link below shows my app. Hopefully this give you a better idea of the problem.
http://i.imgur.com/vPJ13Sc.png
My Xaml Code:
<ListView
x:Name="itemGridView"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource artistsItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
RequestedTheme="Light">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel MaxWidth="200">
<Ellipse Height="150" Width="150">
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="Assets/Artist.png"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="{Binding ArtistName}" FontSize="18" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding AlbumCount}" FontSize="15" HorizontalAlignment="Center" Margin="0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Width="200" HorizontalAlignment="Left" Margin="30,0,0,0"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Text="{Binding AlphaLetter}" FontSize="20" Foreground="{StaticResource SideButtonBlue}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>

I think you can change the view in the listview settings to LargeIcon and then you can set Icons for each value in your listview.
But you could maybe use the ObjectListView its better than the plain ListView and you have more functions. check this out: click
I found something similar on the site of the objectlistview: here

for horizontal placement of the elements in ListView do this:
<ItemsStackPanel
Orientation="Horizontal" />
also, remove Width="200"
also you can use GridView instead of ListView

Customize Panorama List in Windows Phone 8 Xaml

Customize Panorama List in Windows Phone 8 Xaml
I am developing windows phone 8 book reader application. I am using panorama list to load pages. Because of its default style panorama shows part of another page in the same view.I need to show single page in single view and it should fit.Any help?

You can Pivot control. It shows one view on one page.

I think it is not possible in panorama control but you can use horizontal list
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<tolkit:GestureService.GestureListener>
<tolkit:GestureListener Flick="GestureListener_Flick"></tolkit:GestureListener>
</tolkit:GestureService.GestureListener>
<ListBox Name="lstMyList" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" SelectionChanged="lstlstMyList_SelectionChanged_1">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Height="480" Width="500" Margin="-25,30,0,0" Source="{Binding Image}"/>
<TextBlock Name="txbMainHeading" Text="{Binding Message}" Margin="80,10,0,0" FontSize="26" FontWeight="Medium" Foreground="#cc6600"></TextBlock>
<TextBlock Text="{Binding Description}" Margin="60,0,0,0" FontSize="18" Foreground="Black" TextWrapping="Wrap" Width="350"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>