create image style in xaml - coding-style

I don't know why I'm having so much trouble doing this, it shouldn't be hard, but I must be Blend-incompetent. Can someone give me the xaml for an image style where the image is at 60% opacity, on mouseover fades in to 100, mouseout back to 60% and onclick glows for a 0,2 sec.
Or just tell me how to do in blend?
thank you
Solution turned out to be simple enough:
<Style x:Key="FadeImageButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Width="16" Height="16">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="Normal"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You are certainly not incompetent. Images do not have states, so a style is not the answer.
The only styles you can create for images are for one fixed state, so you could add the 60% opacity, but not much else.
Your options are:
Create EnterImage and LeaveImage
storyboards that are played with ControlStoryboardAction behaviours (on MouseEnter and MouseLeave events).
Create a custom behaviour and attach that to the images.
Place the image in another control that has states (maybe a button)
Place the image in a user control with an image property
Create a custom control
The simplest is option 1, but it requires attaching several properties to each image so more drags and clicks to author them.
If you let us know which option you prefer I may be able to post an example.

Related

Blend Animation Playing Issue

I don't know if I named the question right but here it is
First of all I am very new to Blend and never used it before in my life. I decided to make a simple animation today and things happened but not as expected.
I'm animating a button and the animation is just a simple 360 degrees flip on the Y axis. I created the animation for a specific button. It worked exactly how I wanted with this code
TiltAnimation.Begin();
However when I tried to create a ControlTemplate with this animation this happened. I need to click and hold the button in order for the animation to finish. I set the animation to play on a specific state: 'Pressed' (to be more specific it was pressed -> * which I suppose means 'from pressed state to any state'). Am I doing something wrong or am I missing something
Note: I'm experimenting on the windows phone platform.
If you need any code tell me in the comments
EDIT:Here is the XAML code from the page and from the App.xaml
Page code:
<Button Grid.Column="1"
Height="60"
Width="60"
BorderThickness="1"
Background="White"
Opacity="0.8"
Template="{StaticResource ButtonControlTemplate1}"
Click="PlayButton_Click">
</Button>
App.xaml code:
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
<Grid x:Name="grid">
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" GeneratedDuration="0">
<VisualTransition.GeneratedEasingFunction>
<BackEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
<Storyboard>
<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="image" Source="/Assets/Icons/Previous.png">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
<Ellipse Height="Auto" Width="Auto" Stroke="White" StrokeThickness="4"/>
</Grid>
</ControlTemplate>

Changing background image of Listbox Items

I want to toggle the background of my listbox items based on the selection status.
I initially hard-coded the background in my ItemTemplate like so:
<StackPanel.Background>
<ImageBrush ImageSource="PodImages\podstate-Clip.png" />
</StackPanel.Background>
I attempted to go into Blend to set the background based on the visual states (selected vs not selected), but couldn't figure out Blend and I still don't understanding the styling markup. Can someone help me out with the style markup or guide me a bit in Blend on where I can set this?
edit:
ok, I've found how I can add a list item to a list box and set the background based on a visual state in blend, but I can't figure out how to do this for the datatemplate items
edit:
Ok, I think what I want do do in a style would be something like this (but this crashes my app)
I modified
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clipped.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
here is the style in total:
<Style x:Key="ListBoxItemStyle2" 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">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clip.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="ContentBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="PodImages/podstate-Clipped.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentControl.Background>
<ImageBrush Stretch="Fill" x:Name="ContentBackground" ImageSource="PodImages/podstate-Clip.png"/>
</ContentControl.Background>
</ContentControl>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use the {Binding ResourceName} in your Listbox background, have a look here for some more tips http://www.silverlight.net/learn/data-networking/binding/silverlight-data-binding
alternatively I suggest you search for "Databinding in Silverlight" that will give you tons of information

Visual State for MouseOver doesn't work on WindowsPhone

There is the code I generate the button style. I would like to change the borderbrush to YellowGreen during mouseover, but it seems no effected. Would some to show me what's wrong with the code? There is my code.
<Style x:Key="CustomButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation To="1" Duration="0:00:00.5" Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="1" Duration="0:00:00.5" Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="NormalBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="0" Duration="0:00:00.5" Storyboard.TargetName="HoverBackground" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="1" Duration="0:00:00.5" Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="NormalBackground" CornerRadius="3" BorderBrush="Black" BorderThickness="1" Background="black" />
<Border Name="HoverBackground" Opacity="0" CornerRadius="3" BorderBrush="GreenYellow" BorderThickness="3" Background="Gray" />
<Border Name="PressedBackground" Opacity="0" CornerRadius="8" BorderBrush="Black" BorderThickness="1" Background="Red" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The following code to show how I add the button on the MainPage.xaml.
<Button x:Name="btnCall" Click="btnCall_Click" Grid.Row="0" Grid.Column="1" Content="test"
Style="{StaticResource CustomButtonStyle}" />
Windows Phone does not really have mouse over.
Remember,on the phone, you don't have a mouse. What is it you are trying to do (in other words, what's the equivalent of mouse over you are trying to mimick on the phone?)
[Usually people interact with the emulator through by using the mouse, but of course there is no equivalent on the phone itself, so it doesn't make a whole lot of sense to support it]
A mouse moves a cursor in an undefined area, thus, it needs to stay grounded on a floor to keep track of a location in the screen that increases or decreases according to the created horizontal or vertical delta.
Touch screens in general are designed to pick and choose locations in an area that is already defined. You don't 'seek' a location with a walking mouse, you already 'know' it. And when you move your finger on your screen, it's to trigger gesture events based on a delta, not to move a cursor based on this delta.

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

Windows Phone 7 (WP7) Change a button's background color on click

This seems like a really, really simple problem, but I can't figure it out. The culprit appears to be WP7's default style. It changes the background color to white when a button is clicked, then back to the button's default background.
The problem I have is I want to change the button's background when the button is clicked. I can't find any possible way to do this.
I've tried setting the background in code, but that does nothing. I think it's being overwritten by the default style.
I've tried using a Property Change behavior in Blend, but that has the exact same result.
I've tried creating a new visual state for the button and setting that on click, but that's a little buggy and has a large overhead for the number of buttons I'm dealing with. Also, it didn't work.
I can set other buttons' background on a click event, just not the button being clicked.
This is such an annoying roadblock! I'm sure this is a one line of code kind of answer. :)
What you need to do is create a button template that modifies the Pressed visual state.
In blend, select your button, click the menu item "Object"->"Edit Template"->"Edit a Copy..." and a new template is created. In the States window, select the Pressed visual state in the CommonStates visual state group. Now select ButtonBackground in the object hierarchy and edit the background brush in the Properties window.
I edited the Pressed state's background to be a solid Cyan-ish color and ended up with something like this XAML.
<phone:PhoneApplicationPage ...>
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<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 PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
</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>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Button Content="Button" Style="{StaticResource ButtonStyle1}"/>
</Grid>
</phone:PhoneApplicationPage>
I think getting a reference to the actual background, then changing that might help. Here's a method that will take an instance a button.
private void HighlightButton(Button btnToHighlight)
{
SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;
sBrush.Color = //enter your colour here
btnToHighlight.Background = sBrush;
}
<ControlTemplate x:Key="ButtonNextOver" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetProperty="Background" Storyboard.TargetName="hoverbutton">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="/NhomMua;component/Image/ico_next_over.png"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="hoverbutton">
<Border.Background>
<ImageBrush ImageSource="/NhomMua;component/Image/ico_next.png"/>
</Border.Background>
</Border>
</Grid>
</ControlTemplate>
To change the button background when the button is pressed, I use the templates. As Matt has pointed out, open the project in Blend. Go to the button > Right Click > Edit Template > Edit a copy. A new template for your button would be created and appended at the near beginning of your XAML page.
Now since you need to change the buttons behavior when the button is pressed, you need to change the VisualState. Head over to the "Pressed" visual state and peer into it. This is the "Pressed" visual state.
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF373737" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
Change the value of #FF373737 to anything you desire. You are now set.

Resources