CODEWITHSUNDEEP
c#xamlwindows-phone-7windows-phone-8
Developer
Developer

Reputation: 4321

Handling VisualStates in XAML

My question about XAML:

I want to develop sliding in/out menu in WP8

So, my code is next:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ShowHideMenu">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.3"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="ShowMenu">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="335" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HideMenu"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

And my button code:

<Button Content="Button" Margin="0,0,145,0">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <ec:GoToStateAction StateName="ShowMenu"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>

How to make it Show menu if its state is HideMenu and Hide if it is Shown?

Practically it looks like this:

ShowMenu state

HideMenu state

Upvotes: 0

Views: 324

Answers (1)

Olivier Payen
Olivier Payen

Reputation: 15268

Instead of using a Button, you could use a ToggleButton so that you can use the Checked and Unchecked events:

<ToggleButton Margin="0,0,145,0">
  <ToggleButton.Content>
    <TextBlock Text="Button"/>
  </ToggleButton.Content>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Checked">
      <ec:GoToStateAction StateName="ShowMenu"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="Unchecked">
      <ec:GoToStateAction StateName="HideMenu"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</ToggleButton>

Upvotes: 2

Related Questions