I try to style a wpf datepicker in my ideas but have some trouble with deactivating the inner border.
When i hover over the datepicker or click into it, a light blue border appears around the input area. You can see it clearly on the screenshot.
How can i deactivate this border?
Override the template of the DatePickerTextBox and remove the visual state transitions that make the blue border appear:
<DatePicker>
<DatePicker.Resources>
<Style TargetType="DatePickerTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
<Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
<Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
<ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2"/>
</Border>
<ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
And no, there is no easier way :)
You can modify the default DatePicker ControlTemplate to give the control a unique appearance. For more information, see DatePicker Styles and Templates.
Related
I am working on Windows Phone 8 application, I have List box with Items in it, for the items i have used DataTemplate, now i have a style as well which i have applied to List as ItemContainerStyle.
Basically this is how it is , i have a list item with default color say grey,now when i tap on that item the color grey should change to red, so that it indicates to user that he has selected that item.
My code works but its not applying as background, instead its being applied as foreground.
List box :
<ListBox Name="listBox"
HorizontalAlignment="Stretch"
ItemTemplate="{StaticResource DefaultTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>
Data template:
<DataTemplate x:Key="DefaultTemplate">
<Border
Background="#e3e8f0"
Margin="0,2,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid Width="Auto"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock
Text="{Binding Path=Text}"
HorizontalAlignment="Center"
Padding="10,25,10,25"
TextWrapping="Wrap"
MinHeight="80"
VerticalAlignment="Center"
TextAlignment="Center"
Style="{StaticResource TextStyle}"
Foreground="Black"/>
</Grid>
</Border>
</DataTemplate>
ListBoxItemStyle:
<Style x:Key="ListBoxItemStyle" 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="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeave">
<Storyboard>
<DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="fillColor" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You don't need to override ControlTemplate for that. Override system highlight brush for your ListBox by placing it under ListBox resources if all you want is to change highlight brush for your listBox.
<ListBox>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Red"/>
</ListBox.Resources>
</ListBox>
Update: Okay, since you didn't specify explicitly that you are using Silverlight which is a subset of WPF framework, not all of its API is the same.
For windows phone you want to do something like this
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="White"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="YellowGreen"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="border" Orientation="Horizontal">
<CheckBox x:Name="checkBox" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=IsSelected, Mode=TwoWay}" DataContext="{TemplateBinding
IsSelected}" Visibility="{Binding Converter={StaticResource
BooleanToVisibilityConverter}}"
HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}"/>
<ContentControl x:Name="ContentContainer" ontentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Foreground="{TemplateBinding
Foreground}" HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding
VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then set the style for the ListBox
<ListBox x:Name="databoundListBox" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Multiple"/>
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'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>
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" />
I guess this is a quite simple (read: very simple) question, but I have been using quite some time to figure it out.
I have a class, PresentationItem, which is derived from ContentControl. I am working in Expression Blend, which gives a problem with the height and width of the PresentationItem.
When I insert a PresentationItem, it automatically sizes too full grid (800x600). Then, when I insert for instance a textblock, the textblock sizes to something small. I think this is the normal and expected behaviour.
What I want, is the presentationitem and Content child (for instance, a textblock) has the same size. It is annoying to work with 2 different sizes when I have several of these. So either the content inside the presentationitem should be stretched, or the presentationitem should resize to fit its children.
(Also, using something else than a ContentControl is not an option).
Right now I have the following style:
<Style TargetType="local:JSLDPresentationItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:JSLDPresentationItem">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PresentationStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="FocusedPresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LocalLayoutPanel" />
<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="AfterPresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="BeforePresenting">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="UnfocusedPresenting"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LocalLayoutPanel" Margin="0,0,0,0" VerticalAlignment="Top" >
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What to change and where? I guess it is some "*" or "auto" at the right place!
Try setting the HorizontalContentAlignment and VerticalContentAlignment of your derived control to Stretch.