Default Border is showing while using Gridview in windows phone uwp - windows

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

Related

No XAML designer preview with custom ChromeWindow

I've been trying to build a custom chrome window vs a window with no border style.
In Visual Studio, the XAML designer is showing the custom title bar in the content area, and the actual content area controls aren't visible. When I compile and run it, everything looks correct.
One other side problem was I can't seem to get the Command binding on the titlebar buttons correct. I tried binding them to the appropriate SystemCommands but I'm not sure what I'm doing wrong there either. So instead I just added click event handlers and do the code there. Was just trying for a XAML only solution for that. The Click event handlers work correctly.
Below is my XAML. At the end of the XAML is a basic Grid with a TextBlock that says "I should be visible!" but it isn't in the designer.
Also attached (if I have the permissions to do so) is a screenshot of what the designer looks like in my Visual Studio. As you can see the controls I placed in the custom title bar are clearly visible. You'll also see in the screenshot that the default windows title bar is also visible.
Can anyone point me in the right direction as to why my designer isn't WYSIWYG?
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ChromeWindowTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="Window1"
Title="Window1"
Width="800"
Height="450"
Background="#252525"
Foreground="White"
mc:Ignorable="d">
<WindowChrome.WindowChrome>
<WindowChrome CornerRadius="0"
GlassFrameThickness="0,0,0,1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="True" />
</WindowChrome.WindowChrome>
<Window.Resources>
<local:WindowStateToMarginConverter x:Key="WindowStateToMarginConverter" />
<local:WindowStateToVisibilityConverter x:Key="WindowStateToVisibilityConverter" />
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontFamily"
Value="Lucida Sans Unicode" />
<Setter Property="FontSize"
Value="12 pt" />
<Setter Property="Margin"
Value="3,0" />
</Style>
<Style x:Key="CaptionButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="#F79721" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MinimizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
</Style>
<Style x:Key="MaximizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=0}" />
</Style>
<Style x:Key="RestoreButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=2}" />
</Style>
<Style x:Key="CloseButtonStyle"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Template>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Background}">
<StackPanel Height="32"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=WindowState,
Converter={StaticResource WindowStateToMarginConverter}}"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Icon_Click"
WindowChrome.IsHitTestVisibleInChrome="True">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Button.Template>
<Image Width="32"
Height="32"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Icon}"
WindowChrome.IsHitTestVisibleInChrome="True" />
</Button>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Title}" />
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding Path=SubTitle}" />
</StackPanel>
</StackPanel>
<Button x:Name="btn"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Click="btn_Click"
Content="Placeholder"
WindowChrome.IsHitTestVisibleInChrome="True" />
<StackPanel HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button x:Name="MinimizeButton"
Click="MinimizeButton_Click"
Style="{DynamicResource MinimizeButtonStyle}" />
<Button x:Name="MaximizeButton"
Click="MaximizeButton_Click"
Style="{DynamicResource MaximizeButtonStyle}" />
<Button x:Name="RestoreButton"
Click="MaximizeButton_Click"
Style="{DynamicResource RestoreButtonStyle}" />
<Button x:Name="CloseButton"
Click="CloseButton_Click"
Style="{DynamicResource CloseButtonStyle}" />
</StackPanel>
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
</Grid>
</ControlTemplate>
</Window.Template>
<Grid Margin="0,35,0,0">
<TextBlock Text="I should be visible!" />
</Grid>
I figured it out by accident.
In case anyone else happens across this post with a similar problem.
The following bit of code was wrong:
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
The correct code is either just an empty ContentPresenter or the MSDN example for ChromeWindow of:
<ContentPresenter Content="{TemplateBinding Content}" />
No binding seemed to work fine as well.
Also, my original code above, I should probably have the content presenter as the first item in the Grid so that content doesn't obscure the title bar. I had there originally, but I moved it to the last entry to see if the reason I was seeing only the title bar was because of z-order.

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>

How to Navigate to another page when click on layout in app.xaml.cs page?

How to Navigate to another page when click on arrow in the pushpin layout?
App.xaml page code:
<Application.Resources>
<Style x:Key="MenuItemsStyle" TargetType="sltkit:MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sltkit:MenuItem">
<StackPanel>
<TextBlock Text="{Binding Name}"
TextWrapping="Wrap"
Margin="24,0"
FontSize="26"/>
<TextBlock Text="{Binding Description}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<TextBlock Text="{Binding DatetimeAdded}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<Image Source="/MyBuddies;component/Images/decline.png" Height="20" Width="20" Margin="200,0" Stretch="Fill" Name="imgDecline" >
</Image>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MenuStyle" TargetType="sltkit:ContextMenu">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="8" Margin="24"
BorderBrush="Green" BorderThickness="2">
<Border.Background>
<LinearGradientBrush
StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White"
Offset="0.0"/>
<GradientStop Color="LightBlue"
Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<ItemsPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
in mainpage.xaml
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin
Background="Blue"
Location="{Binding Location}" Tap="Pushpin_Tap">
<sltkit:ContextMenuService.ContextMenu>
<sltkit:ContextMenu IsZoomEnabled="False">
<sltkit:MenuItem Style="{StaticResource MenuItemsStyle}"/>
</sltkit:ContextMenu>
</sltkit:ContextMenuService.ContextMenu>
</my:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
tap on pushpin displaying description .Need to place one arrow in that layout when click on that pass some values to another page.how to acheive this?please tell me...
It is not a good practice to write some UI code in App.xaml. App.xaml and App.xaml.cs are intended for handling the app lifetime events like Launching, Closing, Activated and Deactivated events and for sharing some global data.
If you still want to use, then in the code behind you can use the following code to Navigate to another page from App.xaml
(Application.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/AnotherPage.xaml", UriKind.RelativeOrAbsolute));

How to place images inside image in grid?

I need to place images side by side and need to place one small image icon below the each image.please help me how to design ?any samples please let me know..
How to place userimage inside one small image dynamically based on condition..please help me..
I made simple prototype for you. I can't make whole screen for you. Here are the basic things as I got from your comments and screenshot. Please see XAML and screenshot below:
<ListBox Name="lstImages" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0,0,0,-15" />
<Setter Property="Margin" Value="2"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Height="100" Width="110" Source="{Binding BigImageSource}" VerticalAlignment="Top"/>
<Image Height="10" Width="10" Source="{Binding SmallImageSource}" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-35,10,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
</Grid>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firstimage" />
<Image Source="Secondimage" />
</Stackpanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firsticon" />
<Image Source="Secondicon" />
</Stackpanel>
</StackPanel>
But here you have to make some changes to the icon stackpanel like setting some margin, inorder to make it aligned to the actual images.
This is just an alternative, you can also use Grid's as answered by nucleons
If you want to show your images in listbox then wrap this way in wrap panel and you can set direction of wrappanel as well. Wrappanel is found in silverlight toolkit of windows phone 7.
<ListBox Name="lstImages">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="-15" />
<Setter Property="Margin" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<stackpanel>
<Image Source="Your image" />
<Image Source="Small image" />
</stackpanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and bind this listbox with your collection of data.

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