CODEWITHSUNDEEP
c#wpfxaml
MrShoes
MrShoes

Reputation: 485

WPF Bind UserControl to resource

At the moment, I'm doing some experimentation. My current scenario: I have a StoryBoard to transition between 2 UserControls (for example, it shrinks the current UserControl then grows the other).

What I want to do is to have 2 UserControls defined as part of the XAML, with keys of "Current" and "Next". The Current should be bound to the currently viewed UserControl. The Next should be bound before transition, so the StoryBoard knows which element to transition to. Here's where I'm stuck: ENTIRELY using XAML, how would one go about this?

I have a simple StoryBoard that is a Resource of the ItemsControl, as well as two UserControl items:

<ItemsControl.Resources>
  <Storyboard x:Key="TransitionStoryboard">
    <!-- Shrink this one. -->
    <DoubleAnimation Storyboard.Target="{Binding Current}" Storyboard.TargetProperty="Width" To="0" Duration="0:0:1"/>
    <!--Grow the next.-->
    <DoubleAnimation Storyboard.Target="{Binding Next}" Storyboard.TargetProperty="Width" To="100" BeginTime="0:0:1" Duration="0:0:1"/>
  </Storyboard>

  <UserControl x:Key="Current"/>
  <UserControl x:Key="Next" Width="0"/>
</ItemsControl.Resources>

So, when I define a new UserControl that belongs to the ItemsControl (like this):

<my:Control1 x:Name="ControlOne"/>

How do I set the "Current" UserControl top be ControlOne? Then, when I want to transition, how do I set one as "Next"? And how can I change these after a trigger?

Thanks

Upvotes: 0

Views: 853

Answers (1)

Nikita B
Nikita B

Reputation: 3333

This is a total mess. You seem to completely misunderstand on how the static resources are used.

To achieve what you are trying to do, you should first decide on what will trigger the animation. Ideally it should be some DependencyProperty on your controls, or a property on your view model (which implements INotifyPropertyChanged). For example, you can declare an IsSelected property. Then you should create a style which triggers "grow" animation when control is selected and triggers "shrink" animation, when control loses selection. For example:

 <Style TargetType="Control" x:Key="FancyStyle">
     <Style.Triggers>
         <DataTrigger Binding={Binding IsSelected} Value="True">
             <DataTrigger.EnterActions>
                  <BeginStoryboard Storyboard="{StaticResource YourGrowAnim}"/>
             </DataTrigger.EnterActions>
             <DataTrigger.ExitActions>
                  <BeginStoryboard Storyboard="{StaticResource YourShrinkAnim}"/>
             </DataTrigger.ExitActions>
         </DataTrigger>
     </Style.Triggers>
 </Style>

Then you should assign that style to every control, you want animated this way and set up transitions between IsSelected properties. You can also use EventTrigger instead and bind animations to events (for example you can trigger those animations when control gets/loses focus).

You should also fix your "grow" animation, it wont work, most likely.

Upvotes: 2

Related Questions