We Keep Coding

Xaml parsing failed. Visual Studio 2013 'Windows.UI.Xaml.Markup.XamlParseException' occurred in Sicuro.exe

I'm developing windows phone 8.1 application. I have map screen. this screen was working perfect but now I'm getting this exception on this screen just.
this.InitializeComponent();
on this I'm getting exception 'Windows.UI.Xaml.Markup.XamlParseException'.
I could not get any solution about this. please help me to resolve this. for further information see attachment.
here is my Xaml code.
<Page.Resources>
<Thickness x:Key="PhoneBorderThickness">2.5</Thickness>
<FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
<FontWeight x:Key="PhoneButtonFontWeight">Semibold</FontWeight>
<x:Double x:Key="TextStyleLargeFontSize">18.14</x:Double>
<Thickness x:Key="PhoneButtonContentPadding">9.5,0,9.5,3.5</Thickness>
<x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double>
<x:Double x:Key="PhoneButtonMinWidth">109</x:Double>
<Thickness x:Key="PhoneTouchTargetOverhang">0,9.5</Thickness>
<SolidColorBrush x:Key="ButtonDisabledBackgroundThemeBrush" Color="Transparent"/>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/>
<Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="ms-resource:/Files/Assets/App_images/drawable_xhdpi/check-in#2x.png" Stretch="Uniform"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush Stretch="Uniform"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="ms-appx:/Assets/App_images/drawable_xhdpi/check-in#2x.png" Stretch="Uniform"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{ThemeResource PhoneTouchTargetOverhang}">
<Border.Background>
<ImageBrush ImageSource="Assets/App_images/drawable_xhdpi/check-in#2x.png" Stretch="Fill"/>
</Border.Background>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Foreground>
<ImageBrush ImageSource="Assets/App_images/drawable_xhdpi/check-in#2x.png" Stretch="Uniform"/>
</ContentPresenter.Foreground>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Margin="0,0,0,0">
<AppBarButton x:Name="Home_Button" Label="HOME" Icon="Home" Click="Home_button_click">
<!--<AppBarButton.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/details.png"/>
</AppBarButton.Background>-->
</AppBarButton>
<AppBarButton x:Name="Message_Button" Label="MESSAGE" Icon="Message" Click="Message_button_Click"/>
<AppBarButton x:Name="Map_Button" Label="MAP" Icon="Map" Click="Map_button_Click"/>
<AppBarButton x:Name="Settings_Button" Label="SETTING" Icon="Setting" Click="Setting_button_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Grid>
<Grid x:Name="Main_bg_grid" Background="#FF204371">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Sicuro"
FontSize="26" FontWeight="SemiBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<!--<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/App_images/drawable_xhdpi/blur_bg.png"/>
</Grid.Background>-->
<Maps:MapControl x:Name="Mymap" MapServiceToken="wu0BD4oAAvgN_rRNqXG7xg" HorizontalAlignment="Center" VerticalAlignment="Top" ScrollViewer.HorizontalScrollBarVisibility="Visible" Height="520" Width="400" Margin="0,0,0,0" ZoomLevel="24" />
</Grid>
<Grid Grid.Row="1" Width="240" Height="80" Background="Transparent"
VerticalAlignment="Bottom" Margin="0,0,0,40">
<Button x:Name="Check_in_button" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="0" Click="Check_In_Button_Click" Style="{StaticResource ButtonStyle1}">
<Button.Background>
<ImageBrush ImageSource="Assets/App_images/drawable_xhdpi/check-in#2x.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</Grid>
<Grid Grid.Row="1" VerticalAlignment="Top" Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="92"/>
<ColumnDefinition />
<ColumnDefinition Width="92"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Assets/App_images/drawable_xhdpi/mylocation_btn.png" Tapped="My_Location_Button_Tapped"></Image>
<!--<Image Grid.Column="2" Source="Assets/App_images/drawable_xhdpi/direction_btn.png"></Image>-->
</Grid>
<!--<Image x:Name="location_mark" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"
Source="Assets/App_images/drawable_xhdpi/location_marker_ic.png" Width="136" Height="102"/>-->
<ProgressBar x:Name="progressBar" Grid.Row="1"
IsIndeterminate="True"
Maximum="100" Value="30"
Height="10"
Width="400" VerticalAlignment="Center"/>
</Grid>
</Grid>
Here is Call Stack..
Sicuro.exe!Sicuro.Map.InitializeComponent() Line 44 C#
Sicuro.exe!Sicuro.Map.Map() Line 70 C#
Sicuro.exe!Sicuro.Sicuro_XamlTypeInfo.XamlTypeInfoProvider.Activate_7_Map() Line 200 C#
Sicuro.exe!Sicuro.Sicuro_XamlTypeInfo.XamlUserType.ActivateInstance() Line 502 C#
[Native to Managed Transition]
[Managed to Native Transition]
Sicuro.exe!Sicuro.Dashboard_Screen.Map_button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) Line 259 C#

Zoomlevel value of mapscontrol should be between 1 to 20

Toggle Switch color Windows Phone 8

I'm creating an app where on my main page I have a list with a ToggleSwitch control on each row but the control doesn't appear on the phone emulator. The XAML for the ToggleSwitch control is as below:
<toolkit:ToggleSwitch x:Name="ToggleSwitch" IsChecked="false" Content="Content Goes here" Checked="switch_Unchecked" Unchecked="switch_Unchecked" BorderBrush="black" Background="Black" Width="200"/>
When I click on that code, it shows me that:
So I believe that the control with BorderBrush=black and Background=Black is at the right place but it doesn't appear...
May somebody helps me with that ?

What's the color of your Grid Background color? There might be some problem with that too. Try applying the following style for the Toggle Switch.
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:ToggleSwitch Margin="12,0" Content="Live Update" Background="White" Foreground="Black" Style="{StaticResource FixedToggleSwitchStyle}"/>
</Grid>
And the style is,
<Style x:Key="FixedToggleSwitchButtonStyle" TargetType="toolkitPrimitives:ToggleSwitchButton">
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Opacity="{TemplateBinding Opacity}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SwitchBottom"/>
<ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ThumbCenter"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05" To="Unchecked"/>
<VisualTransition GeneratedDuration="0:0:0.05" To="Checked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
<Grid x:Name="SwitchTrack" Width="89">
<Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="34">
<Rectangle x:Name="SwitchBackground" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Height="20" VerticalAlignment="Center" Width="77">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation"/>
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="3">
<Border BorderBrush="{TemplateBinding Background}" BorderThickness="4"/>
</Border>
</Grid>
<Border x:Name="SwitchThumb" BorderBrush="{TemplateBinding Background}" BorderThickness="4,0" HorizontalAlignment="Left" Height="38" Margin="-4,0" Width="28">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation"/>
</Border.RenderTransform>
<Border x:Name="ThumbCenter" BorderBrush="{TemplateBinding Foreground}" BorderThickness="2" Background="{TemplateBinding Foreground}"/>
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FixedToggleSwitchStyle" TargetType="toolkit:ToggleSwitch">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="12,5,12,42">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" IsTabStop="False" Margin="-1,0,0,0" Opacity="{TemplateBinding Opacity}" VerticalAlignment="Bottom"/>
<ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="-1,1,0,-7" Opacity="{TemplateBinding Opacity}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="{TemplateBinding Background}" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="{TemplateBinding SwitchForeground}" VerticalAlignment="Bottom" Style="{StaticResource FixedToggleSwitchButtonStyle}" Foreground="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Change your Background color and Foreground color as per your needs in Toggle Switch.

Have either one of these property, Background or the BorderBrush.
Why don't you try it this way?
xaml:
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
OnContent="On" OffContent="Off"
Toggled="ToggleSwitch_Toggled"/>
private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
// Add code to perform some action here.
}
Have a look at this too. Is that the one you're using from the Toolkit or what?
Hope it helps!

LongListSelector with list item selection style

I am working on Windows Phone 8 and i have Longlist selector with few item in it.
I am using the below code for highlighting the selected item in the list box.But i want the same effect to be achieved for LongListSelector.
How to do it ?
<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property ="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="ListBoxItem" Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderThickness="0,0,0,1" BorderBrush="Black">
<Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#FFFFFF">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I try your code, but the LongListSelector control display a list of selectable items with a mechanism for users to jump to a specific section of the list. This is the sample code.
But if you want achieved the effect like ListBox, you can set the template
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:LongListSelector">
<Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Seleced">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ViewportControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

Customizing selected ListboxItem

I have a ListBox (actually, i have a Telerik's RadJumpList, but afaik it is inherited from ListBox) with custom ItemContainerStyle. Each item contains a rectangle (tile) and 2 strings. So far, it works okay by default: when i'm selecting an item, color of strings is changing, and rectangle has const color.
<DataTemplate x:Key="DataTemplate1">
<Grid Margin="0,0,12,12">
<Rectangle
x:Name="SlotTile"
Width="99" Height="99" Fill="Gray"/>
<StackPanel Grid.Row="0">
<TextBlock
FontWeight="Black"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="{Binding Title, Converter={StaticResource ToUpperConverter}}" />
<TextBlock
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="{Binding Information}" />
</StackPanel>
</Grid>
</DataTemplate>
What i want to do now is to customize selected item: tile's color should be changed, while color of the strings should be the same.
I'm trying to set a custom style, using VisualStateManager, but i have no idea how to get rectangle's and string's color.
<Style x:Name="MySlotStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation
Storyboard.TargetName=""
Storyboard.TargetProperty=""
/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unelected">
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So, the question is how to set DataTemplate's properties from the Style.
EDIT: uploaded a sample: http://1drv.ms/1cJrjZ4
EDIT2: i extracted (and modified a bit) a style from checkbox: http://pastebin.com/2JV7d5We
They are describing the control inside of the ControlTemplate.
So, i planned to get rid of DataTemplate and move everything to the Style.Template.ControlTemplate. Now, when i'm trying to create a Template binding to a new property (color of the rectangle), it says "the member fill is not recognized".
<Style x:Name="TestStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Margin="0,0,12,12">
<VisualStateManager.VisualStateGroups>
****
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SlotTile" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Description" Storyboard.TargetProperty="TextForeground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BlackBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle
x:Name="SlotTile"
Width="99" Height="99"
Fill="{TemplateBinding Fill}"/>
<TextBlock
x:Name="Description"
Foreground="{TepmlateBinding TextForeground}"
Text="{Binding Title}" />
****
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You should edit a copy of the ItemContainerStyle style and put your grid that acts as your container inside it. Then you can edit the VisualState.Selected storyboard and set the target as your Rectangle and the TargetProperty as Fill.
Here is the XAML code for the ItemContainerStyle:
<Style x:Key="ItemContainerCustomStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SlotTile">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="0,0,12,12">
<Rectangle
x:Name="SlotTile"
Width="99" Height="99" />
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: you could even simplify it by using the Border container element from the default style. Thus you can remove the Grid and Rectangle elements.
<Style x:Key="ItemContainerCustomStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Width="99" Height="99" x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Can't you set those properties by name?
<ColorAnimation
Storyboard.TargetName="SlotTile"
Storyboard.TargetProperty="Fill"
...
/>
How to customize the WP7 ListBox Selected Item | Part1
How to customize the WP7 ListBox Selected Item | Part2

Interactiv HubSection Header in Windows Store App - Custom Control or build in function?

I am working on Windows Store App project usinc C#/Xaml. The apps main pages uses a Hub Control. Each HubSection has header. Some section use just plane Text but other sections should have interactive headers. This is no problem at all:
<HubSection Header="Plain Header 1">
...
</HubSection>
<HubSection IsHeaderInteractive="True" Header="Interactive Header 2">
...
</HubSection>
When IsHeaderInteractive is true the Header works like a button the interaction is indicated by a chevron in the title:
Interactiv Header 2 >
As far as I can see this the only way of interaction the SDK provides. But I have seen other section headers in other apps. Some use a chevron that does not point to the right but down to indicate that some kind of dropdown menu will open:
Interactiv Header 2 v
Other Headers show some kind of subtitle after the chevron:
LARG TITLE > small subtitle
Are these custom styles are there any SDK functions to get these other headers?
If custom styles are use, does anyone know how they work/look like?

yes, you need to change the ControlTemplate for the HubSection. Right-click on the HubSection in the Designer in Visual Studio or Blend. From the ContextMenu choose "Edit Template->Edit a copy".
You receive the following Style that sets the ControlTemplate:
<Page.Resources>
<Style x:Key="HubSectionStyle1" TargetType="HubSection">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="40,40,40,44"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Border.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPointerOverForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="IsHeaderInteractiveMarker">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="IsHeaderInteractiveStates">
<VisualState x:Name="HeaderInteractive">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IsHeaderInteractiveMarker">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="HeaderNonInteractive"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FlowDirectionStates">
<VisualState x:Name="LeftToRight"/>
<VisualState x:Name="RightToLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="IsHeaderInteractiveMarker">
<DiscreteObjectKeyFrame KeyTime="0" Value=" "/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" VerticalAlignment="Center"/>
<TextBlock x:Name="IsHeaderInteractiveMarker" AutomationProperties.AccessibilityView="Raw" FontFamily="{ThemeResource SymbolThemeFontFamily}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight" Text="This is the marker" Visibility="Collapsed" VerticalAlignment="Center"/>
</StackPanel>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-5" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Border.Resources>
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
<Button x:Name="HeaderButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}"/>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="2"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Look in the ControlTemplate. There's a TextBlock with the name "IsHeaderInteractiveMarker". I've changed the Text to "This is the marker". Now the header shows this text for interactive headers instead of ">". You can just set the text to an empty string "" or exclude the TextBlock for your requirements. If you do the latter one, don't forget to also exclude the Storyboard-Animations for the IsHeaderInteractiveStates-Group.
And see the HubSection, how it references the Style with the custom ControlTemplate via StaticResource-Markup Extension. If you want the Standard-Behaviour on other HubSections, just don't set the Style-Property to the StaticResource. courtsey of Thomas Claudius Huber for helping me out.