I have adding parallax background to Pivot control. I think need use PanningBackgroundLayer from Panorama.
Any ideas?
Are you strictly required to use a Pivot? Panoramas can be styled to work like Pivots, if you modify your margins accordingly. That way you have the parallax effects of a Panorama in a layout that looks like a Pivot.
<Grid x:Name="LayoutRoot">
<phone:Panorama>
<phone:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
<Label Content="MY APPLICATION" Width="180" Margin="10,40,0,0"/>
</StackPanel>
</DataTemplate>
</phone:Panorama.TitleTemplate>
<phone:PanoramaItem x:Name="PanoramaItem_1" Margin="0,0,0,32">
<phone:LongListSelector>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<!--Your Data Here-->
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<phone:PanoramaItem x:Name="PanoramaItem_2" Margin="0,0,0,32">
<phone:LongListSelector>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<!--Your Data Here-->
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
Related
am new in UWP and need to do a navigation drawer using SplitView, so my basic layout structure is mentioned below. The problem is that I don't have vertical scroll for list items, maybe I miss some params, any help is appreciated.
<SplitView
x:Name="MySplitView"
DisplayMode="CompactOverlay"
IsPaneOpen="True"
CompactPaneLength="50"
OpenPaneLength="280">
<!--navigation drawer-->
<SplitView.Pane>
<StackPanel
Background="Gray">
<StackPanel>
<ListView
x:Name="DrawerListOptions"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</StackPanel>
</SplitView.Pane>
<!--page stuff-->
<SplitView.Content>
<!--page code-->
</SplitView.Content>
</SplitView>
At first, change StackPanel to Grid
<SplitView x:Name="MySplitView"
PaneBackground="Gray"
DisplayMode="CompactOverlay"
IsPaneOpen="True"
CompactPaneLength="50"
OpenPaneLength="280">
<!--navigation drawer-->
<SplitView.Pane>
<Grid>
<ListView x:Name="DrawerListOptions"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
<!--page stuff-->
<SplitView.Content>
<!--page code-->
</SplitView.Content>
</SplitView>
If this does not help try to setup ScrollViewer.VerticalScrollBarVisibility="Visible"
UPDATE
If you want to place some elements above ListView use Grid.RowDefinitions
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel>
<!--Other elements-->
</StackPanel>
<ListView x:Name="DrawerListOptions"
Grid.Row="1"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
How it works:
StackPanel has already a scrollviewer. Just set height in the listView and the scroller will come up. Without height listview doesn't understand that it goes at of the screen. This way you won't need to use a Grid. It worked for me!
I currently have a Pivot with 3 grids and a ScrollViewer with the same grids. As any software engineer would do, I would like to just have the code once, instead of twice. So my question is: How do I do this?
Got the solution: I put my three grids in three seperate DataTemplates and reference to those templates from within the Pivot and from within the ScrollViewer:
<Page.Resources>
...
<DataTemplate x:Key="JustANormalGridNr1">
<Grid />
</DataTemplate>
<DataTemplate x:Key="JustANormalGridNr2">
<Grid />
</DataTemplate>
<DataTemplate x:Key="JustANormalGridNr3">
<Grid />
</DataTemplate>
</Page.Resources>
<Grid x:Name="MasterGrid">
<Pivot>
<Pivot.Items>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr1}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr2}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
<PivotItem>
...
<Grid>
<ContentControl ContentTemplate="{StaticResource JustANormalGridNr3}" /><!--instead of the grid, a reference to it -->
</Grid>
</PivotItem>
</Pivot.Items>
</Pivot>
<ScrollViewer>
<Grid>
<Grid>
...
<Grid Grid.Column="0">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr1}" /><!-- Instead of the grid, a reference to it -->
</Grid>
<Grid Grid.Column="1">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr2}" /><!-- Instead of the grid, a reference to it -->
</Grid>
<Grid Grid.Column="2">
...
<ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr3}" /><!-- Instead of the grid, a reference to it -->
</Grid>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
I need a pivot page that in every pivot page there is a longlistselector to list the data...
this is the code that i write when i create a simple pivot page
<phone:PivotItem Header="all">
<phone:LongListSelector Name="AllNotes"
Background="Black"
Margin="0,0,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Background="White"
Margin="0,17,0,0">
<TextBlock Text="aaaa">
</TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
but there isn't anything in the pivot item
i mean by defining a data template and then a stackpanel, there is nothing shown in the pivot item
can you help me ti figure out whats happening exactly?
here is my binding code
<phone:Pivot Title="MY NOTEPAD"
Background="DarkCyan">
<!-- All Notes -->
<phone:PivotItem Header="all">
<phone:LongListSelector Name="FirstListBox"
ItemsSource="{Binding AllNotes}"
Background="Black"
Margin="0,0,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,17,0,0">
<TextBlock Text="{Binding Title}"
TextWrapping="Wrap"/>
<TextBlock Text="{Binding Memory}"
TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
now what you think about it?
I finally solve this problem in the way that I don't believe it!
The answer is that we have to start writing the application in the base of Pivot Application !!!
That I don't believe this in the first place!
But Thank You Anyway :)
I need to reduce the header text item1 in pivot page. But, i dunno how to do. Is there anyway to reduce this font size ?
XAML Code;
<phone:PivotItem Header="item1">
<Grid/>
</phone:PivotItem>
You can change HeaderTemplate. Smth like this:
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" FontSize="40" />
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
You cannot change the font size in PivotItem. Instead you can create a Template where you can add a TextBlock and consider it as a header. Please find the sample here.
<controls:Pivot Title="whatever" Name="pivot">
<controls:PivotItem Margin="11,28,13,0" >
<controls:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</controls:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</controls:Pivot>
On Windows Phone 8 remember to change the 'controls' to 'phone'.
<phone:Pivot Title="whatever" Name="pivot">
<phone:PivotItem Margin="11,28,13,0" >
<phone:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</phone:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</phone:Pivot>
I am working on a phone project which requires a pivot page.
I need to change the foreground and fontsize of PivotItem Headers. nothing changes when I tried to code them in xaml
<phone:PivotItem Header="item1" Foreground="black" fontsize="25" >
do I have to use style for them?
You need to change the HeaderTemplate
For example like this:
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="0">
<TextBlock FontSize="25" Margin="0" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:PivotItem Header="item1">
</controls:PivotItem>
you can try like this ..
in this i have shown how to make a header of one item you can do this for rest of the others
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem >
<phone:PivotItem.Header>
<StackPanel Background="#132d63" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="hhaha" FontSize="35" Foreground="White" Padding="10,10,10,10" />
</StackPanel>
</phone:PivotItem.Header>
</phone:PivotItem>
</phone:Pivot>