how to hide/show pivot item headers programatically - windows-phone-7

I have a pivot control with non data bound pivot items which have different kind of structure. all of them have simple text headers. How can we change the visibility of the headers
based on orientation changes? what I want to achieve is, when the phone is in landscape i want
the headers to be invisible and all the space to be utilized by the the respective contents inside the pivot items. I tried a lot, and the biggest problem is the panel that carries the headers is always taking the original height.(I tried to change font size, visibility etc...)
Please help. Here is my code sample
<controls:Pivot x:Name="pvtMain" >
<controls:PivotItem x:Name="pvtItemOne" Header="My Header one">
<MyUserControls:UserControlOne/>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemTwo" Header="My Header Two">
<MyUserControls:UserControlTwo/>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemThree" Header="My Header Three">
<MyUserControls:UserControlThree/>
</controls:PivotItem>
</controls:PivotItem>
I am using Windows phone SDK 7.0 (for backwards compatibility reason)

This may work. Give it a try!!
void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.Landscape || e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight)
{
pvtItemOne.Header = null;
pvtItemTwo.Header = null;
pvtItemThree.Header = null;
pvtMain.Margin = new Thickness(0, -150, 0, 0);
}
else
{
pvtItemOne.Header = "My Header One";
pvtItemTwo.Header = "My Header Two";
pvtItemThree.Header = "My Header Three";
pvtMain.Margin = new Thickness(0);
}
}
By the way, you don't need to maintain any backward compatibility for 7.0 devices. Microsoft stopped support for those devices long back and Marketplace is closed for those.

You can do the following :
<controls:PivotItem >
<controls:PivotItem.Header>
<Border x:Name="PivotItemHeader">
<TextBlock Text="Test" />
</Border>
</controls:PivotItem.Header>
<StackPanel>
<TextBlock Text="line1" />
<TextBlock Text="line2" />
</StackPanel>
</controls:PivotItem>
By using the "border" inside the Header you can control its visibility from code.
like : PivotItemHeader.Visibility = System.Windows.Visibility.Collapsed ;
I know it is not pretty but it works.

Related

Text in PhoneTextBox disappears

What can I do in the following situation?
I have a simple page. In code behind I add PhoneTextBox control for some filtering of a data. But sometimes (frequently) when I try to write something, I see, that text inside is transparent or collapsed or something else, so I don't see it. I don't see it even when I select this text.
// Generating of a PhoneTextBox
SearchBox = new Microsoft.Phone.Controls.PhoneTextBox();
SearchBox.DataContext = searchBoxContext;
SearchBox.Name = string.Format("SearchBox_{0}", Guid.NewGuid());
SearchBox.Visibility = Visibility.Collapsed;
// Adding Phone text box in a Grid on the Page
RowDefinition rd = new RowDefinition();
rd.Height = GridLength.Auto;
PageDynamicGrid.RowDefinitions.Insert(0, rd);
Grid.SetRow(generator.SearchBox, 0);
foreach (FrameworkElement child in PageDynamicGrid.Children)
{
Grid.SetRow(child, Grid.GetRow(child) + 1);
}
SearchBoxContext = (generator.SearchBox.DataContext as SearchButtonModel);
SearchBoxContext.SearchTextChanged += SearchBoxContext_SearchTextChanged;
generator.SearchBox.TextChanged += SearchBox_TextChanged;
generator.SearchBox.LostFocus += SearchBox_LostFocus;
generator.SearchBox.KeyUp += SearchBox_KeyUp;
generator.SearchBox.DataContext = null;
PageDynamicGrid.Children.Add(generator.SearchBox);
PageDynamicGrid.UpdateLayout();
and page.xaml
<Grid x:Name="PageDynamicGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Title}"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<ListBox Grid.Row="1" Margin="12,0"
ItemsSource="{Binding PageDynamicContent, Mode=OneWay}"/>
</Grid>
Almost all content of this page (including search box) creates dynamically, but other content is some buttons and links and I need to filter it, if I have search box. Filter works, but users don't like collapsed text in search box. So it looks like that (and there is not a whitespaces in front of the marker)
So, i don't know why, but it seemed that problem is in the order of actions:
First of all create element, change grid column and row definitions
and add element in the grid.
Update layout of the grid.
And only after all this actions we can collapse PhoneTextBox.
it works for me.

WP7 how to implement a better pivot control?

I'm using pivot control to display a large number of images (about 300). I thought of just using 3 pivot item, and when user swipes, change either pivot item or update item source. But I don't know how to do this efficiently ?
Or is there a way of using gesture and stimulating swipe effect as the pivot does ? Something like transition ?
You can use normal Image Control with gesture Manipulation events to swipe left to right and right to left for previous/next photos.
Please find the code below.
XAML Code
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="0">
<Image Margin="0" x:Name="ImagePanel" Source="{Binding SelectedPhoto.PhotoURL}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
C# code
public SlideShow()
{
// Tag ManipulationCompleted event for the current page in the constructor.
ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(SlideShow_ManipulationCompleted);
}
// ManipulationCompleted event. Update the Previous/next photo based on the swipe direction.
void SlideShow_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
var manipEndPoint = e.TotalManipulation.Translation;
const int threshold = 100;
if ((manipEndPoint.X > _manipStartPoint.X) && ((manipEndPoint.X - _manipStartPoint.X) > threshold))
{
LoadPreviousPhoto();
}
else if ((manipEndPoint.X < _manipStartPoint.X) && ((_manipStartPoint.X - manipEndPoint.X) > threshold))
{
LoadNextPhoto();
}
}
Let me know if you need any more help.
Thanks,
Kamal.

determine pivot flick and drag is right or left in windows phone 7?

I have a Pivot control in a page.
<controls:Pivot x:Name="pvtSearchFlights">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted" Flick="GestureListener_Flick" />
</toolkit:GestureService.GestureListener>
<controls:PivotItem x:Name="pvtItemCurrent">
<StackPanel Height="700" Background="AliceBlue">
</StackPanel>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemNext">
<StackPanel Height="700" Background="Red">
</StackPanel>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemPrevious">
<StackPanel Height="700" Background="Green">
</StackPanel>
</controls:PivotItem>
</controls:Pivot>
Here i am able to find the whether flick is right or left by the below code:
private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Angle > 90 && e.Angle < 270)
{
txtTest.Text = "right";
}
else
{
txtTest.Text = "left";
}
}
If i drag the pivot pivot control, the pivot item is Changing but GestureListener_Flick event is not fired because it is a drag event(here it fired GestureListener_DragCompleted event). So while i am dragging also i have to find whether it is dragged to left or right?
Here my main aim is to find the whether pivot is moved right to left or left to right?
How can i find whether it is dragged to left or right?
Thanks in advance.
What about storing current index of Pivot and add SelectionChanged event handler and then just compare old stored index and new one from event?
If diff "new - old" is gt 0, it is to the right and if diff is lt 0 it is to the left. You have to handle special state, when old or new is 0.

Arbitrary Drag and Drop for WP7

I'm trying to find a method of displaying a text block or that will allow me to arbitrarily drag and drop drop that control around the screen.
I've scoured google and here, but every drag and drop related question I find is around exchanging data, not just position.
Is anyone aware of something ready to go, or can you point me in the direction I should be looking?
You can do this by using behaviors:
<TextBlock Text="Hello!">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</TextBlock>
You need to add a reference to Microsoft.Expression.Interactions in your solution, and the following namespace at the top of your XAML file:
xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
The xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" Margin="125,132,0,0"
Name="textBlock1" Text="TextBlock"
Width="83" MouseMove="textBlock1_MouseMove" />
</Grid>
and the code behind:
private void textBlock1_MouseMove(object sender, MouseEventArgs e)
{
TextBlock realSender = (TextBlock)sender;
var theParent = (Grid)realSender.Parent;
var position = e.GetPosition(theParent);
realSender.Margin = new Thickness(
position.X - realSender.Width / 2,
position.Y - realSender.Height / 2, 0, 0);
}
The toolkit sample used to include an example of doing this.
Not sure if it's still in there though as it was based on the gesture support which has since been deprecated. If it's gone check the August 2011 version.

Why am I getting a "well-formedness constraint: unique attribute spec" (0xc00cee3c) error when I descend from LongListSelector

I'm trying to create a descendant class from the silverlight toolkit LongListSelector. Let's call it SimpleLonglistSelector. I started from the "Silverlight for Windows Phone Toolkit Source & Sample - Feb 2011.zip"
http://silverlight.codeplex.com/releases/view/60291
I created a new class:
public class SimpleLongListSelector : LongListSelector
{
public SimpleLongListSelector()
{
var itemsPanelTemplate = #"
<ItemsPanelTemplate xmlns='http://schemas.microsoft.com/client/2007'>
<toolkit:WrapPanel xmlns:toolkit='clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit' Orientation=""Horizontal""/>
</ItemsPanelTemplate>";
this.GroupItemsPanel = (ItemsPanelTemplate)XamlReader.Load(itemsPanelTemplate);
var groupItemTemplate = #"
<DataTemplate xmlns='http://schemas.microsoft.com/client/2007'>
<Border Width=""99"" Height=""99"" Background=""{StaticResource PhoneAccentBrush}"" Margin=""6"" IsHitTestVisible=""{Binding HasItems}"">
<TextBlock Text=""{Binding Key}""
FontFamily=""{StaticResource PhoneFontFamilySemiBold}""
FontSize=""36""
Margin=""{StaticResource PhoneTouchTargetOverhang}""
Foreground=""{StaticResource PhoneForegroundBrush}""
VerticalAlignment=""Bottom""/>
</Border>
</DataTemplate>";
this.GroupItemTemplate = (DataTemplate)XamlReader.Load(groupItemTemplate);
var groupHeaderTemplate = #"
<DataTemplate xmlns='http://schemas.microsoft.com/client/2007'>
<Border Background=""Transparent"">
<Border Background=""{StaticResource PhoneAccentBrush}"" Width=""75"" Height=""75"" HorizontalAlignment=""Left"">
<TextBlock Text=""{Binding Path=Key}""
Foreground=""{StaticResource PhoneForegroundBrush}""
Style=""{StaticResource PhoneTextExtraLargeStyle}""
VerticalAlignment=""Bottom""/>
</Border>
</Border>
</DataTemplate>";
this.GroupHeaderTemplate = (DataTemplate)XamlReader.Load(groupHeaderTemplate);
var itemTemplate = #"
<DataTemplate xmlns='http://schemas.microsoft.com/client/2007'>
<TextBlock Text=""{Binding Title}"" FontSize=""30""/>
</DataTemplate>";
this.ItemTemplate = (DataTemplate)XamlReader.Load(itemTemplate);
}
}
Then I added it to the LongListSelector example, in the same pivot as all of the other long list selectors:
<controls:PivotItem Header="SLLS">
<local:SimpleLongListSelector x:Name="simple" />
</controls:PivotItem>
Then I added it's source to be the same as the movies source in the LoadLinqMovies()
simple.ItemsSource = moviesByCategory;
Then run the code (I know it doesn't look pretty, that's because the bindings haven't been set up right, I do that so you know it's not the data. If you'd like, you can do it like this:
simple.ItemsSource = movies.GroupBy((m) => m.Title[0]).Select((c) => new PublicGrouping<char, Movie>(c));
That looks like I want it to look.
Well, in either case, this works as expected, except when I click on a group header. (any of the [by default blue] squares). I get a
WrappedException
The error message is:
0xc00cee3c
Which I think means:
well-formedness constraint: unique attribute spec
I don't think I've got a uniqueness problem. What am I doing wrong?
If you use the LongListSelector from the 7.1 toolkit, found at http://silverlight.codeplex.com/releases/view/71550, your sample code works as listed above. This must have been some bug in the original LLS...

Resources