I have a page with content detail.
Currently now is just for single page but my friend want the detail page can be scrolled left and right like flipview control.
I am currently have some difficulties to change the View Model to become FlipView. So I want to using gesture in my content detail page.
How I can achieve flipview animation using the gesture manipulation?
What I mean with flipview animation is when scrolled left or right, I can see the previous or next item.
You can place the controls before or behind your visible item by setting their TranslateX of TraslateTransform and use the Clip proprety of the visible item.
I have build a FlipView-like control that acts like a FlipView but it can loops. Here is the xaml code:
<Style TargetType="local:LoopingBannerControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:LoopingBannerControl">
<Grid x:Name="RootGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#FFF0F0F0" d:DesignWidth="199.667" d:DesignHeight="215.222">
<Grid.Resources>
<Storyboard x:Name="NextStory">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="NextImageBtn">
<EasingDoubleKeyFrame x:Name="NextRightOriTranslateXFrame" KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="CurrentImageBtn">
<EasingDoubleKeyFrame x:Name="NextMiddleOriTranslateXFrame" KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame x:Name="NextMiddleTargetTranslateXFrame" KeyTime="0:0:0.3" Value="-200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="PreviousStory">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="CurrentImageBtn">
<EasingDoubleKeyFrame x:Name="PreviousMiddleOriTranslateXFrame" KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame x:Name="PreviousMiddleTargetTranslateXFrame" KeyTime="0:0:0.3" Value="200"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="PreviousImageBtn">
<EasingDoubleKeyFrame x:Name="PreviousLeftOriTranslateXFrame" KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShowBtnStory">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PreviousBtn">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NextBtn">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousBtn">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NextBtn">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="HideBtnStory">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PreviousBtn">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NextBtn">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousBtn">
<SplineDoubleKeyFrame KeyTime="0" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NextBtn">
<SplineDoubleKeyFrame KeyTime="0" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Clip>
<RectangleGeometry Rect="0 0 200 200"/>
</Grid.Clip>
<Button x:Name="PreviousImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
<Button.RenderTransform>
<CompositeTransform TranslateX="-200"/>
</Button.RenderTransform>
<Image x:Name="PreviousImage" Stretch="UniformToFill"/>
</Button>
<Button x:Name="NextImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
<Button.RenderTransform>
<CompositeTransform TranslateX="200"/>
</Button.RenderTransform>
<Image x:Name="NextImage" Stretch="UniformToFill"/>
</Button>
<Button x:Name="CurrentImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
<Button.RenderTransform>
<CompositeTransform/>
</Button.RenderTransform>
<Image x:Name="CurrentImage" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5"/>
</Button>
<Button x:Name="PreviousBtn" Background="#FFEAEAEA" BorderThickness="0" VerticalAlignment="Stretch" Width="25" Opacity="0" Padding="0" Visibility="Collapsed">
<TextBlock Text="<"/>
</Button>
<Button x:Name="NextBtn" Background="#FFEAEAEA" BorderThickness="0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="25" Padding="0" Opacity="0" Visibility="Collapsed">
<TextBlock Text=">"/>
</Button>
<StackPanel x:Name="IndexIndicatorSP" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Storyboard part is the animation of switching item. You should paste it to your project to see what happens :-)
Related
simple noob question again. I have a windows 8 phone app with a ListBox loaded with ListBoxItems (that are just plain text). I set the foreground color of the text to white in xaml:
<ListBox x:Name="L1" Foreground="white">
Once I invoke the SelectedIndex property of ListBox, the foreground changes to red. It does this whether I set it in xaml or c#. If I try and add code in c# to change the color manually after SelectedIndex has been invoked, it still doesn't work...
tempListBoxItem = listBoxPicType.SelectedItem as ListBoxItem;
tempListBoxItem.Foreground = //some color that isn't red
what is the simplest way to get around this? TIA
It has a simple way to achieve it, you can change the ListBoxItem ControlTemplate. This is the code for details
you can put the style within the resource of the PhoneApplicationPage, change the Selected VisualState
<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.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<!--The selected state, change the value to your color-->
<DiscreteObjectKeyFrame KeyTime="0" Value="Your Color"/>
</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}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ListBox
<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>
Wish this can help you. Thanks
Is there a way to define Storyboard for TargetType Border in XAML Style?
Here is what I am trying to achieve:
<Style x:Key="MyBorderStyle" TargetType="Border">
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroup>
<VisualStateGroup.States>
<VisualState x:Name="Normal">
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashArray">
<DiscreteObjectKeyFrame KeyTime="0" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3, 3"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashOffset">
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</Setter.Value>
</Setter>
</Style>
But this is not working.
I also tried couple of more approaches but couldn't get it to work.
I want to define this style in my MyStyles.XAML and then use it in MainPage.XAML like:
<Border Style="{StaticResource MyBorderStyle}">
Some code...
</Border>
Please help.
Just wrap it in a Grid and define the states there. If you want to reuse it, then wrap it in a UserControl instead. Like this (which works):
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="VisualState0">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="#FF2E00FF" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>5</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<CornerRadius>15</CornerRadius>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="VisualState1">
<Storyboard>
<ColorAnimation Duration="0" To="#FF2EFF00" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF0017FF"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>25,5</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<CornerRadius>45</CornerRadius>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="234" VerticalAlignment="Top" Width="303" Margin="75,75,0,0"/>
</Grid>
Remember, use Blend to define your Visual States.
Read: http://blog.jerrynixon.com/2013/11/windows-81-how-to-use-visual-states-in.html
Best of luck!
Why you need to use it inside Style ?
Just give a name to the Storyboard & declare it under Resources.
<Page.Resources>
<Storyboard x:Name="Bordersb" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_BORDER">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashArray" Storyboard.TargetName="PART_BORDER">
<DiscreteObjectKeyFrame KeyTime="0" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3, 3"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashOffset" Storyboard.TargetName="PART_BORDER">
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Border x:Name="PART_BORDER>
Some code...
</Border>
In code behind you can start your storyboard by
Bordersb.Begin();
Maybe you would need to use DoubleAnimationUsingKeyFrames and EnableDependentAnimation instead?
Actually scratch that. The visual states need to be defined as part of the template and so you simply need to redefine the entire template. Otherwise - yes you'd need to have Storyboards defined in XAML or code behind and run them manually instead of relying on visual states.
Maybe you could define a resource and modify the visual states in code behind at runtime if you really don't want to change the entire template, but that sounds kind of hacky and might be of questionable reliability.
I have created a custom button in my WP app. i want to make it look like a standard windows phone 8 button.
XAML Code
<Grid Name="btnCancle" Height="76" Width="76" Margin="24" ManipulationStarted="btnCancle_ManipulationStarted" ManipulationCompleted="btnCancle_ManipulationCompleted" >
<Ellipse Name="ellipseCancle" Grid.Row="2" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
<Canvas x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
</Canvas>
</Grid>
The code for event handlers
private void btnCancle_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
Brush br = (Brush)Application.Current.Resources["PhoneAccentBrush"];
ellipseCancle.Fill = br;
}
private void btnCancle_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
Brush br = (Brush)Application.Current.Resources["PhoneBackgroundBrush"];
ellipseCancle.Fill = br;
}
My problem is that when i click the button, there is a slight delay before the button acts as the notmal button.( The backgrounc changes to the PhoneAccentColor and back). The background color won't change as soon as i touch it. but after one or 2 attempts it behaves normally. Im writing the code to perform the action for that button in the Tap event handler. but i need to make it behave like a normal button as soon as the user touches it. What am i doing wrong and what can i do to fix it? Please help.. Thanks in advance..
Try using the to change the controltemplate/style of a button. This will allow you change the appearance of the button but keeps all the behaviour a user would expect from a button. one of the great upsides from XAML to be able to do this.
So add a button to your phone page, then on the right of the designer select Document Outline go to your button you want to restyle, right click on the button, under Template choose Edit a Copy.... You now can name the style and ad it to the page resource. Now just bellow the VisualStateManager.Groups you will find the source to draw the button and you could replace it with your code:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ButtonStyle1" 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 PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<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="Fill" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="ButtonBackground" Grid.Row="2" Fill="{TemplateBinding Background}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
<Canvas Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path x:Name="ContentContainer" Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Here is what the button should look like after this, notice the style gets set to the control template you just created.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}"/>
HTH
I am trying to make the slider value to be set only from data binding.I dont want users to be able to change the slider value manually. This is the snippet. any suggestions on how to do it.
<Slider x:Name="Serverslider" Value="{Binding Value}"
/>
Any attribute i am missing?
As wojtek suggests, you can use IsEnabled="False" to disable input from affecting the Slider. You get this:
Now, you have the additional requirement of needing to change the fill color of the Slider. Here you have two options:
Retemplate the Slider and change the "Disabled" visual state to look how you want it. In Blend, right-click the Slider and choose "Edit Template > Edit a Copy". Then, locate the colors you wish to change. Here, these are going to be the fill color, the Thumb Background, and the Thumb BorderBrush for the Disabled state. For example, change the following XAML:
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
to this:
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
Note: Edit the parts marked "Vertical*" if you care about the vertical Slider template.
Example code: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/Slider_RetemplateDisabledState
If all Disabled Sliders in your app look the same, you can override the "theme resources" that are used to draw the Disabled Slider in your app.xaml:
<Application>
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="SliderTrackDecreaseDisabledBackgroundThemeBrush" Color="Green" />
<SolidColorBrush x:Key="SliderThumbDisabledBackgroundThemeBrush" Color="Lime" />
</ResourceDictionary>
Example Code: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/Slider_OverrideDisabledResources
I want to deactivate some buttons when ZoomOutView is active. According to MSDN the name of the VisualStateGroup is "SemanticZoomStates" and the name of the VisualState is "ZoomOutView". So I tried the following:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SemanticZoomStates">
<VisualState x:Name="ZoomInView" />
<VisualState x:Name="ZoomOutView">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="editDocButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="deleteDocButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
When I put the ObjectAnimationUsingKeyFrames-elements into let's say the "Snapped" VisualState (and the appropriate VisualStateGroup) it works, so there shouldn't be a problem with the button names.
Try this, I have changed IsEnabled to (UIElement.IsEnabled)
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SemanticZoomStates">
<VisualState x:Name="ZoomInView" />
<VisualState x:Name="ZoomOutView">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="editDocButton" Storyboard.TargetProperty="(UIElement.IsEnabled)">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="deleteDocButton" Storyboard.TargetProperty="(UIElement.IsEnabled)">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>