How to fixed bottom a elemnt in sidebar

How-to Discussions
1

Hi Iam working on a project with sidebar , and iam unable to position a button or a panel at the bottom of the sidebar, the button always should be at the bottom

<StackPanel ux:Class="Sidebar">
    <WhileInactive Threshold="0.4">
        <Move Target="user" X="-250" Duration="0.2" Delay="0.3" Easing="CircularIn" />
        <Move Target="stats" X="-250" Duration="0.2" Delay="0.2" Easing="CircularIn" />
        <Move Target="browser" X="-250" Duration="0.2" Delay="0.15" Easing="CircularIn" />
        <Move Target="feed" X="-250" Duration="0.2" Delay="0.1" Easing="CircularIn" />
        <Move Target="chat" X="-250" Duration="0.2" Delay="0.05" Easing="CircularIn" />
    </WhileInactive>

    <Text ux:Class="Username" TextAlignment="Center" FontSize="18" TextColor="#fff" Margin="0,8,0,0">
        <Font File="assets/fonts/AlegreyaSans-Bold.otf" />
    </Text>
    <Text ux:Class="Stats" TextAlignment="Center" FontSize="16" TextColor="#fed166" />
    <Text ux:Class="Relations" TextAlignment="Center" FontSize="11" TextColor="#414f5e" />
    <Text ux:Class="MenuLabel" Alignment="CenterLeft" FontSize="16" TextColor="#fff" Opacity="0.3" Margin="0,0,0,0"  Width="90%" X="20px">
        <Font File="assets/fonts/Lato-Bold.ttf" />
    </Text>


    <StackPanel ux:Name="user">
        <Panel Height="50" />
        <Circle Width="85" Height="85">
            <ImageFill Url="https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/F61ViB8no9we-legacy-files-B2MmOFAy2wjpUo71-model-045.jpg" />
        </Circle>
        <Username Value="{currentUser.email}"></Username>
    </StackPanel>

    <Grid ux:Name="stats" Alignment="HorizontalCenter" ColumnCount="3" Margin="0,10,0,15">
        <StackPanel Width="70">
            <Stats>2,342</Stats>
            <Relations>Followers</Relations>
        </StackPanel>
        <Rectangle Height="40" Width="1">
            <SolidColor Color="#414f5e" />
        </Rectangle>
        <StackPanel Width="70">
            <Stats>3,735</Stats>
            <Relations>Following</Relations>
        </StackPanel>
    </Grid>

    <Image ux:Class="SidebarIcon" Height="22" Width="22" Margin="0,0,0,0" Color="#ffffff" Opacity="0.3"  Alignment="CenterLeft"/>
<ScrollView SnapMinTransform="false" SnapMaxTransform="false">
    <StackPanel>


                        <Grid Columns="auto,1*" Margin="30,30,0,0"  Alignment="Left" ux:Name="browser">
        <SidebarIcon File="assets/icon/Browser.png" />
            <MenuLabel>News</MenuLabel>

    </Grid>

    <Grid Columns="auto,1*" Margin="30,30,20,0"   Alignment="Left" ux:Name="feed">
            <SidebarIcon File="assets/icon/Feed.png" />
            <MenuLabel>Feed</MenuLabel>
            </Grid>
            <Grid Columns="auto,1*" Margin="30,30,20,0"  Alignment="Left" ux:Name="chat">
            <SidebarIcon File="assets/icon/Chat.png" />
            <MenuLabel>Chat</MenuLabel>
            </Grid>

    </StackPanel>
</ScrollView>


### ### ### ### ### ### i want the below stackpanel always at the bottom ### ### ### ### ### 


    <StackPanel ux:Name="fff"   Dock="Bottom" Margin="100,30,20,0" Y="100%" Background="#fff">
            <Grid Columns="auto,1*" Margin="30,30,20,0" ux:Name="logout">
            <SidebarIcon File="assets/icon/Chat.png" />
            <MenuLabel>Logut</MenuLabel>
            <Clicked>                    
                        <Callback Handler="{logout}" />
                    </Clicked>
            </Grid>
    </StackPanel>

</StackPanel>
2

You have to put the bottom stackpanel inside a dockpanel if Dock="Bottom" is going to have any effect. :slight_smile:

For instance:

<DockPanel ux:Class="Sidebar">
    <StackPanel>
        <!-- this contains all the stuff from your old sidebar class -->
    </StackPanel>

    <!-- and then your bottom button -->
    <StackPanel ux:Name="fff" Dock="Bottom" ....>
</DockPanel>