I am working on a Universal Windows App.
I want to change the Style of my button under different states but I cant figure out (I'm new to this)
Here is my visual state group
<VisualStateGroup x:Name="StartStopTimer">
<VisualState x:Name="Start">
</VisualState>
<VisualState x:Name="Stop">
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
I have two styles setup called StartButtonStyle and StopButtonStyle.
So I want to change the buttons style to StopButonStyle in the Stop visual state and StartButtonStyle in the Start visual state.
How do I do this? I tried with record on in Expression Blend but it doesn't apply anything to my visual state.
Here you are:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="StartStopTimer">
<VisualState x:Name="Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StartButtonStyle}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Stop">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource StopButtonStyle}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Of course you need to have defined your styles in the resources, for example in page resources.
Please don't forget to mark my reply as an answer.
Related
When I change the Orientation property of a HubControl using the VisualStateManager in my Windows 8.1 app, the app crashes with an unhandled Win32 exception.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Hub" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Horizontal"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Hub" Storyboard.TargetProperty="Orientation">
<DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
When I change other properties of the HubControl, such as its Visibility, it works like I would expect. Am I doing something wrong or is there a reason why the Orientation property can't be set this way?
I'm trying to underline the content of a button using VisualStates but I'm failing to do so.
Ideally, I'd love to do it the same way I can change the FontWeight of the content,
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
But the following is not valid,
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontStyle" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Underline"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
I've read about the Underline class and how you can use it with Runs but found no way to do this using VisualStates.
Is there a way of doing this? Or any other way to toggle an underlined effect on the content of a button on PointerOver?
Thanks in advance.
"But the following is throwing an exception" isn't helpful. It might help to know WHICH Exception and WHICH error message.
However, to underline something you don't set "FontStyle" but "TextDecorations" to "Underline"
How to use the "Snap View" process in Win 8 application?
I have tried many no.of times using different blogs but couldn't find the right solution for it.
Can anyone help me with the following conditions:
What is the coding for snap view?
How to implement this?
I made the application but got stuck in this "Snap View".
Thanks in Advance.
Snap View is a built-in Windows feature.
As long as your user's screen resolution is at least 1366 by 768, they will be able to activate snap view.
SnapView is really easy to implement. Default stuff like back button and Page title is already implemented but you can add your custom elements to the list too.
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource SnappedBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
Let's work with above code:
Element you want to change: Storyboard.TargetName="backButton"
Property of the element you want to change: Storyboard.TargetProperty="Style"
New value of the property: Value="{StaticResource SnappedBackButtonStyle}"
So all we are doing is, for backButton change the Style property to {StaticResource SnappedBackButtonStyle}.
You can do same for any other element.
Here is code from the file:
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape" />
<VisualState x:Name="Filled" />
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I have ListView that I am using for both my SnapView and Portrait view. However I'd like to change some items of my item template in both those views. The VisualStateManager seems like the ideal place to do this, but I can't figure it out.
Here is my ListView XAML:
<ListView x:Name="SampleListView" ItemsSource="{Binding Samples}" Visibility="Collapsed">
<ListView.ItemTemplate>
<DataTemplate>
<local:SampleBlock SampleText="{Binding ElementName=pageRoot, Path=DataContext.SampleText, Mode=TwoWay}"
Height="70" Width="Auto" Margin="5" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to change the Height and Margin of my SampleBlock control using the page's VisualStateManager. Here is my visual state manager that shows and hides my ListView:
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SampleListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SampleGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SampleListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SampleGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Is there a way to access the item template from the page's VisualStateManager, or should I be attacking this from a different angle?
You cannot change the properties of the DataTemplate but you can change the actual ItemTemplate of the ListView to a specific template to be used for snapped view
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedListViewItemTemplate}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
I have a custom button.
I want that when it goes to "Disabled" state, it's Opacity property should swap to 65% or so, over a time frame of a around a second, when it leaves the "Disabled" state, it should turn the Opacity back to 100% (animated).
How is this done?
How is this done?
This short video answered all my question in minutes!
Here is all I needed:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="Disabled"/>
<VisualTransition From="Disabled" GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0.55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>