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.
Related
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.
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.
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.
I need to set the Image for Panorama Page's Title, Can we able to do this ? Actually I have done this using TitleTemplate but it is not working.. can you guide me how to set the Image as Panorama Page Title.
The Code is
<controls:Panorama Background="{Binding PanoramaBackground}">
<controls:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
<Image x:Name="HeaderImage" Source="/Resources/header_logo.png" />
</StackPanel>
</DataTemplate>
</controls:Panorama.TitleTemplate>
</controls:Panorama>
But This is not working..
Thanks and Regards,
dinesh
I found the answer of my question outside of this forum:
The proper way for draw a big image for all the panorama view in the title position is this:
<controls:Panorama.Title>
<StackPanel Orientation="Vertical" Margin="0,80,0,0">
<Image x:Name="icon" Source="/Resources/Drawables/header_landscape.png" Height="163" Width="1920"/>
<!--<TextBlock Text="my application" FontStyle="Italic" FontSize="40" VerticalAlignment="Center" Margin="0,-40,0,0" />-->
</StackPanel>
</controls:Panorama.Title>
To make the header visible you can also set a top margin for your template in this way:
<DataTemplate x:Key="PanoramaHeader">
<Grid Height="72" Margin="0,72,0,0">
<Image HorizontalAlignment="Left" Height="72" Margin="0" Source="/Assets/Images/header.png" Stretch="Fill" VerticalAlignment="Bottom" Width="72"/>
</Grid>
</DataTemplate>
To make this work you need to actually have some data so that your template is used.
As you don't want to use any passed value in your template you can get this to work by simply setting the Title to an empty string.
<controls:Panorama Title="">
to make this work, remove the leading slash from the image URI. It should be:
<Image x:Name="HeaderImage" Source="Resources/header_logo.png" />
In a listbox I have a list of titles with an edit icon next to each, how do I increase the touchable area so that even if the user touches part of the title, it actually triggers the image event?
I assume I need to wrap the image in another element but cannot work out what that needs to be.
I tried wrapping the image in a button and add padding to the button but then it pushed the UI elements around, I do not want to affect the presentation, just the none-visible touchable area.
Wrap it in a button - you're totally in the right ball-park. But you need to edit the control template of the button and reduce down all the standard padding and margin, borders etc. so its just a raw touchable region.
You can then wrap anything in this button and apply your template/style to make anything interactive.
Luke
You could try wrapping in a Panel or Grid.
Or just adjust the margin and Z-Order.
Put the image in a button, set the size of the button you want & then set the Stroke property to "No brush" on the button to remove the border.
Try it:
<Border BorderBrush="Transparent"
BorderThickness="20,25,20,0"
Background="Transparent">
<Grid/>
</Border>
or use it in other variations:
<Border Background="Transparent">
<Grid Margin="20 25 20 0"/>
</Border>
full sample with button: (no background interaction when pressed at this sample)
<Button BorderBrush="Transparent"
Tag="{Binding SelectedPhoto.commentsCount}">
<Button.Template>
<ControlTemplate>
<Border BorderThickness="20,25,20,0"
BorderBrush="Transparent"
Background="Transparent">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Grid Margin="0 0 4 0"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{TemplateBinding Tag}"
Visibility="{Binding SelectedPhoto.HasComments,Converter={StaticResource BoolToVisibilityConverter}}"
Foreground="{StaticResource BlueColorBrush}"
FontSize="{StaticResource MFontSize36}" />
</Grid>
<Image Source="/Images/photo_comments_icon.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
<Image Source="/Images/photo_comments_icon_blocked.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource OppositeBoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>