I'm creating a button using a spritesheet in xaml by repositioning the translateX and translateY values of the button.
What I would like to do is change the translateX and translateY value on the state change, I'm sure this is possible in xaml but under blend it would allow me to change those x and y values as it says they are computed values (i don't want those values tweening, just changing upon hover)
Here's the example of the current single state button.
<Button Content="test" HorizontalAlignment="Center" Height="57" VerticalAlignment="Center" Width="294" d:LayoutOverrides="VerticalAlignment">
<Button.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="R" Opacity="1" StrokeThickness="0" Visibility="Visible">
<Rectangle.Fill>
<ImageBrush ImageSource="/Project;component/wp7_buttons.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" >
<ImageBrush.Transform>
<CompositeTransform TranslateX="-558" TranslateY="0"/>
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
<Button.Style>
<StaticResource ResourceKey="ButtonStyle1"/>
</Button.Style>
</Button>
How do I do this? I need to be able to bind each state to a property which will include the x and y translate values and also the ImageSource.
you have to work with VisualStates like below
in blend you cand edit a button template copy and you will see all its VisualStates.
so you just have to change Storyboard.TargetName and Storyboard.TargetProperty to match with your ImageBrush CompositeTransform :)
<ControlTemplate TargetType="Button">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
<VisualTransition To="Pressed" />
<VisualTransition From="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0" />
<DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0.25" />
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
Related
I am experimenting with the radio button control template from MahApps.Metro.
My App.xaml looks the same as in http://mahapps.com/guides/quick-start.html
I copied the control template via VS context menu, my window looks like this:
<controls:MetroWindow x:Class="MahAppsRadioButtonControlTemplateWrapTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow" Height="350" Width="525">
<controls:MetroWindow.Resources>
<Style x:Key="RBStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource LabelTextBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource ContentFontSize}"/>
<Setter Property="FontFamily" Value="{DynamicResource ContentFontFamily}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="6,0,0,0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<!-- Uncomment the line below to break the radio button -->
<!-- <Grid> -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftCol" Width="18"/>
<ColumnDefinition x:Name="RightCol" Width="*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="hover"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabled"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Checked1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="focused"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PART_CHECKBOX">
<Rectangle Fill="{DynamicResource TransparentWhiteBrush}" Margin="-6,0"/>
<Ellipse x:Name="normal" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="1" Stroke="{DynamicResource CheckBoxBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="hover" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource CheckBoxMouseOverBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="pressed" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="focused" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="Checked1" Fill="{DynamicResource HighlightBrush}" Height="10" Opacity="0" Width="10"/>
<Ellipse x:Name="disabled" Fill="{DynamicResource SemiTransparentWhiteBrush}" Height="18" Opacity="0" StrokeThickness="1" Width="18"/>
</Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<!-- Uncomment the line below to break the radio button -->
<!-- </Grid> -->
<ControlTemplate.Triggers>
<Trigger Property="controls:ControlsHelper.ContentDirection" Value="RightToLeft">
<Setter Property="Padding" Value="0,0,6,0"/>
<Setter Property="Width" TargetName="LeftCol" Value="*"/>
<Setter Property="Width" TargetName="RightCol" Value="18"/>
<Setter Property="Grid.Column" TargetName="PART_CHECKBOX" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPresenter" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:MetroWindow.Resources>
<Grid>
<StackPanel>
<RadioButton Style="{DynamicResource RBStyle}">Foo</RadioButton>
<RadioButton>Bar</RadioButton>
<RadioButton>Baz</RadioButton>
</StackPanel>
</Grid>
</controls:MetroWindow>
If I wrap the outer Grid of the control template within another Grid control, the radio button works normally but the checked mark never shows.
Can someone explain me what's going on?
So like I was saying, it's an interesting quirk whereby the element (in this case your transition targets) that's in a ControlTemplate will only inherit from the outer-most parent FrameworkElement. Which, is one of those things that can really confuse ya when you're sitting there thinking "wtf? all I did was add a damn Grid around it..." Right?
For more info checkout this doc article about Changing the Visual Structure of a Control and you can get the full explanation.
Anyway, glad it helped!
I have created animation on button content in XAML Page, in windows silverlight phone 8. But when I moved my project to windows phone 8.1 RT.. animation of button content is not working as it was working in silverlight phone project.
I have added below code which I have implemented in silverlight phone 8..
Interaction.Behaviors code part is not working.. I have added behaviour sdk for windows phone 8.1 in reference...
I have also added below three using for interactivity..
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:im="using:Microsoft.Xaml.Interactions.Media"
XAML
<Button x:Name="MenuButton"
Style="{StaticResource PageNumberButtonStyle}"
Height="180"
Margin="10"
Width="240"
Click="MenuButtonClick"
Content="{Binding CurrentPage.Number}"
FontFamily="ms-appx:///Fonts/sesamewkshpregular.ttf#SesameWkshp Rg"
HorizontalAlignment="Left"
RenderTransformOrigin="0.5,0.5"
VerticalAlignment="Bottom">
<Button.RenderTransform>
<CompositeTransform x:Name="MenuButtonScale"
ScaleX="0"
ScaleY="0" />
</Button.RenderTransform>
</Button>
<Page.Resources>
<ResourceDictionary>
<!-- PageNumberButtonStyle -->
<Style x:Key="PageNumberButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused" />
</VisualStateGroup>
<VisualStateGroup x:Name="PageNumberStates">
<VisualState x:Name="BindingChanged">
<Storyboard>
<DoubleAnimation From="1"
To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="contentPresenter" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<ImageBrush Stretch="None" ImageSource="/Resources/Assets/Book-Solid.png" />
</Grid.Background>
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,20,0,0"
RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<CompositeTransform x:Name="contentTransform"
ScaleX="0.5"
ScaleY="0.5" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<i:Interaction.Behaviors>
<ic:DataTriggerBehavior Binding="{Binding CurrentPage.Number}">
<im:ControlStoryboardAction ControlStoryboardOption="Play">
<im:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation From="0"
To="1"
Duration="0:0:1"
Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="contentTransform">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="2"
Springiness="5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0"
To="1"
Duration="0:0:1"
Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="contentTransform">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut"
Oscillations="2"
Springiness="5" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</im:ControlStoryboardAction.Storyboard>
</im:ControlStoryboardAction>
</ic:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="150" />
</Style>
Please, guide me here for this problem..
Try adding a ComparisonConditionType and Value attributes to the DataTriggerBehaviour as it needs a condition for comparison on a particular Value.
To start, it's important to note that I'm doing this in Silverlight, so Style Triggers aren't available.
I'm trying to create a custom Button template. I've avoided doing this in the past, so this is my first attempt at something like this. I want a button that is essentially transparent. When I mouseover, the button border should appear. When I click, I want the background to darken a bit. The trouble I'm having right now is getting the BorderBrush to change on mouseover.
Note, in my test code here I'm starting with the borderbrush as visible and trying to make it invisible on the mouseover, which is the opposite of what I'm trying to accomplish in the end.
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderBrush" />
Was my best attempt, but I just get an error saying 'Cannot resolve TargetName BorderBrush.'
Also, how would I start with my LinearGradient for my borderbrush defined like it is, but just with the opacity set to 0 (so that I can set it to 1 when I want it to appear).
Below is my entire template:
<Style x:Key="ButtonStyle_menu" TargetType="Button">
<Setter Property="Foreground" Value="#000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" >
<Setter.Value>
<!--Value="#FF000000"-->
<LinearGradientBrush>
<GradientStop Color="#FFA3AEB9" Offset="0" />
<GradientStop Color="#FF8399A9" Offset="0.375" />
<GradientStop Color="#FF718597" Offset="0.375" />
<GradientStop Color="#FF3C4400" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<!--<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderBrush" />-->
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(frameworkelement.Opacity)" Storyboard.TargetName="BorderBrush" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Background>
<SolidColorBrush Opacity="0" />
<!--
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF707070" Offset="0"/>
<GradientStop Color="#FF666666" Offset="0.49"/>
<GradientStop Color="#FF5e5e5e" Offset="0.51"/>
<GradientStop Color="#FF535353" Offset="1"/>
</LinearGradientBrush>-->
</Border.Background>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="2" Opacity="0.5"/>
</ContentPresenter.Effect>
</ContentPresenter>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have something similar, a white border appears on mouseover, the pressed visual state can be easily modified to show a darker background on button click.
<Style TargetType="Button" x:Name="ButtonStyle4">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Canvas Height="15" VerticalAlignment="Top" Margin="0,0,21,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FFFFF6F6" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Stroke="{StaticResource MenuBarBackground}" Width="84" Height="25">
<Rectangle.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock x:Name="UnderlineTextBlock" Text="Manage Apps" Margin="2,0,21,0" TextDecorations="Underline"/>
<!--<ContentPresenter Name="btnManageApps" Height="25" Width="170" RenderTransformOrigin="0.5,1.367" Content="Manage Apps"/>-->
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource MenuBarButtonTextColour}"/>
</Style>
Hope this helps!
I have something similar.
The problem you were having with "Cannot resolve TargetName BorderBrush" is because you don't have an element named BorderBrush. The TargetName should refer to the name of an element, not a property name.
This is example is pretty basic and just changes one property of one element ...
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="24" MinHeight="24" MaxHeight="24">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="rectangle" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="rectangle" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Margin="0" StrokeThickness="0" RadiusX="5" RadiusY="5" Height="24" MinHeight="24" MaxHeight="24" Opacity="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF00A4CB" Offset="0"/>
<GradientStop Color="#FF006BA2" Offset="0.991"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="textBlock" Margin="10,5,10,6" TextWrapping="Wrap" Text="{TemplateBinding Content}" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This changes the opacity property, of the element named 'rectangle' to 1 when the button receives a mouseover or pressed event.
Within the ControlTemplate just add whatever elements you want (give them a name) and then hook up the events to change the properties on those elements. .
If you want to animate the border thickness of the Background element, try this:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.BorderThickness)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
I've been messing around trying to change this red border around the LoopingSelector in code, and in Blend. I just can't figure out how to do it. Here's a picture so you have an idea of what I'm talking about.
<Grid Grid.Row="1" Margin="12,0,12,0" toolkit:TurnstileFeatherEffect.FeatheringIndex="1">
<Grid.Resources>
<DataTemplate x:Key="KiloTemplate">
<Grid Background="DarkBlue">
<TextBlock Text="{Binding}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="kg" FontSize="24" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
</Grid.Resources>
<toolkitPrimitives:LoopingSelector x:Name="loopingSelectorStarost" Margin="12" Width="128" ItemSize="128,128" ItemTemplate="{StaticResource StarostTemplate}" ManipulationStarted="loopingSelector_ManipulationStarted">
<toolkitPrimitives:LoopingSelector.DataSource>
<local:NumberDataSource Privzeti="18" Minimum="13" Maximum="99" />
</toolkitPrimitives:LoopingSelector.DataSource>
</toolkitPrimitives:LoopingSelector>
</Grid>
EDIT: Here's the soulution, thanks to Chris. W. I copied the style from the Generic.xaml file in the Phone Toolkit samples. I changed the <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> in the Selected Visual State. Here's the code:
<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
<VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="3" BorderBrush="{StaticResource PhoneSubtleBrush}">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<ContentPresenter x:Name="contentPresenter" CacheMode="BitmapCache"/>
</ContentControl>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Start by finding the template for it, a quick solution search for TargetType="primitives:LoopingSelectorItem" should expose it pretty quick or you could likely get to it in Blend.
Once you have the template you'll just locate the Border or Rectangle object in the template that's causing that border.
However that may not even be necessary if the property is bound to the template already. Can you set something like BorderBrush directly to it? I'd have to load something up to look so I'm just guessing at this point.
Hope this helps.
I'm using a thumb control in a windows store app to represent a draggable image. However whenever I hover over it it changes into a grey box, and when I drag it it turns into a darker grey box. When release it reverts to the image I gave it as a background. Is there any way to turn off or customize away the highlight/focus and dragging appearances?
EDIT:
Here is my XAML for the control. I have it inside a grid but don't do anything with that.
<Canvas x:Name="PART_background" Background="White" Height="140" Width="20">
<Thumb x:Name="PART_drag" Canvas.Left="0" Width="20" Height="50">
<Thumb.BorderBrush>
<SolidColorBrush Color="Black" Opacity="0"></SolidColorBrush>
</Thumb.BorderBrush>
<Thumb.Background>
<ImageBrush x:Name="PART_image" Stretch="None" AlignmentX="Center" />
</Thumb.Background>
</Thumb>
</Canvas>
You need to edit the template - it works best in Blend, then change the visual state animations. The default template has a few Border elements and for various visual states (PointerPressed, PointerOver) - it animates Opacity of these borders. Here's the extracted template. You can simply remove the Storyboards to get rid of the visual feedback.
<Page
x:Class="App132.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App132"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="ThumbStyle1" TargetType="Thumb">
<Setter Property="Background" Value="{StaticResource ThumbBackgroundThemeBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="BorderBrush" Value="{StaticResource ThumbBorderThemeBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ThumbPointerOverBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPointerOverBackgroundThemeBrush}" Opacity="0"/>
<Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ThumbPressedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPressedBackgroundThemeBrush}" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Thumb HorizontalAlignment="Left" Height="270" Margin="170,230,0,0" VerticalAlignment="Top" Width="390" Style="{StaticResource ThumbStyle1}"/>
</Grid>
</Page>