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

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

many webview inside flipview winrt

I have flipview and inside flipview there is a webview. But I have a problem. If I binding too many items on this flipview my flipview get crashed. This is the xaml from my flipview
<FlipView Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Center" HorizontalContentAlignment="Center"
x:Name="BookPageContentFlipView" Tapped="OnBookPageContentFlipViewTapped"
DoubleTapped="OnBookPageContentFlipViewDoubleTapped"
ItemsSource={Binding BookPages} SelectionChanged="BookPageContentFlipViewSelectionChanged">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Webview Source={Binding Book}/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
It just a sample but actually I load from local string. So how do I can bind many items to this flipview?

Windows Store App ListView: How to use the GroupStyle?

am porting a Windows Phone App to Windows Store and trying to create a grouped ListView. There is a good article in the Dev Center and grouping the list is no problem. But there are some things I do not understand about the GroupStyle.
The example from the article uses a GroupStyleSelector that leads to the following GroupStyle:
<GroupStyle x:Key="listViewGroupStyle">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" >
<TextBlock Text='{Binding Key}' Foreground="Black" Margin="10"
Style="{StaticResource SubheaderTextBlockStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
The purpose of GroupStyle.HeaderTemplate is obvious and changes on this template can be directly observed in the running app.
But what is GroupStyle.Panel good for? The docs says:
Gets or sets a template that creates the panel used to lay out the items.
Ok, but no matter how I change ItemsPanelTemplate (BackgroundColor, Orientation, etc.), the List does not change in the running app.
Additionally there is GroupStyle.ContainerStyle which is not used in the Example. If add this to the GroupStyle this has no influece on the list in the running app as well.
So, what are GroupStyle.Panel and GroupStyle.ContainerStyle good for? How are the used correctly?

I found out that you need to set the ItemsPanel of the ListView, too. By default the ItemsStackPanel is used and that doesn't seem to allow any custom panel in a grouped ListView. When setting the ItemsPanel to a VirtualizingStackPanel, the custom panel is applied, BUT the headers are not sticky anymore. It seems that there is something broken about the current ListView/ItemsStackPanel implementation and as we do not have source access it's hard to tell what.
<ListView
ItemsSource="{Binding Source={StaticResource namesSource}}"
>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" Foreground="Yellow" FontSize="{ThemeResource HubHeaderFontSize}" Margin="6" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<controls:WrapPanel />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<ItemsWrapGrid FlowDirection="LeftToRight" Orientation="Vertical"/>-->
<VirtualizingStackPanel Orientation="Vertical"/>
<!--<ItemsStackPanel Orientation="Vertical"/>-->
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="AliceBlue" Margin="3,0">
<TextBlock Text="{Binding}" Foreground="Black" Margin="4,2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</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>