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>
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 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
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?
I'm trying to create an app with simple settings, with list boxes, etc.
I'm using C# and XAML.
I'm trying to implement something similar to the Camera app's photo settings settings panel.
Does anyone have any idea how to do this?
(I've tried Stackpanel - Scrollviewer - Stackpanel - content, however, couldn't get any transition)
You can try with ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>