How to Default Scroll Position in ScrollViewer/ListBox in WP7 - windows-phone-7

I'm building a WP7 application using the Panorama control. I'm fairly new to WP7 so I might be missing something simple. My Panorama control is bound to ViewModel and PanoramaItems are added at runtime when a property of that ViewModel is populated with data via web service request. I'd like to have a section at the top of each PanoramaItem that holds a refresh button etc.
I'm able to add an item to the top of the ListBox using a Style but I would like to have that item scrolled off the top until a user pulls it down. Is there a way to set a default scroll position in the Style or in Template? I've read a few example of scrolling to a particular item once there is data using listBox.ScrollToItem, but that didn't work in my test application, or getting a handle on the ScrollViewer and using ScrollToVerticalOffset.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="StoryStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
<StackPanel>
<Button Content="Refresh"></Button>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Panorama ItemsSource="{Binding Programs}" x:Name="AllPrograms">
<controls:Panorama.Title>
<TextBlock></TextBlock>
</controls:Panorama.Title>
<controls:Panorama.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</controls:Panorama.HeaderTemplate>
<controls:Panorama.ItemTemplate>
<DataTemplate>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Stories}" Style="{StaticResource StoryStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="80">
<TextBlock Text="{Binding SensibleTitle}" TextWrapping="Wrap" />
<TextBlock><Run Text="{Binding Duration, StringFormat='hh\\:mm\\:ss'}"></Run><Run Text=", "/><Run Text="{Binding DisplayDate, StringFormat='MMMM dd, yyyy'}"/></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
</Grid>

Try changing SelectedIndex for ListBox.

Related

Default Border is showing while using Gridview in windows phone uwp

I am displaying list of items with it's headers and content using gridview as shown below.
<Grid>
<GridView ItemsSource="{Binding Source={StaticResource src}}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="#2a2621" Width="400" Height="35" Margin="-10,0,-10,0">
<TextBlock x:Name="atistType" Width="200"
Text="{Binding RegionalName}"
Foreground="White"
FontWeight="ExtraBold" FontSize="22" Margin="10,0,0,0"/>
<Image Margin="110,0,10,0"
Tag="{Binding RegionalName}"
Tapped="RedirectToImageListing"
Source="Assets\Right-arrow.png"
Height="25"></Image>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5" Tag="{Binding AlbumId}"
Tapped="RedirectToImageListOrGridView" >
<Grid>
<Image Width="{Binding ListingWidth}" Source="Assets/PlaceHolder.jpg"></Image>
<Border BorderThickness="1" BorderBrush="White">
<Image Width="{Binding ListingWidth}"
Source="{Binding SmallImage}"></Image>
</Border>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
I am able to show the data perfectly.
But, my concern is from somewhere a line is displaying like border.
You can check in the screenshot.
As shown in the screenshot, for the first image only a line is displaying like a border.
Is there a way to remove that.
I am not able to find from where the border is coming.
Thank you.
Try this
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
Taken from here

Modify pivot item font size and font family

I am developing one windows phone app. I have added style to Pivot Item.
<phone:PhoneApplicationPage.Resources>
<Style TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#D62429" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="25,10,0,0" />
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1" />
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
It show like this
I am trying to change the font size and font family of Pivot Item and also Pivot Title i.e. Welcome
and item 1. How can I change the font size and font family of these?
Try defining Pivot item in this way:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="WELCOME" FontSize="30" FontFamily="Arial">
<!--Pivot item one-->
<controls:PivotItem >
<controls:PivotItem.Header>
<TextBlock Text="item1" FontSize="30" FontFamily="Arial" Margin="0,30,0,0"/>
</controls:PivotItem.Header>
<Grid/>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem >
<controls:PivotItem.Header>
<TextBlock Text="item2" FontSize="30" FontFamily="Arial" Margin="0,30,0,0"/>
</controls:PivotItem.Header>
<Grid/>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Sorry for some reason I cannot see your image but I answered very similar question just recently. See if this helps:
wp8 Set header's size of dynamic pivot item
To Change the font size or font family of pivot header use this code inside the Pivot
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid >
<TextBlock FontFamily="Times New Roman" Text="{Binding}" FontSize="20" Height="auto"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>

Focus changed on LoadMore Button click in Windows Phone Application Page

In my Windows Phone application I have a ListBox with Load More button, in one of my pages. At the bottom of the page a TextBox and a button is present. when I click on the Load More button at the bottom of listbox, the focus automatically goes to the textbox and the keypad is shown. I don't need to go the focus to the textbox on buttonclick. How this problem occures and how can I overcome this problem.
The xaml of style used for the listbox shown below
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxMore" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer">
<StackPanel>
<ItemsPresenter/>
<Border BorderBrush="Black" BorderThickness="0,0.5">
<Button Content="Load More..." Name="btnLoadMore" Visibility="Visible" Background="White" Foreground="#FF176DDC" Click="btnLoadMore_Click"></Button>
</Border>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
The xaml of the listbox shown below
<ListBox x:Name="userDetailsList" SelectionMode="Multiple" Style="{StaticResource ListBoxMore}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderThickness="0,0.5,0,0" BorderBrush="Black" Width="440">
<Grid Width="430">
<Image Source="{Binding UserImage}"/>
<TextBlock Text="{Binding UserName}"/>
<TextBlock Text="{Binding Details}"/>
<TextBlock Text="{Binding Date}"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on loadmore button the focus goes to the textbox that placed below the listbox. There is only one textbox is there.

how we use window user phone controll in my app

i want to add a user control like stack panel in my Grid for example
- a grid which name content panel which is in MainPage.xaml
- List item
-stack panel which is in usercontrol.xaml
<UserControl x:Class="USER.WindowsPhoneControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
<StackPanel HorizontalAlignment="Center">
<StackPanel.Resources>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBlock" x:Key="TextBlockStyle">
<Setter Property="Foreground" Value="Navy"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBox" x:Key="TextBoxStyle">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</StackPanel.Resources>
<TextBlock FontSize="18" Text="Enter your name." Name="abc" />
<StackPanel Orientation="Horizontal" Name="sta">
<TextBlock Style="{StaticResource TextBlockStyle}">
First Name:
</TextBlock>
<TextBox Name="firstName" Style="{StaticResource TextBoxStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource TextBlockStyle}">
Last Name:
</TextBlock>
<TextBox Name="lastName" Style="{StaticResource TextBoxStyle}"
Margin="6,4,4,4"/>
</StackPanel>
<Button Width="50" Content="Submit" Click="Button_Click"/>
</StackPanel>
</UserControl>
i want to add stack panel in grid .....
thanx in advance
I'm not 100% certain what you're actually asking in your question but it's perfectly possible to put a StackPanel in a Grid:
<Grid>
<StackPanel />
</Grid>

TiltEffect and LongListSelector

I am trying to use the TiltEffect from the Silverlight toolkit within a LongListSelector. This is how the element is declared in XAML:
<controls:PivotItem Header="Pivot Item">
<controls:PivotItem.Resources>
<DataTemplate x:Key="LongListSelectorGroupHeaderTemplate">
<Border Background="{StaticResource PhoneAccentBrush}"
Margin="10,20,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Foreground="White"
VerticalAlignment="Bottom"
HorizontalAlignment="Left" />
</Border>
</DataTemplate>
<DataTemplate x:Key="LongListSelectorGroupItemTemplate">
<Border Background="{StaticResource PhoneAccentBrush}"
Margin="10"
Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Foreground="White"
VerticalAlignment="Bottom"
HorizontalAlignment="Left" />
</Border>
</DataTemplate>
<DataTemplate x:Key="LongListSelectorItemTemplate">
<StackPanel Grid.Column="1"
VerticalAlignment="Top"
Orientation="Horizontal"
toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnLongListSelectorTapped" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MinHeight="32"
MinWidth="32"
MaxHeight="48"
MaxWidth="48" />
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Margin="12,10,12,0" />
</StackPanel>
</DataTemplate>
</controls:PivotItem.Resources>
<toolkit:LongListSelector ItemTemplate="{StaticResource LongListSelectorItemTemplate}"
GroupHeaderTemplate="{StaticResource LongListSelectorGroupHeaderTemplate}"
GroupItemTemplate="{StaticResource LongListSelectorGroupItemTemplate}">
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
</controls:PivotItem>
Unfortunately, this isn't working. The tap gesture fires when tapping on an item, but the animation does not play. I've tried setting TiltEffect.IsTiltEnabled property on the LongListSelector, the PivotItem and the parent page but none of them work.
I have another PivotItem that contains a simple ListBox with an ItemTemplate that is very similar to LongListSelectorItemTemplate above. Setting the TiltEffect.IsTiltEnabled property to true within its DataTemplate works as desired.
What am I doing wrong in the case of the LongListSelector?
If you wrap your ItemTemplate in a ListBoxItem, it will tilt accordingly:
<DataTemplate x:Key="LongListSelectorItemTemplate">
<ListBoxItem>
<StackPanel Grid.Column="1"
VerticalAlignment="Top"
Orientation="Horizontal"
toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnLongListSelectorTapped" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MinHeight="32"
MinWidth="32"
MaxHeight="48"
MaxWidth="48" />
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Margin="12,10,12,0" />
</StackPanel>
</ListBoxItem>
</DataTemplate>
The way TiltEffect works is that is contains a list of Types that it will tilt, by deafult these are Button and ListBoxItem.
It then drills down through the visual tree from where you turn it on and adds the effect to all instances of those classes.
So your LongListSelector.ItemTemplate needs to contain a tiltable item. The easiest way to do this is with an invisible button, that way you do not need to edit your TiltEffect and can use it straight out of the toolkit.
If you really don't want the button, then you need some other ContentControl to wrap your template from which you can trigger the tilting. Then add that class to the TiltEffect list.
TiltEffect.TiltableItems.Add(typeof(MyTiltingContentControl))
I use this style on my button to make it invisible.
<Style x:Key="TiltButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Step-by-step instructions on how to use the tilt effect can be found on MSDN
Adding this portion of code between the "Style" Tag in a Button template did exactly what I wanted. Make the button keep it's color when "tilted". I have set the button background to PhoneAccentBrush, so the user decides on the app look and feel with his theme settings.
<Style x:Key="MetroButton" TargetType="Button">
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Height" Value="200"/>
<Setter Property="Width" Value="200"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TiltEffect.IsTiltEnabled="True" goes on the PhoneApplicationPage element, change your ItemTemplate to contain a button and it will work.
Create a new control inherits stackpanel
public class TiltStackPanel : StackPanel
{
public TiltStackPanel() {}
}
then add this control TiltEffect.cs
static TiltEffect()
{
// For extra fun, add this to the list: typeof(Microsoft.Phone.Controls.PhoneApplicationPage)
TiltableItems = new List<Type>() { typeof(ButtonBase), typeof(ListBoxItem), typeof(TiltStackPanel)};
UseLogarithmicEase = false;
}
Use this TiltStackPanel inside your template of longlistselector

Resources