Image Clickable in Windows Phone 7

Question

I am developing an application for Windows Phone 7. In one of my page i have an image which contains several other images i.e, a larger image which contains some other small images. Now i want to make these small images clickable in order to navigate to another page. So what i did is that i have added a button in all these small images and assigned the border thickness of the buttons to 0. I think there should be some better option to do this. my xaml is:

<Image Grid.RowSpan="2" Source="Image/device.png" Height="754" HorizontalAlignment="Left" Margin="0,15,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="480" />
    <Button Content="" Grid.RowSpan="2" BorderThickness="0" Height="244" HorizontalAlignment="Left" Margin="23,34,0,0" Name="About" VerticalAlignment="Top" Width="439" Click="About_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="137" HorizontalAlignment="Left" Margin="34,285,0,0" Name="City" VerticalAlignment="Top" Width="187" Click="City_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="137" HorizontalAlignment="Left" Margin="261,285,0,0" Name="Cuisine" VerticalAlignment="Top" Width="189" Click="Cuisine_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="141" HorizontalAlignment="Left" Margin="36,456,0,0" Name="Map" VerticalAlignment="Top" Width="186" Click="Map_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="141" HorizontalAlignment="Left" Margin="257,455,0,0" Name="Coupon" VerticalAlignment="Top" Width="199" Click="Coupon_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="70" HorizontalAlignment="Left" Margin="13,650,0,0" Name="Home" VerticalAlignment="Top" Width="67" Click="Home_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="71" HorizontalAlignment="Right" Margin="0,647,309,0" Name="Map1" VerticalAlignment="Top" Width="64" Click="Map1_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="74" HorizontalAlignment="Left" Margin="197,649,0,0" Name="City1" VerticalAlignment="Top" Width="70" Click="City1_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="80" HorizontalAlignment="Left" Margin="296,646,0,0" Name="Cuisine1" VerticalAlignment="Top" Width="73" Click="Cuisine1_Click" />
    <Button Content="" Grid.Row="1" BorderThickness="0" Height="76" HorizontalAlignment="Left" Margin="396,646,0,0" Name="Share" VerticalAlignment="Top" Width="79" Click="Share_Click" />

Please suggest some better way to do this

Answer 1

Actually, you should have asked several questions, but anyway:

I had an image view of that image and wherever necessary to make it clickable

I would recommend to cut the one big image to several smaller ones. Then you just add them all to grid and make some of them, that should be active, clickable

Since the default application bar contains only 4tabs and i needed 5 so what i did is that i created 5 buttons in that area. Now i want the 5 buttons to appear in all the pages without writing code for the buttons in all pages. I would like to call those buttons from a page and display it throughout the app. How to do this?

That can be easily done. You should create an applicationBar manager class. It will look like that:

public class ApplicationBarCreator
{
    #region Constructor

    /// <summary>
    /// Constructor for native page
    /// </summary>
    /// <param name="page">Current page</param>
    public ApplicationBarCreator(PhoneApplicationPage page)
    {
        page.ApplicationBar = new ApplicationBar();
        page.ApplicationBar.IsMenuEnabled = true;
        page.ApplicationBar.IsVisible = true;

        ApplicationBarMenuItem appBarButtonSettings = new ApplicationBarMenuItem(LocalizedResources.Resources.Get("menusettings"));
        appBarButtonSettings.Click += delegate(object sender, EventArgs e)
        {
            appBarButtonSettings_Click(sender, e, page);
        };
        ApplicationBarMenuItem appBarButtonUpdate = new ApplicationBarMenuItem(LocalizedResources.Resources.Get("commonrefresh"));
        appBarButtonUpdate.Click += delegate(object sender, EventArgs e)
        {
            appBarButtonUpdate_Click(sender, e, page);
        };
        ApplicationBarMenuItem appBarButtonAbout = new ApplicationBarMenuItem(LocalizedResources.Resources.Get("menuhelp"));
        appBarButtonAbout.Click += delegate(object sender, EventArgs e)
        {
            appBarButtonAbout_Click(sender, e, page);
        };

        page.ApplicationBar.MenuItems.Add(appBarButtonSettings);
        page.ApplicationBar.MenuItems.Add(appBarButtonUpdate);
        page.ApplicationBar.MenuItems.Add(appBarButtonAbout);
        }

        private void appBarButtonSettings_Click(object sender, EventArgs e, PhoneApplicationPage page)
        {
              // doing something
        }

        // and two more down

Then in your every page, you want to add this application bar, you add just one line in page constructor:

apbCreator = new ApplicationBarCreator(this);

By the way, you may not need to transfer page object to this class and use delegates. I've done this, because I need to use NavigationService, which require to know a current page. If you don't need it, just use simple events instead.

Answer 2

You can check in the event optios of the image. you can you the event handler called image_tap as Chris Shao also mentioned above.

you can use also these methods

Double-tap: Just like double-clicking, but with a finger instead of a mouse * DragStarted, DragDelta, and DragCompleted: Three events that can be used together to implement easy drag-and-drop on Windows Phone * Flick: Putting your finger down, moving it quickly, and then picking it back up. * Hold: Putting your finger down and holding it in one place for a while * PinchStarted, PinchDelta, and PinchCompleted: Three events that can be used together to tell if a user is pinching something, typically to zoom in or out * Tap: Just like clicking, but with a finger instead of a mouse

Answer 3

you can add Tap handle to your Image,like Tap="Image_Tap" and handle it.

private void Image_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
// your code
}