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.
Related
I am trying to write on panaroma application in tile image title.
And I can not see like a below code in .xaml page;
<image Title="blabla" ...>
This is my code;
<phone:PanoramaItem Header="Kişisel Bilgiler" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<toolkit:WrapPanel>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
</toolkit:WrapPanel>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
But I want to
Thank is advance.
(Sorry my language)
Image control doesn't have any property to display text similar to Tile's title. You need to add other control to display the title, for example using TextBlock :
<toolkit:WrapPanel>
<Grid>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
<TextBlock Margin="0,150,0,0" Text="Tile Title" Foreground="White"/>
</Grid>
</toolkit:WrapPanel>
You may also want to try HubTile control as an alternative.
i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
I'm able to set an image to Listbox using the background property.
But how do I set a desirable image as a background to items of the listbox?
Thanks.
You'll have to redefine the ItemTemplate property of the ListBox. If you're not confident with XAML, you should try using Expression Blend.
Here is an example of how you're XAML could look like. I created a new application using the Pivot Template application.
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
</StackPanel.Background>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So the default ItemTemplate uses a StackPanel as main container. What you want to do here, is to set the image as the background of that StackPanel. That's what the following lines stands for:
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
</StackPanel.Background>
With the above code, you set an ImageBrush as the Background property of the StackPanel.
With that code, each ListBoxItem will display a koala.
Wrapping the listbox item using border and setting the background might help.Follow this sample
<Border Width="380" Height="60" Margin="0,0,0,10" >
<Border.Background>
<ImageBrush ImageSource="Images/menu_bg.png" />
</Border.Background>
<TextBlock Foreground="Black" FontSize="22" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
I'm displaying a simple twitter feed in my app and I have implemented a refresh method in the context menu. Problem is that displaying the context menu performs poorly (it's not a matter of quantity of items, happens with just a few). It seems I need to tap/hold extra long and then the context menu appears - not with the smooth animation, but a bit with a jolt.
Ideally it would be nice to have it perform more like the people hub where there is instant feedback that you've tapped the item, and then the context menu appears in with the smooth animation.
Another part of this that baffles me is when the context menu does appear, the rest of the screen sort of "shrinks to the background" to draw attention to the selected item. It seems this would have something to do with the perf problem. Again, look to the people hub for ideal behavior on this matter.
Any tips on how to implement this better?
here's my xaml:
<!-- twitter feed-->
<controls:PivotItem Header="feed">
<ScrollViewer>
<StackPanel>
<ItemsControl ItemsSource="{Binding Tweets}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Padding="12">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu >
<toolkit:MenuItem Header="refresh" Command="{Binding Main.RefreshTweetsCommand, Source={StaticResource Locator}}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding user.profile_image_url}" Margin="0,12,0,0" Height="80" Width="80" Stretch="UniformToFill" VerticalAlignment="Top"/>
<Border Padding="12,0,0,0">
<StackPanel>
<TextBlock Text="{Binding user.name}" Foreground="Blue" FontSize="30" />
<TextBlock Text="{Binding date_created}" FontSize="16"/>
<TextBlock Text="{Binding text}" FontSize="20" TextWrapping="Wrap" Width="320" />
</StackPanel>
</Border>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="more . . ." FontSize="32" Padding="20">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding MoreTweetsCommand, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
The "shrinks to the background" problem is done in the people hub too, it's just not as obvious. You can change this with the IsZoomEnabled property, see http://www.windowsphonegeek.com/articles/WP7-ContextMenu-in-depth--Part1-key-concepts-and-API.
I've noticed that the animation is quite jerky as well, in comparison to Microsoft's implementation.
I noticed a very strange behavior:
in my windows phone 7 I have a ListBox that can contain anything from 1-2 to 2-300 items.
I noticed that when the number of items is big (not sure about the number but for sure >150 items) the OnSelectionChanged event is not raised.
This is the XAML of my listbox
<ListBox ItemsSource="{Binding Path=Posts}" ItemTemplate="{StaticResource IconsWithText}"
ScrollViewer.VerticalScrollBarVisibility ="Disabled"
SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And the template for the ItemTemplate is:
<DataTemplate x:Name="IconsWithText">
<Grid x:Name="ThumLink" Width="160" Height="140" Margin="10" Background="#FF666666">
<Image Source="Resources/Images/All.png" Visibility="{Binding Path=VisibilityAll}" />
<Image delay:LowProfileImageLoader.UriSource="{Binding Picture}"
Visibility="{Binding Path=VisibilityPic}"
Stretch="UniformToFill" VerticalAlignment="Top" HorizontalAlignment="Left" />
<Border x:Name="border" VerticalAlignment="Bottom" Background="#d9ffffff" Height="62" BorderBrush="Black" Visibility="{Binding Path=VisibilityPic}" >
<TextBlock x:Name="textBlock" Text="{Binding Title}" VerticalAlignment="Top" TextWrapping="Wrap" MaxHeight="60" Style="{StaticResource PhoneTextSmallStyle}"
Foreground="Black" FontSize="20" Margin="4,1,4,0" Height="62"/>
</Border>
</Grid>
</DataTemplate>
Is this a bug or did I do something wrong? I was in debug and the event handler never gets called, but it works when the items are not many.
Simone
The problem with using the plain StackPanel is that all visual object will be created and added to the StackPanel which will be very expensive in terms of memory and may trip over other limits in the rendering system.
Try changing to:-
<VirtualisingStackPanel Orientation="Horizontal" />
So far though I've not been able to reproduce your problem with 300 items even using a plain StackPanel.