[Unity] VisualStateManager

Post Reply
 
User avatar
Scherub
Topic Author
Posts: 141
Joined: 06 May 2014, 20:53
Contact:
Contact Scherub

[Unity] VisualStateManager

08 Sep 2014, 03:02

Hello,

I just came across another few problems. I tried to style a button and add some animations. Doing this using triggers worked fine, but not when I tried to use the suggested VisualStateManager. Unfortunately I'm not really that familiar with the VisualStateManager as I'm more used to triggers. But I looked up some examples and made some smaller changes to my xaml to get it working but unfortunately with a few issues.

1. I have to add another parent element such as a Grid where I have to add the VisualStateManager (VSM) elements to. If I add the VSM elements inside the border element it won't animate anything. But according to this MS example it could also be inside. But this is just a minor annoyance.

2. A bit more annoying is that I'm not allowed to use neither a StaticResource nor a DynamicResource for the To-Proper of the ColorAnimation. It then comes up with the following error message:
Code: Select all
Exception: Loading Assets/Resources/Gui/Views/Main/MainView.xaml
'.?AV?$BoxedValueImpl@VColor@Drawing@Noesis@@@Boxing@Core@Noesis@@' is not a valid value for the property 'To'
Noesis.Error.Check () (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisError.cs:60)
NoesisGUISystem.Noesis_LoadXAML (System.IntPtr& root, System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:314)
NoesisGUISystem.Load[FrameworkElement] (System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:90)
NoesisGUISystem.LoadXaml[FrameworkElement] (System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:34)
NoesisGUIPanel.OnEnable () (at Assets/Plugins/Proton/Gui/Noesis.Lib/NoesisGUIPanel.cs:149)
Following parts of the xaml I use:
Code: Select all
	<Style TargetType="Button">
		<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
		<Setter Property="Background" Value="{DynamicResource ControlBackgroundBrush}" />
		<Setter Property="Foreground" Value="{DynamicResource ControlForegroundBrush}" />
		<Setter Property="HorizontalAlignment" Value="Stretch" />
		<Setter Property="VerticalAlignment" Value="Stretch" />
		<Setter Property="HorizontalContentAlignment" Value="Center" />
		<Setter Property="VerticalContentAlignment" Value="Center" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="Button">
					<Grid>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualStateGroup.Transitions>
									<VisualTransition To="Normal" GeneratedDuration="0:0:0.25" />
									<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.25" />
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Normal" />
								<VisualState x:Name="MouseOver">
									<Storyboard>
										<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red" />
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Pressed" />
								<VisualState x:Name="Disabled"/>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Border x:Name="Border" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"
								Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
						</Border>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
Top
 
User avatar
sfernandez
Site Admin
Posts: 3222
Joined: 22 Dec 2011, 19:20

Re: [Unity] VisualStateManager

10 Sep 2014, 11:46

1. I have to add another parent element such as a Grid where I have to add the VisualStateManager (VSM) elements to. If I add the VSM elements inside the border element it won't animate anything. But according to this MS example it could also be inside. But this is just a minor annoyance.
In the example you linked, the VSM is set in the root element (a Border) of the ControlTemplate, as expected. Is not working for you this way? I tried setting the VSM in the root Border and is working for me (see the code in the next answer).
2. A bit more annoying is that I'm not allowed to use neither a StaticResource nor a DynamicResource for the To-Proper of the ColorAnimation. It then comes up with the following error message:
Code: Select all
Exception: Loading Assets/Resources/Gui/Views/Main/MainView.xaml
'.?AV?$BoxedValueImpl@VColor@Drawing@Noesis@@@Boxing@Core@Noesis@@' is not a valid value for the property 'To'
Noesis.Error.Check () (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisError.cs:60)
NoesisGUISystem.Noesis_LoadXAML (System.IntPtr& root, System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:314)
NoesisGUISystem.Load[FrameworkElement] (System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:90)
NoesisGUISystem.LoadXaml[FrameworkElement] (System.String xamlFile) (at Assets/Plugins/Proton/Gui/Noesis.Lib/Core/NoesisGUISystem.cs:34)
NoesisGUIPanel.OnEnable () (at Assets/Plugins/Proton/Gui/Noesis.Lib/NoesisGUIPanel.cs:149)
It's a bug, please report it in our bugtracker. Will be fixed as soon as possible.

Meanwhile you can use ColorAnimationUsingKeyframes instead of ColorAnimation. The following is working for me:
Code: Select all
<Grid.Resources>
        <Color x:Key="RedColor">#FFFF8080</Color>
        <SolidColorBrush x:Key="ControlBorderBrush" Color="Gray"/>
        <SolidColorBrush x:Key="ControlBackgroundBrush" Color="LightGray"/>
        <SolidColorBrush x:Key="ControlForegroundBrush" Color="Black"/>
        <Style TargetType="Button">
          <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
          <Setter Property="Background" Value="{StaticResource ControlBackgroundBrush}" />
          <Setter Property="Foreground" Value="{StaticResource ControlForegroundBrush}" />
          <Setter Property="HorizontalAlignment" Value="Stretch" />
          <Setter Property="VerticalAlignment" Value="Stretch" />
          <Setter Property="HorizontalContentAlignment" Value="Center" />
          <Setter Property="VerticalContentAlignment" Value="Center" />
          <Setter Property="Template">
             <Setter.Value>
                <ControlTemplate TargetType="Button">
                  <Border x:Name="Border"
                        Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                     <VisualStateManager.VisualStateGroups>
                     <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                           <VisualTransition To="Normal" GeneratedDuration="0:0:0.25" />
                           <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.25" />
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="MouseOver">
                           <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource RedColor}"/>
                              </ColorAnimationUsingKeyFrames>
                           </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed" />
                        <VisualState x:Name="Disabled"/>
                     </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                  </Border>
                </ControlTemplate>
             </Setter.Value>
          </Setter>
       </Style>
    </Grid.Resources>
Top
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests