How to change font size of Panorama item header? - windows-phone-7

What is the easiest way to set the font size of the panorama item header once so it can be used for all item headers in my app?

There isn't a way to automatically do it for all headers in your app yet. You'll need to set the style for each one.
Implicit styling is coming in the Mango update and that should allow this to be done then.
Update
Here's what you can do now.
Create a global template style for the FontSzie you want. Something like:
<Application.Resources>
<DataTemplate x:Key="MyItemHeaderTemplate">
<Grid>
<ContentPresenter>
<TextBlock Text="{Binding}" FontSize="20" />
</ContentPresenter>
</Grid>
</DataTemplate>
</Application.Resources>
Then in every PanoramaItem that I wish to have styled this way I set the HeaderTemplate:
<controls:PanoramaItem Header="first" HeaderTemplate="{StaticResource MyItemHeaderTemplate}">
// ...
</controls:PanoramaItem>

This had been a difficult issue for me as well. However I have found a pretty simple solution to take care of this for each head item you wantto resize/fontweight/font...so-on. I have inserted a snippet from a current project I have been working on. Take notice to the xaml portion for controls:PanoramaItem.HeaderTemplate. This is where the templete is modified for the header item. Good Luck!
<!--Panorama item one-->
<controls:PanoramaItem Header="Locations">
<Grid>
<ListBox Height="498" HorizontalAlignment="Left" Margin="2,0,0,0" Name="listBox1" VerticalAlignment="Top" Width="424" />
</Grid>
<controls:PanoramaItem.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="55" FontFamily="Segoe WP Bold" Foreground="Black" TextAlignment="Left" FontWeight="Normal" FontStyle="Italic" />
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
</controls:PanoramaItem>

Maybe you could try putting this in under the <controls:Panorama> :
<controls:Panorama.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="150" Margin="0,20,0,0" FontWeight="Bold" />
</DataTemplate>
</controls:Panorama.TitleTemplate>
Found here: http://www.jstawski.com/archive/2010/10/25/change-windows-phone-7-panoramarsquos-control-title.aspx

You can create your own PanoramaItem Control and use generic.xaml to apply your custom PanoramaItem style.
public class MyPanoramaItem : Microsoft.Phone.Controls.PanoramaItem
{
public MyPanoramaItem()
{
DefaultStyleKey = typeof(MyPanoramaItem);
}
}
Then you create Themes\Generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourProjectNamespace">
<Style TargetType="local:MyPanoramaItem">
<!—your custom PanoramaItem style-->
</Style>
</ResourceDictionary>
And then use your custom Panorama like this:
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:local="clr-namespace:YourProjectNamespace"
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<controls:Panorama Title="my application">
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png"/>
</controls:Panorama.Background>
<!--Panorama item one-->
<local:MyPanoramaItem Header="first item">
</ local:MyPanoramaItem >
</controls:Panorama>
More about generic.xaml and its usage you can find here.

Related

Flyout Placement Bottom Windows Phone

I want to place my Flyoutat the Bottom of my Page.
So i created it like this.
<Grid x:Name="ExampleRoot">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Top">
<Image Source="{Binding Path=CurrentPage}"
Stretch="Uniform" ContinuumNavigationTransitionInfo.IsEntranceElement="True"
/>
</Grid>
<FlyoutBase.AttachedFlyout>
<PickerFlyout Placement="Bottom" > <!-- Here I set my Placement --->
<StackPanel>
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=DocumentPageCounterDescription, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=SelectedAnnotation.Description, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" TextWrapping="Wrap" />
</StackPanel>
</PickerFlyout>
</FlyoutBase.AttachedFlyout>
</Grid>
and open it like this in the code behind
private void SomePropertyChanged(DependencyPropertyChangedEventArgs e)
{
ViewModel selected = e.NewValue as ViewModel;
FlyoutBase fly = FlyoutBase.GetAttachedFlyout(this.LayoutRoot);
fly.ShowAt(this.LayoutRoot);
}
But it opens every time at the top of my page. I can set it to FlyoutPlacementMode.Full for example and it is working the expected way.
I attached it at the complete page and tried it, but the result is the same. So how do I get it to open at the bottom of my Page?
//// Edit
I found the following answer, but this is not working for me! I dont want to open it from a button!
It is working with a MenuFlyout the way I want to, but i want to have a PickerFlyout.
There is descripted that other placements not working on Flyouts. Any Ideas ?
Unfortunately, Windows Phone RT apps only support the flyout in Full or Top placement which you've already established. It is possible to do what you're asking however.
This article might be of use to you: Flyout on Windows Phone 8.1 Runtime
All right I solved it!
I want to show Text / information in it so a MenuFlyout was no option for me. The PickerFlyout isn't modifiable enought so i took the common one.
As I mentioned there is no working placement with a Flyout at the Bottom except with a MenuFlyout.
So here is what I did.
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Full">
<StackPanel Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<StackPanel Margin="5,0">
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Title Example" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Information Example" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Grid>
I set the PlacementMode to Full and applied an invisible Background. Only the the outer Stackpanel is now showing a background. This way it feels like the real PlacementMode.Bottom.

ListBox Template/Styles in WPF

I have a ListBox on a WPF form, with the following look:
<ListBox x:Name="myListBox" Width="200" Height="200" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" FontSize="16" FontStyle="Italic"/>
<Image Source="Images/myImage.png"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How would I go about adding this to a Template/Style so that all of the ListBoxes can reference one template and all have the same look?
I am confused as how to go about creating a template,
Thanks
Make the DataTemplate a resource which you can place in an appropriately scoped Resources collection:
<UserControl.Resources>
<DataTemplate x:Key="MyDataTemplate">
....
</DataTemplate>
</UserControl.Resources>
You can then access the resource in you ListBox:
<ListBox ItemTemplate="{StaticResource MyDataTemplate}">
Alternatively, you can add the DataTemplate as part of a Style:
<Style TargetType="{x:Type ListBox}" x:Key="MyStyle">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
...
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox Style="{StaticResource MyStyle}">
You can also implictly target all ListBox instances by dropping the x:Key in the Style.
Every framework-level element has a Resources collection, up to the application level, so choose the appropriate collection to target elements at the appropriate scope. Also read about static and dynamic resources and which is the most appropriate markup extension to use for you.

how to add images for pivot item header

Am developing a simple app for learning pivot control in wp7.
can we add images for pivot item instead of text in header(red mark area in bellow image ).
is it possible to add images, please suggest me
my xaml code is:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION" Name="mainPivot">
<!--Pivot item one-->
<controls:PivotItem Header="item1">
<Grid>
<Image Source="/SchoolList;component/Gallery/child.jpg"/>
</Grid>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="item2">
<Grid>
<Image Source="/SchoolList;component/Gallery/class.jpg"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
</Grid>
thanks in advance
use this tip :
<phone:Pivot>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}" /> // important
</DataTemplate>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
and then set your Pivot Item header as
<phone:PivotItem Header="path-to-image" >
Yes it is. Simply use HeaderTemplate
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image ... />
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>
May I also add that while this is generally possible, it is not recommended for the general use. Unless you need pivot functionality for something completely different. It is somewhat non intuitive.
with the Idea of #toni petrina i added images to the HeaderTemplate to the pivot control using data binding. am implemented image gallery in my app using pivot with images in header template gives great look and feel
Xaml code is :
<controls:Pivot Title="Photo Gallery" Name="mainPivot" ItemsSource="{Binding PivotImages}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Image Name="play" Source="{Binding imgSrc}" Height="80" Width="120" Margin="0,10,0,0"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Image Name="mainImage" Source="{Binding imgSrc}" />
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
and i have created a simple class with one string property to save the images source and prepared a List and assigned to the pivot ItemsSource on page loaded event
mainPivot.ItemsSource = items; // items is the list with image sources

Windows Phone - Marquee With Template

In windows phone i could easily marquee a textblock. But is there any solution to marquee list of items for which i can define template and bind it to a list of items.
Thanks
Gokoulane Ravi
Although it's not a WP style...
Add storyboard to page resources:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever">
<DoubleAnimation From="480" To="-480" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Add ScrollViewer, add StackPanel inside and TextBlock inside:
<ScrollViewer x:Name="LongScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" Margin="0,212,0,339" IsEnabled="False" >
<StackPanel Margin="0" Height="58">
<TextBlock x:Name="LongTextBlock" Text="Very long, real long, it's a long text." Margin="0" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top"
HorizontalAlignment="Center" TextAlignment="Center" TextTrimming="None" TextWrapping="NoWrap">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="translate" />
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</ScrollViewer>
In page's Loaded method make sure TextBlock's text is long enough for scrolling:
Size size = new Size(double.PositiveInfinity, double.PositiveInfinity);
this.LongTextBlock.Measure(size);
size = this.LongTextBlock.DesiredSize;
if (size.Width > this.ActualWidth)
{
this.Scroll.Begin();
}
You can do that. However you'll need to write custom XAML to achieve this functionality. Blend can help you over here to create that custom animation and run as marquee.

Scroll PanoramaItem Header in 'wide' PanoramaItem

I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.

Resources