Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I encountered a similar issue when developing a <strong>UserControl</strong> for WPF in Expression Blend (Note: if you're developing a <em>custom control</em> instead, see my next section). In that UserControl, I had a child element that I wanted to fade in and grow into existence as an overlay. Like your situation, it made sense in my workflow to first design the overlay element at its "fully grown and visible" state and then shrink it down and set its opacity for a "Hidden" state. In doing this, the overlay is visible in the Base state, but I needed the UserControl's initial state to be the Hidden state. At this point I had three main relevant states: Base, "Hidden" and "Visible" (these last two are a part of a State group).</p> <p><strong>Here's how I solved the initial-state issue</strong>. First I applied a GoToStateAction to the root element (to the UserControl) that is triggered by the Loaded event. It tells the UserControl to go right to the "Hidden" state: </p> <p><img src="https://i.stack.imgur.com/eQmay.png" alt="enter image description here"></p> <pre><code>&lt;i:Interaction.Triggers&gt; &lt;i:EventTrigger&gt; &lt;ei:GoToStateAction TargetObject="{Binding ElementName=userControl}" StateName="Hidden"/&gt; &lt;/i:EventTrigger&gt; &lt;/i:Interaction.Triggers&gt; </code></pre> <p>Second, I made appropriate transition settings in the State Group for the overlay. There are probably several ways of doing this, but here's how I did it. First I set the "Default transition" to a pleasing setting, say .4 seconds. Next, I set the transition time from any element (the star icon in Blend) to this "Hidden" state to be 0 seconds (this allows the above-mentioned GoToStateAction to set the "initial" state without the user knowing any different). Then, I set the transition from the "Visible" state to the "Hidden" state to be an appropriate setting (say .4 seconds). Basically this covered all the bases for the transitions. The key was making sure that the "transition" from "any element" to the "Hidden" state was immediate, and then overriding that immediate transition in the case of going from the overlay's "Visible" to "Hidden" states. </p> <p><img src="https://i.stack.imgur.com/7aeYp.png" alt="enter image description here"></p> <hr> <h2>Setting an Initial VisualState of a <strong><em>Custom Control</em></strong></h2> <p>If you're developing a <em>custom control</em> (rather than a UserControl) and are thus defining your VisualStateManager in the control template, the above method (initiating the VisualState change based on the Loaded event) will probably not work. This is because the visual tree of your control (defined in a Style file) gets applied to your control right before the <code>OnApplyTemplate()</code> override gets called, which is usually after the first <code>Loaded</code> event has fired. So if you try to initiate a VisualState change in response to the Loaded event for a custom control, most likely nothing will happen. <strong>Instead, you will need to initiate the state change in your <code>OnApplyTemplate()</code></strong> override code:</p> <pre><code>public class MyCustomControl : ContentControl { // ... other code .... public MyCustomControl() { // avoid designer errors if (DesignerProperties.GetIsInDesignMode(this)) return; Loaded += new RoutedEventHandlerMyCustomControl_Loaded); } // This probably won't be called until AFTER OnApplyTemplate() gets // called, so don't expect for your control to even have a visual tree // yet when your control is first being contructed at runtime. private void MyCustomControl_Loaded(object sender, RoutedEventArgs e) { } public override void OnApplyTemplate() { // Avoid Visual Studio 2010 designer exceptions // (Visual Studio can't handle the VisualState change at design-time) if (DesignerProperties.GetIsInDesignMode(this)) return; base.OnApplyTemplate(); // Now we know that the template has been applied, we have a visual tree, // so state changes will work VisualStateManager.GoToState(this, "MyInitialState", false); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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