Advice of menu design

General
1

Hello,

I need your help for a tab bar menu :

<Grid ColumnData="1,1,1,1" Height="45" Dock="Bottom">
            <Text ux:Class="TextBar" Alignment="BottomCenter" FontSize="12" TextColor="#ffffff"/>
            <Image ux:Class="Icon" Margin="10,-20,10,10" />
            <Panel Background="#34495e" >
                <TextBar ux:Name="homeBar" Value="Messagers" />
                <Clicked>
                    <Set pages.Active="home" />
                </Clicked>
            </Panel>
            <Panel Background="#34495e" >
                <TextBar ux:Name="videoBar" Value="Videos" />
                <Clicked>
                    <Set pages.Active="videos" />
                </Clicked>
            </Panel>
            <Panel Background="#34495e" >
                <Icon File="Assets/audio-icon.png" />
                <TextBar ux:Name="audioBar" Value="Audios" />
                <Clicked>
                    <Set pages.Active="audios" />
                </Clicked>
            </Panel>
            <Panel Background="#34495e" >
                <TextBar ux:Name="newsBar" Value="Annonces" />
                <Clicked>
                    <Set pages.Active="news" />
                </Clicked>
            </Panel>
        </Grid>

I want the icon positionned above the tab bar, i tried negative margin but the tab bar hides the top part of the icon : (http://s15.postimg.org/vn1ni4vez/Capture_d_e_cran_2016_03_11_a_20_13_11.png)

Anyone has an idea, on css markup it could be achieved by absolute position and z-index.

Thank you.

2

Hi! In the next release you will be able to set the ZOffset on elements to achieve this. Currently, what you can do is to use a Grid or a DockPanel with explicit Dock or Row/Column markers and the place the top bar below in the ux structure.

Something like this:

<DockPanel>
    <Grid Columns="1*,1*,1*,1*"> <!-- this is your tab bar -->
        ...
    </Grid>    

    <!-- setting Dock="Top" and putting this line under the grid. This is the top bar which will now be on the layer underneath. -->
    <Panel ux:Name="theTopBar" Dock="Top"/>
</DockPanel>
3

Kristian Hasselknippe wrote:

Hi! In the next release you will be able to set the ZOffset on elements to achieve this. Currently, what you can do is to use a Grid or a DockPanel with explicit Dock or Row/Column markers and the place the top bar below in the ux structure.

Something like this:

<DockPanel>
    <Grid Columns="1,1,1,1"> <!-- this is your tab bar -->
        ...
    </Grid>
    <!-- setting Dock="Top" and putting this line under the grid. This is the top bar which will now be on the layer underneath. -->
    <Panel ux:Name="theTopBar" Dock="Top"/>
</DockPanel>

Thanks for replay, If i put the “theTopBar” to Dock=“Top”, it will appear on top of the screen, i just want the tab bar on bottom positionned and under the grid. If i do Dock=“bottom” the Panel is just above the grid.