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?
Related
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.
I would like to hide a TextBlock based on the pages Visual State. I use the VisualStateManager to change states wich works fine. But my code for hiding the TextBlock somehow does not.
Additional question: if two states share the same instructions (like Narrow and Snapped), is there a way not to write the same ObjectAnimationUsingKeyFrames-tags again, so the amount of code to maintain gets reduced? Thanks
<TextBlock x:Name="Title" FontSize="20" FontWeight="SemiLight" Margin="12,0,0,1"
Text="{Binding TitleTextBlockText}" VerticalAlignment="Center">
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's window size -->
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FullScreenLandscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Filled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Collapsed
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Narrow">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="Title">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
Visibility.Collapsed
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</TextBlock>
If you want to do this (e.g. in a template of a custom control), you shall wrap the textbloc into grid. You cannot animate an object like this because the visualstatemanager cannot be inside of the object which will be animated by the visualstatemanager itself.
In the control's generic template, something like this:
<ControlTemplate TargetType="{x:Type local:NumericField}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="ValidationStates">
<VisualState Name="Good">
<!-- do your things -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ValidationBorderPart"
BorderBrush="Black"
BorderThickness="1">
<TextBox x:Name="ValuePart"
Foreground="Black"
BorderBrush="Transparent"
BorderThickness="0"
Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:NumericField}},Path=Representation, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
</Border>
</Grid>
</ControlTemplate>
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>