How can I create a button "add an account" like in Windows Phone settings?

Question

I'm new in developing applications for Windows Phone 8. I have a case that I need to add itens in a list, but I think will be nice if I could do something like the button "add an account", like in Windows Phone settings. See:

How can I do this?

I know how to do the accounts List. I can use LongListSelector, like this example:

<phone:LongListSelector  x:Name="llsAccounts" 
        LayoutMode="List" Margin="0,150,0,0" SelectionChanged="llsAccounts_SelectionChanged">
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                <!--Replace rectangle with image-->
                <Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
                <StackPanel Width="311" Margin="8,-7,0,0">
                    <TextBlock Text="{Binding AccountName}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                    <TextBlock Text="{Binding DetailsAccount}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

I could resolve my problem using two LongListSelectors: one LongListSelector only for the "add an account" item and the second LongListSelector for the all added accounts. But this will be messy for me... it's not the right way.

Thanks!

Answer 1

There are quite a few ways you can to do this. You can just add a static <StackPanel> for your Add an Account follow by the LLS. Or you can use the LLS header/footer tags.

---

LLS header/footer example:

<phone:LongListSelector Name="lls">
    <phone:LongListSelector.ListHeader>
        <TextBlock Text="this is a header"/>
    </phone:LongListSelector.ListHeader>
    <phone:LongListSelector.ListFooter>
        <TextBlock Text="this is a footer"/>
    </phone:LongListSelector.ListFooter>
</phone:LongListSelector>