Lying exceptions in Blend for Visual Studio - expression-blend

Every once in a while I get compiler exceptions in Blend for Visual Studio. Everything is compiling and working wonderfully, then suddenly BAM! I get compiler errors telling me that objects don't exist in a specific namespace WHEN THEY DO. I have to play with cleaning and rebuilding and closing and reopening Blend for a bout an hour before they go away. My libraries are all up to date and everything is otherwise fine. Does no one else have this happen to them? Please, I want it to stop it is an enormous time killer.
I get the compiler errors in Visual Studio as well.
Thanks.
Updates
For instance,
Error 5 The property 'DesignWidth' does not exist in XML namespace 'http://schemas.microsoft.com/expression/blend/2008'. Line 15 Position 5. C:\MyPath\MyControl.xaml 15 5 EasyBuilder
As far as I know, DesignWidth is does very much exist in that namespace.
The XAML (Not that it will help you any)
<UserControl x:Name="UserControl" x:Class="EasyBuilder.MainControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.ignore.com"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:surface="http://schemas.microsoft.com/surface/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:EasyBuilder"
xmlns:res="clr-namespace:EasyBuilder.Infrastructure.Resources"
xmlns:system="clr-namespace:System;assembly=mscorlib"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<res:MainViewStrings x:Key="LocalStrings" />
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="Main" Source="{StaticResource Locator}"/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="{DynamicResource PageBackgroundBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenSelectionStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.15">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="SelectionClosedState"/>
<VisualState x:Name="SelectionOpenedState">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="OpenFileSelection">
<DiscreteBooleanKeyFrame KeyTime="0" Value="False"/>
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CloseFileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="CloseFileSelection">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OpenFileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="FileSelectionShadow">
<EasingDoubleKeyFrame KeyTime="0" Value="12.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="FileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="450"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FileSelectionControl">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame x:Name="ContentFrame" Margin="0,0,100,0" Grid.ColumnSpan="2" NavigationUIVisibility="Hidden"/>
<Grid x:Name="FileSelection" Grid.Column="1" Width="100" Background="{DynamicResource AsideSectionBackgroundBrush}">
<Border x:Name="FileSelectionShadow" Width="12.5" HorizontalAlignment="Left">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#3F000000" Offset="0"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Button x:Name="OpenFileSelection" Template="{DynamicResource InvisibleButtonTemplate}" HorizontalContentAlignment="Right" Panel.ZIndex="1" Margin="0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="SelectionOpenedState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock TextWrapping="Wrap" Text="{Binding OpenActionText, Mode=OneWay, Source={StaticResource LocalStrings}}" Margin="0,0,23,0" Style="{DynamicResource AsideSectionLabel}"/>
</Button>
<local:FileSelectionView x:Name="FileSelectionControl" d:LayoutOverrides="Width" Opacity="0" DataContext="{Binding Files, Mode=OneWay}"/>
</Grid>
<Button x:Name="CloseFileSelection" Template="{DynamicResource InvisibleButtonTemplate}" IsHitTestVisible="False" Opacity="0" Margin="0" d:IsHidden="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:GoToStateAction StateName="SelectionClosedState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Border x:Name="UserMessage" Background="#BF000000" Visibility="{Binding UserMessenger.IsShowingMessage, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" Grid.ColumnSpan="2">
<Border VerticalAlignment="Center" Style="{DynamicResource UserMessageStyle}" Background="#FFE2E2E2" BorderBrush="{x:Null}" BorderThickness="0" MaxWidth="800" HorizontalAlignment="Center" MinWidth="400">
<Border.Effect>
<DropShadowEffect Opacity="0.5" ShadowDepth="10"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding UserMessenger.MessageText, Mode=OneWay}" Margin="0,0,0,10" HorizontalAlignment="Center" MinHeight="58" Style="{DynamicResource TextBlockBase}"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Border x:Name="OKAction" Style="{DynamicResource ButtonBorderStyle}" Margin="15,0,0,0" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="{Binding UserMessenger.ShowOkButton, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Border.Effect>
<DropShadowEffect Opacity="0.33"/>
</Border.Effect>
<Button Template="{DynamicResource FlatButtonTemplate}" Command="{Binding UserMessenger.CloseCommand, Mode=OneWay}" Margin="0">
<Button.CommandParameter>
<system:String>OK</system:String>
</Button.CommandParameter>
<Image Height="44" Source="Skins/Images/OK.png"/>
</Button>
</Border>
<Border x:Name="CancelAction" Style="{DynamicResource ButtonBorderStyle}" Margin="15,0,0,0" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="{Binding UserMessenger.ShowCancelButton, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Border.Effect>
<DropShadowEffect Opacity="0.33"/>
</Border.Effect>
<Button Template="{DynamicResource FlatButtonTemplate}" Command="{Binding UserMessenger.CloseCommand, Mode=OneWay}" Margin="0">
<Button.CommandParameter>Cancel</Button.CommandParameter>
<Image Height="44" Source="Skins/Images/Cancel.png"/>
</Button>
</Border>
</StackPanel>
</Grid>
</Border>
</Border>
</Grid>
</UserControl>

You need to mark the blend design time namespace as Ignorable or switching between blend and visual studio will not work.
See Getting an error switching back and forth between Blend and VS
Make sure the following is in your XAML namespace declarations
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"

Related

ToolkitExpander must expand slowly in windows phone8

I have a toolkit expander control in windows phone 8 it is working fine .I have to expand the items slowly.and collapse them slowly.What additionally i have to add to expand and collapse slowly
<toolkit:ExpanderView x:Name="Header1" FontSize="22" Foreground="Black" Expanded="Header1_Expanded">
<toolkit:ExpanderView.Header>
<Grid x:Name="GettinghereGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" >
<Image Source="/Assets/Menu/getting-here.png" Margin="8,0,0,0" HorizontalAlignment="Left" Stretch="None"/>
<TextBlock Text="Getting here & around" VerticalAlignment="Center" Margin="10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
<Rectangle Height="2" Grid.Row="1" Fill="#D6D6D6D6" Width="500" />
</Grid>
</toolkit:ExpanderView.Header>
<toolkit:ExpanderView.Items>
<HyperlinkButton Name="Gettingherebutton" Margin="-230,1,0,0" Background="#EBEBEB" Click="Gettingherebutton_Click" >
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting here" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Gettingaroundbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Gettingaroundbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting around" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Factsbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Factsbutton_Click_1">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Facts & essenial info" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Adayoutbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Adayoutbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="A day out" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<UserControl.Resources>
<Style TargetType="toolkit:ExpanderView">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ExpanderView">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/>
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable"/>
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Line">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListBoxItem x:Name="ExpandableContent" Grid.ColumnSpan="2" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/>
<ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="11,0,0,0" Grid.Row="1"/>
<Grid x:Name="ExpanderPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
</Grid>
</ListBoxItem>
<!--<Line x:Name="Line" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="2" Stretch="Fill" Stroke="White" StrokeThickness="3" X1="0" X2="0" Y1="0" Y2="1"/>-->
<ContentControl x:Name="NonExpandableContent" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/>
<Canvas x:Name="ItemsCanvas" Grid.Column="1" Margin="11,0,0,0" Opacity="0.0" Grid.Row="2">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0"/>
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Thnx in advance
After lot of trial and error i got this
By changing the keytime of easout function we are going to expand it # what we need similarly in easin function if we change it collapses slowly
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.95" Value="1"/>

Windows Store Apps 8.1 and VisualStateManager

I am having a difficult time solving a Visual State problem after moving to VS2013 and Windows Store Apps for 8.1. I have an app with a AppBar "About" button that takes the user to the About page. Works just fine. I want a stackpanel on the About page to change orientation when the view changes to Portrait. Been working on this for hours and reading countless websites with exact replicas of this code, but mine will not work. Any ideas?
Here's the C# code on AboutPage.cs:
private void AboutPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Height / e.NewSize.Width >= 1)
{
VisualStateManager.GoToState(this, "Portrait", true);
}
else
{
VisualStateManager.GoToState(this, "DefaultLayout", true);
}
}
Here's the XAML on AboutPage.xaml:
<Page
x:Name="pageRoot"
x:Class="xxxxxxxxxxxxxxxxx.AboutPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxxxxxxxxxxxxxxx"
xmlns:common="using:xxxxxxxxxxxxxxx.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="AboutPage_SizeChanged">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<!--<x:String x:Key="AppName">xxxxxxxxxxxxxxxxxxx</x:String>-->
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid x:Name="pageMainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="pageHeaderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel
x:Name="headerStackPanel"
Grid.ColumnSpan="3"
Background="#FF4617B4"
Orientation="Horizontal" >
<Button
x:Name="backButton"
Margin="39,59,39,0"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock
x:Name="pageTitle"
Style="{StaticResource HeaderTextBlockStyle}"
Grid.Column="1"
IsHitTestVisible="false"
TextWrapping="NoWrap"
VerticalAlignment="Bottom"
Margin="0,0,30,40"
Text="{StaticResource AppName}"/>
</StackPanel>
</Grid>
<Grid
x:Name="pageContentGrid"
Grid.Row="1"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="142*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="372*"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,0,0"
TextAlignment="Center"
Text="About"
FontSize="48"
FontFamily="Segoe UI"/>
<ScrollViewer
BorderThickness="0,2,0,0"
BorderBrush="DarkGray"
Grid.Row="1"
Grid.Column="1"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
Margin="0">
<StackPanel
Margin="40">
<TextBlock
Text="xxxxxxxxxxxxxxxxxx"
FontSize="34" />
<TextBlock
Text="by xxxxxxxxxx"
FontSize="24"/>
<StackPanel
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,6,0,0"
Padding="0,0,0,0"
Text="Website:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="http://www.xxxxxxxxxxxxxx.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="www.xxxxxxxxxxxxxxxxxx.com" />
</StackPanel>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxxxxxxxx#gmail.com" />
</StackPanel>
<TextBlock
Margin="0,30,0,0"
Text="Feedback:"
FontSize="24"/>
<TextBlock
TextWrapping="Wrap"
Margin="0,10,0,10"
FontSize="20" >
Please take a few moments to rate and review my application.
Every little bit of encouragement and/or constructive feedback
is appreciated.
<LineBreak /><LineBreak />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</TextBlock>
</StackPanel>
</ScrollViewer>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
<Rectangle
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
This needs to be highlighted because it's the answer:
Ok, finally... problem solved! The trick was to locate the VisualStateManager XAML block right after the Grid that contains the control you want to modify when changing screen size. I modified the AboutPage XALM block in my original post to show the correct configuration
This is a breaking change from .NET 4.5.1 where you can place the VisualStateManager before the controls that are effected.
Putting the VisualStateManager within the main control in the content of your Page (usually a Grid or a StackPanel) should change the layout of your AppBar. Give it a try.
<Page
...
SizeChanged="Page_SizeChanged">
<Page.BottomAppBar>
<AppBar>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxx#gmail.com" />
</StackPanel>
</AppBar>
</Page.BottomAppBar>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>

Code behind for event Fire on Mainpage rather than UserControl

I have an UserControl which has listbox. I put this UserControl on the Mainpage.xaml. I would like to handl the selected and button click event on Mainpage.xaml.cs rather than on usercontrol.xaml.cs because I will use this UserControl to another page and the respond will be different. How can I do it? Would you provide example or link to me? Thanks in advance.
There is my UserControl:
<UserControl x:Class="CMSPhoneApp.QueueListControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<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"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" BorderBrush="#FF2022BC"/>
<ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Style="{StaticResource ScrollViewerStyle1}" Background="#00E23162">
<ListBox x:Name="lstCall" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="400" SelectionChanged="lstCall_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grdQueue" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="Action_Click" Style="{StaticResource ButtonStyle1}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}">
<Button.Content>
<TextBlock Width="85" Height="70" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
</UserControl>
There is the code to add the UserControl on Mainpage.xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<my:QueueListControl />
</StackPanel>
</Grid>
</Grid>
I am able to bind the data on the lst on MainPage.xaml.cs by the following code:
MyQueue = new List<QueueItem>();
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Open", callNumber = "1" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Responded", callNumber = "2" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Resolved", callNumber = "3" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "transfer", callNumber = "4" });
MyQueue.Add(new QueueItem { summary = "Test1tqeewwewew332233 3233322323 wdqwqwqwqwq", status = "Complete", callNumber = "5" });
test.lst.ItemsSource = MyQueue;
One solution is to use a library such as MVVM Light; it has a Messenger class (tutorial) that you can use to send messages from the UserControl's code behind.
In the MainPage's OnNavigatedTo method register for the UserControl's message and in the 'OnNavigatedFrom` method un-register from listening to the message. You can do the same in the other page where you want to use this UserControl.
The message fired by the UserControl must contain all the relevant information needed for either class to react to it appropriately. Thus, you can keep the control's code-behind decoupled from user interaction logic.
You need to make your UserControl more re-useable by exposing its state and events so that these can be updated / handled by controls that host an instance of your control. See this tutorial for details:
A Simple Pattern for Creating Re-useable UserControls in WPF / Silverlight

Style button doesn't work inside the listbox

I create a usercontorl for listbox. User will go to different page by selecting the textbox inside the buttons. I must use the textbox because the contest need to wrap. I want to change the background color during the clicking. However, the button sytle doesn't work. Would someone can show me the example or link or hint to solve my problem.
The following is my style:
<UserControl.Resources>
<Style x:Key="btnCall" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation To="1" Duration="0:00:00.5" Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.1" Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="1" Duration="0:00:00.1" Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--<Border Name="NormalBackground" CornerRadius="3" BorderBrush="Fuchsia" BorderThickness="1" />-->
<Border x:Name="NormalBackground" BorderThickness="0" />
<Border x:Name="HoverBackground" Opacity="0" CornerRadius="3" BorderBrush="Yellow" BorderThickness="3" Background="Gray" />
<Border x:Name="PressedBackground" Opacity="0" CornerRadius="8" BorderBrush="Black" BorderThickness="1" Background="LightSteelBlue" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
I put the listbox in the grid as belows:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Style="{StaticResource ScrollViewerStyle1}" Background="#00E23162">
<ListBox x:Name="lstCall" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="360" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="70" Style="{StaticResource btnCall}" ClickMode="Press" Click="Detail_Click" >
<Button.Content >
<StackPanel Orientation="Horizontal" Height="65" Width="400">
<Image Source="{Binding Type}" Width="35" Height="35"/>
<TextBlock Width="240" Height="65" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button Width="135" Height="65" ClickMode="Press" Click="Action_Click" Style="{StaticResource btnCall}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}">
<Button.Content>
<TextBlock Width="200" Height="65" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>

Allignment of controls in Datatemplate of listbox in silverlight

I need the following alignment
For that I have created the xaml file as follows,
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox ItemsSource="{Binding Collections}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Icon}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Grid Grid.Column="1" HorizontalAlignment="Right" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.600*" />
<RowDefinition Height="0.400*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding MainTextBlock}" VerticalAlignment="Center" />
<Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.300*" />
<ColumnDefinition Width="0.700*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Value}" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding DateString}" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
but I did not get the as expected result. what should i do for that? sub2 is always left aligned but actually we need it to be Right aligned.
Thanks in advance
dinesh
I think the problem is with the nested grid elements that you're using in your DataTemplate. You can simplify the visual tree and achieve the desired results by using a single Grid that has the column and row definitions and then use the Grid.ColumnSpan and Grid.RowSpan attached properties as shown in the following XAML:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.6*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Image
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="{Binding Icon}"/>
<TextBlock
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding MainTextBlock}"/>
<TextBlock
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding Value}"/>
<TextBlock
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Text="{Binding DateString}"/>
</Grid>
To achieve list box items that stretch the full width of the ListBox you need to add an ItemContainerStyle that sets the HorizontalContentAlignment to Stretch. You can create a copy of the default style in Expression Blend, or use the following:
<Style x:Key="FullWidthItemStyle" 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="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
x:Name="LayoutRoot"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Opacity"
To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
x:Name="ContentContainer"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Resources