How to implement tab view in windows phone 8 - windows-phone-7

In my windows application, I want to implement tab view like android tab view.
For reference please see the below image.
How should I Implement that in Windows phone 7 or 8.
I'm looking forward for your reply.
Thanks in Advance.

By default, the Windows Phone 7 SDK doesn't have a TabControl. It is a quite useful component already available in Silverlight and although it doesn't quite follow the Metro style.
Using the TabControl on Windows Phone 7 gives you better idea. Here is good example using tab control in wp7
<ListBox x:Name="lstBoxRss" SelectionChanged="lstBoxRss_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,5">
<TextBlock x:Name="txtblkLink" Text="{Binding Title}" Foreground="Blue" TextDecorations="Underline" TextWrapping="Wrap" Tap="txtblkLink_Tap" />
<TextBlock Text="{Binding PubDate}" Foreground="Red"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Foreground="Black"/>
<Button x:Name="btnOne" Content="ButtonOne" Click="btnOne_Click_1"/>
<Button x:Name="btnTwo" Content="Button Two" Click="btnTwo_Click_1"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
//Code behind
private void lstBoxRss_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
//Listbox selection change
// do your work
if(lstBoxRss.SelectedIndex==-1)
return;
}
private void btnOne_Click_1(object sender, RoutedEventArgs e)
{
//First button click
//Do your work
}
private void btnTwo_Click_1(object sender, RoutedEventArgs e)
{
//button two click
//Do your work
}

There is no TabControl in the Windows Phone SDK 8. The closest equivalent is a Pivot control. You can put a row of clickable text or icons at the top of a Pivot and make it operate like a tab bar.
http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/1baf74fa-0ddd-4226-a02d-a7fc9f80374d
Pivot control instead of a TabControl for the WindowsPhone. the Pivot control follows the design guidelines for the phone and looks and feels much better.
For Windows phone 7 visit this Link:
http://developer.nokia.com/community/wiki/Tab_Control_in_Qt_and_Windows_Phone

Related

Navigate to specific page defined on model when Item is Tapped

I'm trying to make a custom home page where pages are listed on an Horizontal scroll view as "Services" so each one of them should navigate to a different Page.
I have a view like this:
<controls:HorizontalScrollView HeightRequest="160"
Orientation="Horizontal"
ItemsSource="{Binding OwnerServicesList}"
x:Name="OwnerServicesSlider"
ItemSelected="OwnerServicesSlider_ItemSelected">
<controls:HorizontalScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="10,0,5,0" WidthRequest="100" HeightRequest="100">
<Image HorizontalOptions="Start" Source="{Binding ImgUrl}" WidthRequest="100" HeightRequest="100" />
<Label Style="{StaticResource BoldLabel}" HorizontalTextAlignment="Center" FontSize="13" LineBreakMode="TailTruncation" Text="{Binding Name}" TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
Im using a custom made controller for a Horizontal Scroll view that works like a listview, every item on tap raises a ItemTappedEventArgs event.
Inside my model i´ve declared a public Page Page { get; set; } for each object in the scroll view.
What im trying to do is recover the tapped element and recover the Page stored in it so that I can Navigate to that specific page.
So far I have something like this:
private void OwnerServicesSlider_ItemSelected(object sender, ItemTappedEventArgs e)
{
var service = OwnerServicesSlider.SelectedItem as Services;
Navigation.PushAsync(service.Page);
}
It shows no errors but when I run it I get a
InvalidOperationException: 'Page must not already have a parent.
Any hint will be appreciated!
as Jason said,maybe the page you would push which is exist in thecurren navigation structure,there is a workaround ,before you push the page :
private void OwnerServicesSlider_ItemSelected(object sender, ItemTappedEventArgs e)
{
var service = OwnerServicesSlider.SelectedItem as Services;
service.Page.Parent = null;
Navigation.PushAsync(service.Page);
}

Can we play 2 videos simultaneously in windows phone 7 application

Can we play 2 videos simultaneously in windows phone 7 application.
I am using 2 media elements in 1 xaml page. But only one of the videos is getting displayed. How can I play videos. Please suggest some pointers.
You Can use only one MediaElement on a page. please refer MediaElement Design Guidelines First.
The reason you are seeing on video is because when we use MediaElement, all other playing audio video are stops.
The answer how can you play two videos using MediaElement or another option is CompositionTarget.Rendering Event.
CompositionTarget.Rendering actually renders a frame.
For details visit here.
Code in XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<MediaElement Name="ME1" Source="/Images/oceansclip1.mp4" Stretch="Fill" AutoPlay="False" VerticalAlignment="Top" Height="250"/>
<MediaElement Name="ME2" Source="/Images/oceansclip2.mp4" Stretch="Fill" AutoPlay="False" VerticalAlignment="Top" Margin="0,10" Height="250"/>
<Button Content="Play" Click="Button_Click_1"/>
</StackPanel>
</Grid>
Code behind XAML
private void Button_Click_1(object sender, RoutedEventArgs e)
{
CompositionTarget.Rendering += CompositionTarget_Rendering1;
}
private void CompositionTarget_Rendering1(object sender, EventArgs e)
{
mediaElement1.Play();
mediaElement2.Play();
}
But CompositionTarget.Rendering do not guarantee time between the calls, so you may get frames running faster or slower.

Handling tap on Pushpin in a fixed Map

I have a Map control showing a few Pushpins. I do not want the user to navigate in the map so I disable it. But I do want the user to be able to tap on a Pushpin (and in the event I navigate to a detail page).
However when the Map.IsEnabled is false, the Pushpins don't seem to receive any gestures either. I've also tried using IsHitTestVisible, but with no luck.
Some code showing what I'm trying to do. Does anyone have any ideas?
<maps:Map Name="Map"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed" ZoomBarVisibility="Collapsed"
IsEnabled="False">
<maps:MapItemsControl ItemsSource="{Binding TheCollection}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Name="Pin" Location="{Binding Coordinate}" Content="{Binding Ix}">
<maps:Pushpin.Background>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</maps:Pushpin.Background>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="PinTap" />
</toolkit:GestureService.GestureListener>
</maps:Pushpin>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:Map>
Setting IsEnabled to false prevents the Map control from responding to user input, which affects the child Pushpin as you've seen. If you want the map to be read-only but the Pushpin to respond to gestures then I think you have two options:
Handle all the gesture events on the Map control and set e.Handled to true, which will prevent the Map itself from processing the event, but should leave the PushPin free to handle the tap gesture.
Create a WriteableBitmap of the Map and show that instead, and then display the Pushpin on top (NOTE: I suspect that the Pushpin control won't work outside of the Map control, so you'd need to create/re-template a control to look like a Pushpin).
UPDATE: The events that you need to handle on the Map to make it appear "read-only" but remain enabled are MapPan and MapZoom.
So here's how I solved it after a lot of testing and browsing MSDN. It turns out that things are a bit different in the Map control on Windows Phone (see MSDN). There are new behaviors and events compared to normal Silverlight.
<maps:Map Name="Map"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed" ZoomBarVisibility="Collapsed"
MapZoom="Map_MapZoom" MapPan="Map_MapPan">
<maps:MapItemsControl ItemsSource="{Binding TheCollection}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Name="Pin" Location="{Binding Coordinate}" Content="{Binding Ix}">
<maps:Pushpin.Background>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</maps:Pushpin.Background>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="PinTap" />
</toolkit:GestureService.GestureListener>
</maps:Pushpin>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:Map>
...
private void Map_MapPan(object sender, MapDragEventArgs e)
{
e.Handled = true;
}
private void Map_MapZoom(object sender, MapZoomEventArgs e)
{
e.Handled = true;
}

Is it possible to access an external class' member variable in page.xaml.cs?

I'm developing a Windows Phone 7 app, and I have two xaml pages. From the first one, I embed two app bar links to select an image from gallery or capture an image using the camera. I would like the image chosen on the first page to be displayed on a second page, with the app bar buttons showing a confirm yes or no. As of now, I have an image control on the first page (barcodeImage) that gets updated with the choice.
MainPage.xaml
<controls:PanoramaItem Header="welcome">
<ScrollViewer Name="sv1" VerticalScrollBarVisibility="Auto">
<StackPanel Height="1100">
<TextBlock TextWrapping="Wrap">Random text here.
</TextBlock>
<Grid x:Name="Grid2" Grid.Row="1" Margin="12,0,12,0">
<Image Height="150" Margin="28,30,168,0" Name="barcodeImage" Stretch="Fill" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" />
</Grid>
</StackPanel>
</ScrollViewer>
</controls:PanoramaItem>
MainPage.xaml.cs
void cameraCaptureTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(e.ChosenPhoto);
barcodeImage.Source = bmp;
}
}
Confirm.xaml
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Margin="64,36,57,100" x:Name="barcodeImageFinal" Stretch="Fill" />
</Grid>
I'd like barcodeImageFinal to display the final bitmap. How can I make this work? Thanks for looking :)
As I understand your question, you want to create a bitmap in a member of MainPage and then access it from Confirm. One approach would be to create a public static property of some class for your bitmap. For example, maybe create public static BitmapImage FinalBitmap in your App. Then you could set the value of the property in your cameraCaptureTask_Completed and then create a Loaded handler in your Confirm class that sets image source to the stored bitmap.
I think the answer to your question title is yes if you make the member static, although the other class isn't really "external". A normal class member won't be accessible because you don't have an instance of that class.

Databinding with Data Template on ComboBox Select Item using LINQ

I have a little Problem.
A SP give me a several list of URL´s. The Urls are binded on a Combobox.
When I Select an Item, always the Object comes to the Combobox not the Selected Value, see the code below:
<DataTemplate x:Key="Webadressen" DataType="{x:Type src2:GetWebadressenResult}" >
<StackPanel>
<Label Content="{Binding Path=Adresse}" />
</StackPanel>
</DataTemplate>
<ComboBox Width="192" IsEditable="True" Margin="2" Name="Cbox_GDWeb" ItemTemplate="{StaticResource Webadressen}" SelectionChanged="Cbox_GDWeb_SelectionChanged">
private void Cbox_GDWeb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
GetWebadressenResult test = (GetWebadressenResult)this.Cbox_GDWeb.SelectedValue;
MessageBox.Show(test.Adresse.ToString());
this.Cbox_GDWeb.Text = test.Adresse.ToString(); /* Not Working cause the this Event calls the same Method */
}
Change your ComboBox to this
<ComboBox Width="192" IsEditable="True" Margin="2" Name="Cbox_GDWeb" DisplayMemberPath="Adresse" SelectedValuePath="Adresse" SelectedValue="{Binding Path=Adresse}">
then you wont need the Datatemplate and it will work fine
you also wont need the SelectionChange event to change your selecteditem

Resources