We Keep Coding

UWP WrapPanel / VariableSizedGrid

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

Add an image/icon beside treenavigator items

I have a syncfusion treenavigator dropdown menu. Our client wants to add an icon per item in the first 2 drilldowned menus of the treenavigator. Given that the list of the items came from a deserialized json object, how do I map and inject the images without adding it in the json file? My colleague suggested to create an item template in code behind but I'm not sure how to do it.
P.S. Please do not put this on hold. It's hard to formulate a question if you can't fully understand what you need to ask. I'll try to answer any clarifications.
Thanks!

Please set the image paths in ViewModel only for the items you want to show images. You can try with the following code:
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:primitives="using:Syncfusion.UI.Xaml.Primitives"
<navigation:SfTreeNavigator ItemsSource={Binding NavigatorItems}>
<navigation:SfTreeNavigator.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}" x:Key="Template">
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}">
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</navigation:SfTreeNavigator.ItemTemplate>
Note: Syncfusion.SfTreeNavigator.UWP and Syncfusion.SfSharedd.UWP assemblies are required.
Regards,
Jessie

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

Adding a List of Songs to a ListBox

i am trying to make my own mediaplayer for Windows Phone 7 and for the first step, i want to display a List of all songs in my media library to select them.
As i understood the ListBox, i just have to name the texblocks like the attributes of my class, which would be "Song"
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</ListBox>
And now i think, i should handle my list of songs to the GUI and i try to do that with:
songListGUI.ItemsSource = songs;
But then i get a "InvalidOperationException" - Items collection must be empty before using ItemsSource.
I found several problems like this, and they all created a new class, to display this content. But i would like to stick with the song class, as it comes in quite handy :/
Do you know what i am doing wrong here?
edit:
i just found the solution. Don´t know exactly why, but this change in the .xaml made my da :):
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Anybody could explan this to me?

ListBox is an ItemsControl. The content of an ItemsControl maps to the Items property. So by doing this:
<ListBox>
<SomeContent/>
</ListBox>
you're setting the Items property to <SomeContent/>. Since you aren't allowed to set the Items property and the ItemsSource property you get an exception.
When you do this:
<ListBox>
<ListBox.ItemTemplate>...</ListBox.ItemTemplate>
</ListBox>
You're not setting the content you're setting an attribute of the ListBox so there's no conflict.

Add more than one item in a list view

I'm doing a program that i need to insert two items in the same line of the list view.
That's the XAML code:
<ListView Height="486" HorizontalAlignment="Left" Margin="12,12,0,0" Name="lvTimeline" VerticalAlignment="Top" Width="260">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding}" MaxHeight="48" MaxWidth="48" />
<TextBlock TextWrapping="Wrap" MaxWidth="250" Margin="2,0,2,0" Text="{Binding}" VerticalAlignment="Center" FontSize="14" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have tried infinity ways to do that, but nothing work. What can I do?

The ListView needs an ItemsSource then you bind the Path on the two items. And you can also create columns with a GridView. I like GridView because it sizes columns with headers.