Change the background in ListPicker´s FullMode in WP7? - windows-phone-7

Anyone knows how to easily change the background in ListPicker´s FullMode? Do I need to set a style to be able to do that? I´ve tried that, but can´t find the right place to set the background... If it is a style that needs to be used, where exactly in that style can I set the background? Any help would be highly appreciated :)
Here is the standard Style for the ListPicker:
<Style TargetType="toolkit:ListPicker">
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="2">
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</Border>
<Popup x:Name="FullModePopup">
<Border Background="{StaticResource PhoneChromeBrush}"> <!-- Popup.Child should always be a Border -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Content="{TemplateBinding FullModeHeader}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
HorizontalAlignment="Left"
Margin="24 12 0 0"/>
<ListBox
x:Name="FullModeSelector"
Grid.Row="1"
ItemTemplate="{TemplateBinding ActualFullModeItemTemplate}"
FontSize="{TemplateBinding FontSize}"
Margin="{StaticResource PhoneMargin}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/> <!-- Ensures all containers will be available during the Loaded event -->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

There is no way to do this through templating.
The only way to do this is by changing the source of the control. (You'll need to change the Style for TargetType="controls:ListPicker".)
Specifically, you'll ned to change the contents of the FullModePopup.

I was wondering this same thing.
While there is no way of directly changing the background color of the ListPicker, it does follow along with the color of the PhoneChromeBrush resource, and thus you can override the color of all of those in your app to change the color of this background.
For example:
((SolidColorBrush)App.Current.Resources["PhoneChromeBrush"]).Color = Colors.Cyan;

Related

How to place a ContextMenu in a ListBox

I am trying to place a ContextMenu within the DataTemplate of my ListBox. The ListBox is placed within a PivotItem. For some reason, the ContextMenu does not show up with an item in the ListBox is pressed. I am unsure of the error since nothing shows in the Error List or while debugging.
MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property ="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" 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" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:PivotItem Header="recent">
<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8"
SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
ItemContainerStyle="{StaticResource MyStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu">
<toolkit:MenuItem Header="share" Tap="shareContextMenuItem_Tap"/>
<toolkit:MenuItem Header="favorite" Tap="favoriteContextMenuItem_Tap"/>
<toolkit:MenuItem Header="set as start screen" Tap="setAsStartScreenContextMenuItem_Tap"/>
<toolkit:MenuItem Header="delete" Tap="deleteContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</phone:PivotItem>
Also, is Tap the best event handler method to use within each of the ContextMenu item?
why not use
<ListBox.ContextMenu>
<ContextMenu>...
</ListBox.ContextMenu>
Since my ListBox has its own custom style, I placed the contextmenu under where the image binding occurs.
Under the closing tag of VisualStateManager..
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</Border>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu">
...
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Touchable area around control

Some controls in Windows Phone 7 have touchable area around, if you touch not exactly in control, but in this area, the event is still raising from the control (I don't know how to name this area correctly, but can show it in screenshot). I have a custom slider with range selection ability, but it's too hard to touch to the slider thumb and move it. Increasing a thumb is undesireable. How can I add touchable area to slider thumbs to ease positioning of them? Here is a XAML of slider:
<Style TargetType="local:RangeSlider">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:RangeSlider">
<Border Padding="{TemplateBinding Padding}"
>
<Grid>
<Rectangle Fill="#FFCCCCCC" VerticalAlignment="Center" Margin="2.5,0,2.5,0" Height="12" StrokeThickness="0" />
<Border x:Name="SelectedRangeBorder"
Margin="0" Height="12">
<Grid>
<Grid.Resources>
<Style x:Key="EndThumbStyle" TargetType="Thumb">
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCD0000" Offset="0"/>
<GradientStop Color="#FFCD0000" Offset="0.375"/>
<GradientStop Color="#FFCD0000" Offset="0.375"/>
<GradientStop Color="#FFCD0000" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="Black" Width="12" Height="12" Margin="-3,-4,-5,-4">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" Background="#FFCCCCCC" BorderBrush="{TemplateBinding BorderBrush}" Width="12" Height="12">
<Grid Margin="0" Width="12" Height="12" d:IsHidden="True">
<Border x:Name="BackgroundAnimation" Opacity="0" Background="Black"/>
<Rectangle x:Name="BackgroundGradient" StrokeThickness="0" Fill="Black"/>
</Grid>
</Border>
<Rectangle x:Name="DisabledVisualElement" Fill="Black" IsHitTestVisible="false" Opacity="0" Margin="0" StrokeThickness="0" Width="12" Height="12"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FFCCCCCC" StrokeThickness="0" Margin="0" IsHitTestVisible="false" Opacity="0" Width="12" Height="12"/>
<StackPanel Orientation="Horizontal" Margin="0" MaxHeight="10" Width="12" Height="12">
<Rectangle Width="12" Fill="Black" Height="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Rectangle Fill="Black" Width="12" Margin="1,-5,0,0" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Thumb x:Name="RangeCenterThumb"
Grid.Column="1"
Cursor="Hand"
Margin="0"
BorderThickness="0" Width="Auto" Height="12" Foreground="#FFCD0000" Background="#FFCD0000"
>
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="#FFCD0000" Height="12">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
<Thumb x:Name="RangeStartThumb"
Cursor="SizeWE"
Width="12"
Style="{StaticResource EndThumbStyle}"
BorderThickness="{TemplateBinding BorderThickness}" Height="12" Foreground="Black" Background="Black" BorderBrush="Black"
/>
<Thumb x:Name="RangeEndThumb"
Grid.Column="2"
Cursor="SizeWE"
Width="12"
Style="{StaticResource EndThumbStyle}"
BorderBrush="Black" Height="12" Foreground="Black" BorderThickness="0"
/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks.
There is nothing 'magic' about the touchable area of the various framework controls. They just have elements that occupy a reasonable amount of screen real-estate and handle touch events they they receive. You can increase your hit-test area by changing the template of your Thumb to increase its size, but only make a small portion of the template visible.

cannot centre align password in passwordbox in WP7

Im not able to centre align password in a PasswordBox in Windows Phone. The centre align is disabled. Is there any method by which we can align the text to the centre?
I tried setting of the verticalcontentalignment and the horizontalcontentalignment to center but it does not have any effect. Or is it possible to give a spacing between the border of the password box and the password.
Alfah
You can edit the control template to achieve that effect:
<phone:PhoneApplicationPage
x:Class="PhoneApp3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate
x:Key="PhoneDisabledPasswordBoxTemplate"
TargetType="PasswordBox">
<Border
x:Name="ContentElement"
BorderThickness="0"
Margin="{StaticResource PhonePasswordBoxInnerMargin}"
Padding="{TemplateBinding Padding}" />
</ControlTemplate>
<Style
x:Key="PasswordBoxStyle1"
TargetType="PasswordBox">
<Setter
Property="FontFamily"
Value="{StaticResource PhoneFontFamilyNormal}" />
<Setter
Property="FontSize"
Value="{StaticResource PhoneFontSizeMediumLarge}" />
<Setter
Property="Background"
Value="{StaticResource PhoneTextBoxBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource PhoneTextBoxForegroundBrush}" />
<Setter
Property="BorderBrush"
Value="{StaticResource PhoneTextBoxBrush}" />
<Setter
Property="BorderThickness"
Value="{StaticResource PhoneBorderThickness}" />
<Setter
Property="SelectionBackground"
Value="{StaticResource PhoneAccentBrush}" />
<Setter
Property="SelectionForeground"
Value="{StaticResource PhoneContrastBackgroundBrush}" />
<Setter
Property="Padding"
Value="2" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="PasswordBox">
<Grid
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="CommonStates">
<VisualState
x:Name="Normal" />
<VisualState
x:Name="MouseOver" />
<VisualState
x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="EnabledBorder">
<DiscreteObjectKeyFrame
KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="DisabledBorder">
<DiscreteObjectKeyFrame
KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="FocusStates">
<VisualState
x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="EnabledBorder">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="EnabledBorder">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState
x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="EnabledBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="{StaticResource PhoneTouchTargetOverhang}">
<Border
x:Name="ContentElement"
HorizontalAlignment="Center"
BorderThickness="0"
Margin="{StaticResource PhonePasswordBoxInnerMargin}"
Padding="{TemplateBinding Padding}" />
</Border>
<Border
x:Name="DisabledBorder"
BorderBrush="{StaticResource PhoneDisabledBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="Transparent"
Margin="{StaticResource PhoneTouchTargetOverhang}"
Visibility="Collapsed">
<PasswordBox
x:Name="DisabledContent"
HorizontalAlignment="Center"
Background="Transparent"
Foreground="{StaticResource PhoneDisabledBrush}"
Password="{TemplateBinding Password}"
PasswordChar="{TemplateBinding PasswordChar}"
Template="{StaticResource PhoneDisabledPasswordBoxTemplate}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<!--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">
<PasswordBox
VerticalAlignment="Center"
Style="{StaticResource PasswordBoxStyle1}" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>

How to style a button through code

I'm trying to give a style I made in blend to a button that generates in the code. I tried the following but it doesn't seem to work. I also can't find any solutions online.
Here is the code.
private void createBtn()
{
Button btn = new Button();
btn.Name = buttonName;
btn.Style = popUpStyle;
btn.Margin = new Thickness(20);
btn.Content = "Close";
btn.Click += new RoutedEventHandler(btn_Click);
btn.Visibility = System.Windows.Visibility.Visible;
Canvas.Children.Add(btn);
}
And the xaml.
<Style x:Name="popUpStyle" TargetType="Button">
<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 PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="popUpStyleCT" TargetType="Button">
<Grid Background="Transparent" Height="150" Width="200">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#FFC2C2C2" Margin="0,15,0,0"/>
<Rectangle Fill="#FF313197" Height="15" Stroke="Black" VerticalAlignment="Top" Opacity="0.25"/>
<Rectangle Fill="#FFE20303" HorizontalAlignment="Right" Height="15" Stroke="Black" VerticalAlignment="Top" Width="30" Opacity="0.25"/>
<TextBlock HorizontalAlignment="Right" Height="15" TextWrapping="Wrap" Text="X" VerticalAlignment="Top" Width="14" FontSize="13.333" Margin="0,0,5,0"/>
<Rectangle Fill="#FF4D4A4A" Height="22" Margin="50,0,44,8" VerticalAlignment="Bottom" Stroke="Black"/>
<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="0,12,0,34">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="-3,2,73,0" Foreground="Black" FontSize="13.333" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Border>
<TextBlock Height="15" TextWrapping="Wrap" Text="Close" VerticalAlignment="Bottom" FontSize="13.333" Margin="85,0,81,12" Foreground="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think this answer on SL forum is what you've been searching for.

How to make multiple buttons with different backgrounds from one template in Expression Blend 4

I made a simple button template from the rectangle with "Make into control../Button" command. Now, I need several buttons from that template but each button must have different background image. I tried to do that in Blend4 but when I change the button background, button holds to a template background (or none, whichever is set in template), ignoring the image I have set for that specific button.
Button Template:
btnMenu (No brush)
-rectangle (No brush)
-[ContentPresenter] (some text)
I apreciate any advice.
Style:
<Style x:Key="btnStyleMenuHome" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="btnMenu" Width="90" Height="70" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.Background>
<ImageBrush Stretch="None"/>
</Grid.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(TileBrush.Stretch)" Storyboard.TargetName="rectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Stretch>Uniform</Stretch>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" RadiusY="5" RadiusX="5" StrokeThickness="0" Width="90" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle.Fill>
<ImageBrush Stretch="None" ImageSource="images/someImage.png"/>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Bottom" Margin="7,0" d:LayoutOverrides="Width" Height="25" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<ImageBrush Stretch="None"/>
</Setter.Value>
</Setter>
</Style>
Have a look at Custom UserControl Property used by child element

Resources