Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The visual state manager has a related limitation: it can not animate properties set with a binding. So you are just trying to do something that can't be done.</p> <p>What you can do is duplicate the elements and use opacity to do the transition. The following shows how you would do this with the VSM and opacities:</p> <p>Given a custom control TwoColorBox with dependency properties</p> <pre><code> Color ColorOne Color ColorTwo </code></pre> <p>and with visual states:</p> <pre><code> ColorOne ColorTwo </code></pre> <p>The following control template will do as you want without transparency bleed-through</p> <pre><code>&lt;ControlTemplate TargetType="{x:Type view:TwoColorBox}"&gt; &lt;Grid Background="{TemplateBinding Background}"&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="ColorStates"&gt; &lt;VisualStateGroup.Transitions&gt; &lt;VisualTransition GeneratedDuration="0:0:1"/&gt; &lt;/VisualStateGroup.Transitions&gt; &lt;VisualState x:Name="ColorOne"/&gt; &lt;VisualState x:Name="ColorTwo"&gt; &lt;Storyboard&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderTwo"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="1"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;Border x:Name="borderOne" BorderThickness="{TemplateBinding BorderThickness}"&gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="{Binding ColorOne, RelativeSource={RelativeSource TemplatedParent}}"/&gt; &lt;/Border.BorderBrush&gt; &lt;/Border&gt; &lt;Border x:Name="borderTwo" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0"&gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="{Binding ColorTwo, RelativeSource={RelativeSource TemplatedParent}}"/&gt; &lt;/Border.BorderBrush&gt; &lt;/Border&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload