Communication between 2 ".ux" files (EdgeAnimation.Active)

General
1

Hi,

Similar problem about communication between 2 “.ux” Files but now trying to execute an animation. Where the target “ENavigation” is in MainView.ux

<!-- Header.ux -->

<StackPanel ux:Class="Header" Background="#DDD" Dock="Top">

<Button Text="Open MainMenu" Width="200" Alignment="Right">

    <Clicked>

        <!-- How I must to set the "Target" to Set the EdgeNavigation (MainView.ux) -->
        <!-- <Set Target="ENavigation.Active" Value="mainMenu"/> -->

    </Clicked>

</Button>

<Rectangle Height="1" Margin="0,5,0,0" Fill="#F00" />

</StackPanel>


<!-- MainView.ux -->

<App Theme="Basic" Background="#EEEEEE">

<EdgeNavigator ux:Name="ENavigation">

    <StackPanel Width="200" EdgeNavigation.Edge="Left" ux:Name="mainMenu" Background="#212831">

        <ActivatingAnimation>
            <Change translationMainView.X="200" />
        </ActivatingAnimation>


        <Button Text="Close MainMenu">
            <Clicked>
                <Set Target="ENavigation.Active" Value="ENavigation" />
            </Clicked>
        </Button>

    </StackPanel>


    <DockPanel>

        <Translation ux:Name="translationMainView" />

        <!-- Header External (File Header.ux) >>> Not Working Set Target <<< -->
        <Header/>



        <!-- Header Internal (Working OK Set Target) -->

        <!--

        <StackPanel Background="#DDD" Dock="Top">

            <Button Text="Open MainMenu" Width="200" Alignment="Right">
                <Clicked>
                    <Set Target="ENavigation.Active" Value="mainMenu"/>
                </Clicked>
            </Button>

            <Rectangle Height="1" Margin="0,5,0,0" Fill="#F00" />

        </StackPanel>

        -->




        <!-- Just a ScrollView -->
        <ScrollView>

            <StackPanel Alignment="Top">

                <Rectangle Width="300" Height="768" Background="#123020" />

            </StackPanel>

        </ScrollView>

    </DockPanel>

</EdgeNavigator>
</App>

Zipped File: https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/YeHaYUNRrSWc-legacy-files-bqkRVSZcAufzHivj-sEChJtlE-4rUX6bw1BhIw0EM.zip

2

Hi! As a quick win, you could put the Clicked trigger on your Header instance in MainView.ux. Then you would have direct access to the target you’re trying to animate.

So instead of

 <Header/>

do

<Header>
    <Clicked>
        <!-- your animation -->
    </Clicked>
</Header>

This of course will make the whole Header clickable, but it looks like that is what you are trying to achieve from looking at your code.

Let me know if this is not sufficient :slight_smile:

3

Ty Kristian, works fine, but I need that just the button inside the (Header.ux) dispatch the Clicked event.

4

Hernan: Thanks for highlighting this issue. We are currently investigating best practice for solving this scenario.

For now, the quickest solution for you is to inline your header code in your main view.