Fixed pivot header item? - windows-phone-8

I use pivot create menu (with 4 item). I want FIXED header 4 item (not move) and change image item header when I move item (same menu facebook on wp8)
This is my code
{<phone:Pivot Height="758" VerticalAlignment="Bottom" Loaded="Pivot_Loaded_2" UnloadedPivotItem="Pivot_UnloadedPivotItem">
<phone:Pivot.Background>
<ImageBrush Stretch="Fill" ImageSource="bg_login_popup_head.png"/>
</phone:Pivot.Background>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}" Height="83" Width="94" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<!--Pivot item one-->
<phone:PivotItem x:Name="item1" Header = "/Resources/Icon/ic_home_actionbar_red.png" Margin="0,10,0,0" Foreground="#FF19DE84">
<phone:PivotItem.Background>
<ImageBrush Stretch="Fill" ImageSource="background.png"/>
</phone:PivotItem.Background>
<TextBlock HorizontalAlignment="Left" Height="157" TextWrapping="Wrap" VerticalAlignment="Top" Width="337" Margin="61,422,0,0" FontSize="50" Text="Đoi mih mot chut nhe" Foreground="#FFD68F8B"/>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="/Resources/Icon/ic_love_actionbar_red.png" Margin="0,10,0,-37" >
<phone:PivotItem.Background>
<ImageBrush Stretch="Fill" ImageSource="background.png"/>
</phone:PivotItem.Background>
</phone:PivotItem>
<phone:PivotItem Header="/Resources/Icon/ic_profile_actionbar_red.png" Margin="0,28,0,0">
<phone:PivotItem.Background>
<ImageBrush Stretch="Fill" ImageSource="background.png"/>
</phone:PivotItem.Background>
}
Thanks!

Hope this is what you're looking for?
Tabbed interface with Pivot animation for Windows Phone

Related

WebView in FlipViewItem - WebView does not accept any gestures

I've put a WebView inside of a FlipViewItem. The problem seems to be that in WP 8.1, the WebView does not get the gestures (presumably because they're absorbed by the FlipView). The desired result is to be able to scroll vertically and tap in the WebView but also to be able scroll horizontally for the FlipView (even if just in a limited area on the horizontal edges). Is there any solution or workaround for this?
<StackPanel>
<StackPanel Name="postTitle" Background="Transparent">
<TextBlock Name="ContentArea" Text="" FontSize="18" Margin="10, 5, 10, 0" TextWrapping="WrapWholeWords" FontWeight="Bold" Foreground="White"/>
<TextBlock Name="SubArea" Text="" FontSize="16" Margin="10, 0, 10, 10" TextWrapping="WrapWholeWords" Foreground="White"/>
</StackPanel>
<FlipView Name="swipeArea" Height="460" Margin="0" Padding="0" SelectedIndex="1" SelectionChanged="swipeArea_SelectionChanged">
<FlipViewItem Name="oneItem">
</FlipViewItem>
<FlipViewItem Name="mainFlipViewItem">
<Grid>
<ProgressRing Name="progRing" Foreground="White" Margin="0,25,0,0" Background="Transparent" Visibility="Collapsed" VerticalAlignment="Top"/>
<WebView Name="InterWindow" Height="460" Visibility="Collapsed" DefaultBackgroundColor="#5E5E5E"></WebView>
<ScrollViewer Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="8" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Name="WebWindow" Height="420" HorizontalAlignment="Center" VerticalAlignment="Top">
</Image>
</ScrollViewer>
</Grid>
</FlipViewItem>
<FlipViewItem Name="threeItem">
</FlipViewItem>
</FlipView>
</StackPanel>
I believe I just found one workaround. I've added this to the WebView control:
Canvas.ZIndex="1000"
I can then set the width of the WebView control to something just slimmer than the FlipView itself, and then I should be good.

Adding image to title of Pivot page and handling touch

I am trying to add image next to pivot control title and I want to be able to touch it. But I can't and I guess it's because pivot is handling touches. This is my code:
<Grid Margin="162,22,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
Tap="MessagesIcon_OnTap">
<Image Source="/Assets/Images/Icons/messages_icon.png"
x:Name="MessagesIcon"
Stretch="Fill" Opacity="1" Width="20" Height="22"
Tap="MessagesIcon_OnTap"/>
</Grid>
<phone:Pivot x:Name="PlayerPivot" Title="TITLE" >
<!--Pivot item one-->
<phone:PivotItem Margin="0" x:Name="PlayingPivotItem">
<phone:PivotItem.Header>
<TextBlock Text="subtitle" />
</phone:PivotItem.Header>
<Grid x:Name="ContentPanel">
...
As you can see I tried catch tap on both (grid which contains image and image it self) but it isn't call. What is the easiest way to get tap gesture on image? Thanks
Give a try using this snippet:
<controls:Pivot.Title>
<StackPanel>
<TextBlock Text="title" />
<Image Source="/Images/anyimage.png"/>
</StackPanel>
</controls:Pivot.Title>

how to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8

I have a Images page images are loading from my random urls into my ListBox, I have ApplicationBar in this page and i have created two buttons one for library page show in grid format and Second for library page in list format, by default my Library View in Grid format now i want to show its view in the list format by clicking a button from the application bar.
I have tried the converters to convert the orientation of my ListBox's stackPanel but not worked.
I have tried the change the orientation by fetching the x:Name property of the ListBox but not worked.
i searched on google by putting following query but not found proper solution.
"How to Switch ListBox DataTemplate orientation between Vertical and Horizontal on buttonClick from Appbar in windows phone 8"
I am showing my ListBoxPage.xaml.
<ListBox Name="listCloudBooks" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tools:WrapPanel Orientation="Horizontal">
</tools:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgBookImage" Source="{Binding CLover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="80" Height="100"/>
<StackPanel Orientation="Horizontal">
<TextBlock Visibility="{Binding IsVisible}" Text="{Binding prgo}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding FName}" FontFamily="Segoe UI" FontSize="13.5"
Foreground="White" TextTrimming="WordEllipsis"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<TextBlock Text="{Binding LName}" FontSize="13.5" FontFamily="Segoe UI"
Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Left"
TextWrapping="Wrap"
Width="300" Padding="2"/>
<ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center" Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}" CharacterSpacing="2"/>
<Button Content="Hello" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton,
Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5"
FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White">
</Button>
<Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
<Button x:Name="btnDeleteBook" Click="btnDeleteBook_Click"
Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0"
Height="55" Width="55"
<Button.Background>
<ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you have any idea how can we do that than please let me know.
I have found the alternate solution of it, what i am doing i have created two ListBox with different Name Property and made the visibility="Collapsed" and Orientation="Horizontal". And in second ListBox i created with different Name and Visibility Property="Visible" and assigned the orientation="Vertical".
So on btnList i am playing with Visibility only.

WP8 Progress Bar Not Rendering

I have placed a Progress Bar control within my MainPage.xaml. The application type is Pivot.
For some reason, the Progress Bar and a TextBlock which I have placed within a PivotItem and below a Grid are not showing. There is a LongListSelector directly beneath these two controls. Are these two controls not showing because of that? I used the UI to drag the LongListSelector beneath then anyway, so I'm not sure why it's not showing.
This is the XAML:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" Margin="0,0,0,579"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" Margin="0,24,0,541" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0">
<phone:LongListSelector.ItemTemplate>
...
...
...
As you can see, there is a ProgressBar and a TextBlock above the LongListSelector who are also inside the Grid control.
Any ideas why these two controls are not showing?
I think you have something wrong with Margin or item positioning. I've tested code below and it works:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" VerticalAlignment="Center" Margin="0"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black"
HorizontalAlignment="Center" Text="Something"/>
</StackPanel>
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
Remove margin of all child element of StackPanel. This will defiantly helps you.
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
</StackPanel>
</Grid>
</phone:PivotItem>
</<phone:Pivot>
Hardcoding control's position (especially by dragging controls in designer) is not a good practice. Try to define rows for your Grid, then specify Grid.Row for controls inside the Grid. With that you can arrange Grid content more neatly. Check this link for more sample and explanation about layouting controls inside Grid. Following is an example for your situation :
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" />
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
</StackPanel>
<phone:LongListSelector Grid.Row="1" Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
...
...

WP8: Is it possible to programmatically move within Spanning PanoramaItem ( where Orientation="Horizontal")

I have a Spanning Panorama Item (ie, it's orientation is set to 'horizontal' in Windowsphone 8.
Users are able to swipe and see the remaining of the panorama at right. I want to mimic this feature through code.
ie, when i click a button at the extreme left I need visible area to move on to the right most end (just like i swipe). how can this be done through code?
<phone:PanoramaItem x:Name="itemOne" Header="a long itemmmmmmmmmmmmmmm" Width="998" Orientation="Horizontal">
<StackPanel>
<StackPanel HorizontalAlignment="Left" Height="263" Margin="41,0,0,0" VerticalAlignment="Top" Width="855" Orientation="Horizontal">
<TextBox Height="238" Margin="0,24,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="384"/>
<TextBox x:Name="txt2" Height="189" Margin="0,36,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="394" TextChanged="TextBox_TextChanged_1"/>
<Button x:Name="btnend">dddd</Button>
</StackPanel>
<StackPanel>
<CheckBox Margin="0,0,654,0">
click me if u need
</CheckBox>
<TextBox x:Name="txt1" Margin="0,0,516,0" Text="hello"> </TextBox>
<Button Margin="0,0,742,0" Click="Button_Click_1">
hello test
</Button>
</StackPanel>
</StackPanel>
</phone:PanoramaItem>