We Keep Coding

Expandable ListViewItem

I'm working on a Universal Windows Application where I have a ListView with a DataTemplate.
I want to make the ListView expandable, when I click (Select) an Item, the selected Item's height would increase with animation. I tried using StoryBoard for that mission but I failed .
I also found this answer and It did what I want but without animation.
This is the ListView :
<ListView Name="lstviewMyMissions" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ItemTemplate="{StaticResource MinimzedTemplate}" IsItemClickEnabled="False" ItemClick="lstviewMyMissions_ItemClick" SelectionMode="Single" SelectionChanged="lstviewMyMissions_SelectionChanged" Visibility="Visible">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
and this is the DataTemplate :
<DataTemplate x:Key="MinimzedTemplate">
<Border Name="tstBorder" BorderThickness="1" Width="380" Height="100" CornerRadius="10" Background="White" FlowDirection="RightToLeft">
<Grid Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Right" Text="{Binding TaskDate}" Style="{StaticResource TextFontFamily}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="1" Source="/Design/Phone/mo3amla_da5leya_icon.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<StackPanel Orientation="Vertical" Grid.Column="3" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Number" Style="{StaticResource TextFontFamily}"/>
<StackPanel Width="15"/>
<TextBlock Text="{Binding TaskNo}" Style="{StaticResource TextFontFamily}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Type" Style="{StaticResource TextFontFamily}"/>
<TextBlock Text="{Binding procedureType}" Style="{StaticResource TextFontFamily}"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Border>
</DataTemplate>
The question is : how can I Increase the ListViewItem's height with animation when the user clicks it ?

Just use visual state manager and set up appropriate states. I managed to achieve this with the following pieces of code:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Rect"
Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="50">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Rect"
Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="25">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Rect"
Height="25"
Background="Transparent"
BorderBrush="Red"
BorderThickness="1">
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this helps.
Best Regards,
Nazar

GroupBox header background not updating when using Visual States

I have a group box that has custom styling on it and I'm trying to create Visual states for it and move to those visual states when a button is hit on my program.
The code below stylizes the groupbox to and changes the header to solid blue
Also be warned still learning code so this code may be messy or poorly done.
<Style TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
BorderThickness="1"
BorderBrush="#3c4a55"
Background="#FF0080D4">
<Label Foreground="White">
<ContentPresenter Margin="0"
ContentSource="Header"
RecognizesAccessKey="True" />
</Label>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState x:Name="Orange">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BackgroundColor"
Storyboard.TargetProperty="Color"
To="{StaticResource CVinYellow}"
/>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition To="Orange" GeneratedDuration="00:00:01"/>
<VisualTransition To="Normal" GeneratedDuration="00:00:01"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
<Border Grid.Row="1"
BorderThickness="1,1,1,1"
BorderBrush="#25A0DA">
<ContentPresenter Margin="1" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code behind is as follows:
private void radioButton_Checked(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(testGroupBox, "Orange", true);
}
When this is ran and the button is clicked the style does not change at all and it produces no errors.
I'm not entirely sure what I am doing wrong at this point, Can you override colors of a custom control with a visual state?

Figured it out with the help of thumbmunkeys.
The VisualStateManager must be the top element. Had to move it so it was below the grid.
<Style TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState x:Name="Orange">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BorderColors"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource CVinYellow}"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="BorderColors"
Grid.Row="0"
BorderThickness="1"
BorderBrush="#3c4a55"
Background="#FF0080D4">
<Label Foreground="White">
<ContentPresenter Margin="0"
ContentSource="Header"
RecognizesAccessKey="True" />
</Label>
</Border>
<Border Grid.Row="1"
BorderThickness="1,1,1,1"
BorderBrush="#25A0DA">
<ContentPresenter Margin="1" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to fullfile text mask in textbox

I am using infragistics controls for masked input. I created my own masked input for IP address and inherent class from XamMaskedInput.
The inherited class looks like:
public class IpMaskedTextBox : XamMaskedInput
{
BrushConverter bc = new BrushConverter();
public IpMaskedTextBox() : base()
{
Background = (Brush) bc.ConvertFrom("#F0FAFF");
BorderThickness = new Thickness(0);
BorderBrush = null;
Padding = new Thickness(5,0,5,0);
FontWeight = FontWeights.Bold;
VerticalContentAlignment = VerticalAlignment.Center;
HorizontalContentAlignment = HorizontalAlignment.Center;
}
// Prevent space character
protected override void OnPreviewKeyDown(System.Windows.Input.KeyEventArgs e)
{
base.OnPreviewKeyDown(e);
switch (e.Key)
{
case Key.Right:
e.Handled = true;
break;
case Key.Left:
e.Handled = true;
break;
}
}
}
and the appearance on xaml:
My question is, how can I full fill the prompt char on whole scope from textbox, that does not have free spaces on right and left.
Here the link to infragistics xamMaskedInput API.
Update:
The result should be like this:
Update 2:
Finally i found the style:
<Style x:Key="MaskedInputStyle" TargetType="igEditors:XamMaskedInput">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="igPrim:XamlHelper.SnapsToDevicePixels" Value="True" />
<Setter Property="SpinButtonStyle" Value="{StaticResource spinButtonStyle}" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="2"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igEditors:XamMaskedInput">
<igPrim:ValidationDecorator x:Name="MainBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_InputTextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91203 - Moved this border to surround the text box below. This is
to fix an issue where if the border thickness is set to a large value, the borders cover the contents. -->
<!--<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0"/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" Margin="1" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>-->
<!-- SSP 10/11/11 TFS91203 - Moved this here from above. See comments above. -->
<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0">
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<!-- SSP 7/11/13 TFS128674 - Added IsInputMethodEnabled binding -->
<Grid>
<igEditorsPrim:MaskedInputTextBox
x:Name="PART_InputTextBox"
Style="{StaticResource maskedInputTextBoxStyle}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
TextAlignment="{Binding HorizontalContentAlignment, Converter={StaticResource horizToTextAlignmentConverter}, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{TemplateBinding Foreground}"
InputMethod.IsInputMethodEnabled="{TemplateBinding InputMethod.IsInputMethodEnabled}"
InputMethod.PreferredImeState="{TemplateBinding InputMethod.PreferredImeState}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
igPrim:XamlHelper.Focusable="{TemplateBinding igPrim:XamlHelper.Focusable}"
IsTabStop="{TemplateBinding IsTabStop}"
/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="PART_SpinButtons" Grid.Column="1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}" Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="spinUp" Style="{TemplateBinding SpinButtonStyle}" ContentTemplate="{StaticResource IncreaseGlyphKey}" >
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinUp" />
</ig:Commanding.Command>
</RepeatButton>
<RepeatButton x:Name="spinDown" Style="{TemplateBinding SpinButtonStyle}" Grid.Row="2" ContentTemplate="{StaticResource DecreaseGlyphKey}">
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinDown" />
</ig:Commanding.Command>
</RepeatButton>
</Grid>
</Grid>
</Border>
</Grid>
</igPrim:ValidationDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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!

How to Create Border around LongListSelector SelectedItem

I would like to create a border around the currently selected item within a LongListSelector, but I am having trouble getting the proper implementation. From referencing http://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444 I have tried to follow the sample code by creating a custom Style to manage the selected item change, although I am trying to place a border around an image instead of a textbox. Also, I do have a custom ItemTemplate as my DataTemplate for my LongListSelector which manages the size of my bound images and controls a required ContextMenu for each item.
For some reason, I am having trouble adapting the sample to place a border around a selected item, but what I have so far is as follows
MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="ItemTemplate">
<!--<Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="3">-->
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
...
<phone:LongListSelector x:Name="Recent" Margin="0"
Style="{StaticResource MyLongListSelectorStyle}"
SelectionChanged="recent_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108"
ItemTemplate="{StaticResource ItemTemplate}"
/>
App.xaml
<Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
<!--<Setter Property="LayoutMode" Value="List"/>-->
<Setter Property="LayoutMode" Value="Grid"/>
<!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--<StackPanel>
<TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>-->
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
MainPage.xaml.cs
private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var s = sender as LongListSelector;
var item = (sender as LongListSelector).SelectedItem;
if (item == null)
return;
// Get item of LongListSelector.
List<UserControl> listItems = new List<UserControl>();
GetItemsRecursive<UserControl>(Recent, ref listItems);
// Selected.
if (e.AddedItems.Count > 0 && e.AddedItems[0] != null)
{
foreach (UserControl userControl in listItems)
{
if (e.AddedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Selected", true);
}
}
}
// Unselected.
if (e.RemovedItems.Count > 0 && e.RemovedItems[0] != null)
{
foreach (UserControl userControl in listItems)
{
if (e.RemovedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Normal", true);
}
}
}
}
public static void GetItemsRecursive<T>(DependencyObject parents, ref List<T> objectList) where T : DependencyObject
{
var childrenCount = VisualTreeHelper.GetChildrenCount(parents);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(parents, i);
if (child is T)
{
objectList.Add(child as T);
}
GetItemsRecursive<T>(child, ref objectList);
}
return;
}
I'm stuck on what to do from here, any ideas?
EDIT** slightly changed implementation but still not working.
MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
<!--<Setter Property="LayoutMode" Value="List"/>-->
<Setter Property="LayoutMode" Value="Grid"/>
<!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<!--<Border x:Name="MyBorder" Background="Transparent">-->
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="brd">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
<!--<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">-->
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Border>
<!--<StackPanel>
<TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>-->
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
...
<phone:LongListSelector x:Name="Recent" Margin="0"
Style="{StaticResource MyLongListSelectorStyle}"
SelectionChanged="recent_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108"
/>
MainPage.xaml.cs
//remains the same

I can't test it rigth now because I'm at work and I only have VS2010 but try changing
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
You need to use an integer.
You are trying to change the thickness of the border using a color.
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
[EDIT]
It seems that LongListSelector don't let us easily template the selected item...
With the solution of Johannes Wanzek https://stackoverflow.com/a/13874389/1408558
I managed to do what you want:
Delete your old xaml and code behind code, and follow these steps.
You need to put those styles on top of your page
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<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>
<Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
<Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBorderBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
</Style>
<Style x:Key="RadioButtonStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
And then use the LongListSelector like this:
<phone:LongListSelector x:Name="Recent" Margin="0"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<ContentControl.Resources>
<Storyboard x:Name="CheckedStoryboard">
<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brd" d:IsOptimized="True"/>
</Storyboard>
</ContentControl.Resources>
<RadioButton x:Name="radioButton" HorizontalAlignment="Stretch" Margin="0,0,0,0" GroupName="A" Background="Black" Style="{StaticResource RadioButtonStyle1}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<eim:ControlStoryboardAction Storyboard="{StaticResource CheckedStoryboard}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<eim:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource CheckedStoryboard}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Border x:Name="MyBorder" Background="Transparent">
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3" BorderBrush="Transparent">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
</Border>
</Border>
</RadioButton>
</ContentControl>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
And here some of the namespaces you may need:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"

Check out my alternative answer here How to highlight the selected item of long list selector in windows phone 8
It shows the example for the background color but could just as easily be adapted for the border color of something
Might not be the ideal way to do it but its simple and clean and works for me