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
Related
i'm currently on some design issues. I need a WrapPanel which contains multiple Expander which should fit corretly as i the image shown.
So if the user opens one, some commands should appear. (can be 3 up to 10 commands.) i think a scrollview starting with 5 items should fit best)
Currently i didn't get it to work. If i toggle the first box, each box is toggled.
And if i toggle another box, it takes also the complete height.
And here the Image, if the first box is closed.
I think i need multiple Controls for this.
First is the Expander-Menu and second the VariableSizedWrapGrid. But both together doesn't work, as expected. here my current code.
<controls:DockPanel Grid.Row="1" Grid.Column="1" Background="#efefef" >
<GridView x:Name="CommandList" controls:DockPanel.Dock="Top" Margin="15" SelectionMode="None" VerticalContentAlignment="Top" >
<GridView.ItemTemplate>
<DataTemplate>
<controls:WrapPanel Name="VerticalWrapPanel" Margin="2"
VerticalSpacing="10" HorizontalSpacing="10" Orientation="Vertical">
<controls:Expander Style="{StaticResource ExpanderStyleCheckBox}" VerticalAlignment="Top" Margin="20,20,0,20" VerticalContentAlignment="Top"
IsExpanded="True" Width="500"
ExpandDirection="Down" Background="White" Tapped="Expander1_Tapped" VariableSizedWrapGrid.RowSpan="{Binding RowSpan}" >
<controls:Expander.Content>
<ListView ItemsSource="{Binding Phrases}" Margin="30,0,0,0" Background="#efefef" SelectionMode="None">
<DataTemplate>
<TextBlock TextWrapping="WrapWholeWords" VerticalAlignment="Center" />
</DataTemplate>
</ListView>
</controls:Expander.Content>
<controls:Expander.Header>
<TextBlock Margin="10" HorizontalAlignment="Left" FontSize="18" TextWrapping="WrapWholeWords" VerticalAlignment="Center">
<Run Text="{Binding Heading}" />
</TextBlock>
</controls:Expander.Header>
</controls:Expander>
</controls:WrapPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="20" ItemWidth="530" VerticalAlignment="Top" VerticalChildrenAlignment="Top"
Orientation="Horizontal" MaximumRowsOrColumns="5" >
</VariableSizedWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</controls:DockPanel>
If someone could help me, this would be great.
Thanks and have a nice weekend.
Christian
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>
I'm using ListBox to list a group of items and i want the user to select multiple items from the list. I tried it with the following code,
<ListBox x:Name="List" SelectionMode="Multiple" HorizontalAlignment="Left" Height="559" Margin="14,1,-1,0" VerticalAlignment="Top" Width="443" SelectionChanged="List_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="420" Height="60">
<TextBlock x:Name="tbName" Width="318" Foreground="{Binding color}" Height="35" FontSize="22" Text="{Binding Name}" Margin="-350,13,69,12" />
<Canvas x:Name="ContentPanelCanvas" Grid.Row="1" Background="Transparent" Margin="0,0,12,0">
<Line X1="0" Y1="00" X2="420" Y2="0" Stroke="Gray" StrokeThickness="0.3"/>
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But still i didn't get a checkbox to select multiple items.
What is the problem?
I think it will be better if you use LongListMultiSelector from Windows Phone Toolkit
You can find code samples here. Also take a look of this question.
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>
I'm currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:
the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.
currently I'm using this XAML-Code
<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
and this Code in the Back:
ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;
but I have currently no clue how to let the last element show up in a different style
The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
<DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
...Different View...
</DataTemplate>
</Window.Resources>
<GridView...
Use template selector property of gridview and depending upon the type of object select the template. I did the same in my project. you need to write your own DataTemplateSelector.
I referred below link
http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/