locked
passing image source on button click

    Question

  • Hi Developers,

    I'm new to this windows 8 apps. I have a doubt. 

    i have created two blank pages. page 1 contains 5 buttons, page 2 contains an Image. All i want to do is when a button is clicked it should navigate to page 2 and show relevant image on page 2.

    I created a button click event for all 5 buttons .And i have navigated to page 2 . Till here everything was fine. But the problem is for different buttons i want to display different images,so i need to pass different image source for each button click. but i couldnt' find out how to send the image source to page two. please help me out of this

    Saturday, July 19, 2014 6:48 PM

Answers

  • Hi,

    You can add same event handle in these Button click event:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button" HorizontalAlignment="Left" Margin="174,190,0,0" VerticalAlignment="Top" x:Name="Button1" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="199,288,0,0" VerticalAlignment="Top" x:Name="Button2" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="221,363,0,0" VerticalAlignment="Top" x:Name="Button3" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="561,210,0,0" VerticalAlignment="Top" x:Name="Button4" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="615,291,0,0" VerticalAlignment="Top" x:Name="Button5" Click="Button_Click"/>
    
        </Grid>
    private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button button=sender as Button;
                switch(button.Name)
                {
                    case "Button1":
                        Frame.Navigate(typeof(ImagePage), "Assets/image1.png");
                        break;
                   case "Button2":
                        Frame.Navigate(typeof(ImagePage), "Assets/image2.png");
                        break;
                    case "Button3":
                        Frame.Navigate(typeof(ImagePage), "Assets/image3.png");
                        break;
                    case "Button4":
                        Frame.Navigate(typeof(ImagePage), "Assets/image4.png");
                        break;
                    case "Button5":
                        Frame.Navigate(typeof(ImagePage), "Assets/image5.png");
                        break;
    
    
                }
    Best Wishes!

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

    • Proposed as answer by Vishal Kaushik Tuesday, July 22, 2014 5:09 PM
    • Marked as answer by manojram Wednesday, July 23, 2014 7:40 AM
    Monday, July 21, 2014 6:10 AM

All replies

  • This can be done by  passing parameters in navigation.

    Your button click events should look like this

    private void Button1_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(ImagePage), "Assets/image1.png");
    }
    
    private void Button2_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(ImagePage), "Assets/image2.png");
    }
    
    private void Button3_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(ImagePage), "Assets/image3.png");
    }
    
    private void Button4_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(ImagePage), "Assets/image4.png");
    }
    
    private void Button5_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(ImagePage), "Assets/image5.png");
    }

    And on the other  page it will handle navigation like this:

    using System;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media.Imaging;
    using Windows.UI.Xaml.Navigation;
    
    namespace MsdnSample20072014
    {
    
        public sealed partial class ImagePage : Page
        {
            public ImagePage()
            {
                this.InitializeComponent();
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                string imageSource = e.Parameter as string;
    
                if (!String.IsNullOrWhiteSpace(imageSource))
                {
                    image.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///" + imageSource) };
                }
            }
        }
    }
    


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Saturday, July 19, 2014 7:25 PM
  • Thank you so much Vishal. Your answer is helpful. But one thing i would like to know. Is there any possible way to make it single button click event and send the image path. instead of writing different events for different buttons
    Monday, July 21, 2014 1:22 AM
  • Hi,

    You can add same event handle in these Button click event:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button" HorizontalAlignment="Left" Margin="174,190,0,0" VerticalAlignment="Top" x:Name="Button1" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="199,288,0,0" VerticalAlignment="Top" x:Name="Button2" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="221,363,0,0" VerticalAlignment="Top" x:Name="Button3" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="561,210,0,0" VerticalAlignment="Top" x:Name="Button4" Click="Button_Click"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="615,291,0,0" VerticalAlignment="Top" x:Name="Button5" Click="Button_Click"/>
    
        </Grid>
    private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button button=sender as Button;
                switch(button.Name)
                {
                    case "Button1":
                        Frame.Navigate(typeof(ImagePage), "Assets/image1.png");
                        break;
                   case "Button2":
                        Frame.Navigate(typeof(ImagePage), "Assets/image2.png");
                        break;
                    case "Button3":
                        Frame.Navigate(typeof(ImagePage), "Assets/image3.png");
                        break;
                    case "Button4":
                        Frame.Navigate(typeof(ImagePage), "Assets/image4.png");
                        break;
                    case "Button5":
                        Frame.Navigate(typeof(ImagePage), "Assets/image5.png");
                        break;
    
    
                }
    Best Wishes!

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

    • Proposed as answer by Vishal Kaushik Tuesday, July 22, 2014 5:09 PM
    • Marked as answer by manojram Wednesday, July 23, 2014 7:40 AM
    Monday, July 21, 2014 6:10 AM
  • One more simplification [less code] and trying to move you towards commands

    <Page
        x:Class="MsdnSample22072014.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MsdnSample22072014"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button x:Name="Button1" Click="Button_Click" CommandParameter="Assets/image1.png" Content="Image 1"/>
            <Button x:Name="Button2" Click="Button_Click" CommandParameter="Assets/image2.png" Content="Image 2"/>
            <Button x:Name="Button3" Click="Button_Click" CommandParameter="Assets/image3.png" Content="Image 3"/>
            <Button x:Name="Button4" Click="Button_Click" CommandParameter="Assets/image4.png" Content="Image 4"/>
            <Button x:Name="Button5" Click="Button_Click" CommandParameter="Assets/image5.png" Content="Image 5"/>
        </StackPanel>
    </Page>
    

    using System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace MsdnSample22072014
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button button = sender as Button;
    
                if (button != null)
                {
                    string imageUrl = button.CommandParameter as string;
    
                    if (!String.IsNullOrWhiteSpace(imageUrl))
                    {
                        Frame.Navigate(typeof(ImagePage), imageUrl);
                    }
                }
            }
        }
    }
    

    And now let us close this question :)


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Tuesday, July 22, 2014 5:09 PM