how to interchange images with application bar icon buttons in windows phone 8?

Question

I am working on windows phone 8 app. How to interchange images with ApplicationBarIconButton as shown below. First screenshot is the example for it. In second screenshot letter D is dragged over to ApplicationBar and in the ApplicationBar, letter C is replaced with letter D(third screenshot). We have this kind of default feature in Iphone which is known as MoreNavigationController Edit button Screen. How is it possible in wp8? Thank u in advance.

Answer 1

So first you need to correctly detect drag and drop. Have you already tried solving that? Once you detect that the intention of the user is to drop the image over the application bar, you can simply replace the icon on the target application bar icon.

If you cannot do that via drag and drop, have you considered replacing that feature with "hold for context menu" option? Basically, instead of d'n'd, you hold the press over the letter and a context menu is spawned that asks you if you want to add it to application bar.

Note that the default ApplicationBar control does not support binding and you need to find third party controls if you want data binding. Then it will be super easy to replace the icon.

Answer 2

In Application Bar I am not sure Drag and Drop (DnD) is possible or not, However i have a suggestion for this solution, you have build your own Application Bar using canvas or stack component with the same behavior. Once you are able to detected the position of source object then you can change the UIElements using manged code, for source and destination's UI element.

let me know if you have any doubts.

Hope it helps.

Answer 3

You need to create several ApplicationBar in your App.xaml... and then replace them:

 <shell:ApplicationBar x:Key="AppBar1" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/History.png" Text="History" Click="History_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/News.png" Text="News Feed" Click="NewsFeedClick" />
            <shell:ApplicationBarIconButton IconUri="/Images/group.png" Text="Groups" Click="Groups_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/Profile.png" Text="Profile" Click="Profile_Click"/>
        </shell:ApplicationBar>


<shell:ApplicationBar x:Key="AppBar2" IsVisible="True" IsMenuEnabled="True"/>

and then in your add this line in your C# code:

ApplicationBar = (IApplicationBar)App.Current.Resources["AppBar2"];

good luck