locked
VS school project!

    Question

  • I have a school project that I'm working on, and I need a webveiwr in my XAML app for windows 8 metro style. please could you show me how?

    PS. it need to have three buttons and every button have its own link. 

    Ex: button1 when clicked goes to www.google.com 

          button2 when clicked goes to www.bing.com and so on.

    Best regards

    Muhammad Darwish

    • Moved by Jesse Jiang Thursday, January 17, 2013 10:40 AM
    Saturday, January 12, 2013 8:39 PM

Answers

  • Hi,

    First, we should drag a WebView control into XAML editor and named as "webview"

    Then add two buttons and add the click event for these buttons.
    Here is the codes for XAML

            <WebView Name="webview" HorizontalAlignment="Left" Height="383" Margin="173,262,0,0" VerticalAlignment="Top" Width="969"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="469,137,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="751,137,0,0" VerticalAlignment="Top" Click="Button_Click_2"/>
    

    At last, we should use navigate function to redirect the webview control

    void App1::MainPage::Button_Click_1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	webview->Navigate(ref new Uri("http://www.google.com"));
    }
    
    
    void App1::MainPage::Button_Click_2(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	webview->Navigate(ref new Uri("http://www.bing.com"));
    }
    

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Jesse Jiang Friday, February 1, 2013 1:58 AM
    Friday, January 18, 2013 2:29 AM
  • Hi,

    I did not change your codes, because you use a listview as three button. And it will change a lot codes to achieve this function. I upload a sample code based on the blank template. Please check this
    http://sdrv.ms/Wwy8zd 

    Download the WebViewwithButton.zip

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.



    Monday, January 28, 2013 9:38 AM
  • I tired it. but cant get it to work with many buttons. 
    • Marked as answer by Jesse Jiang Friday, February 1, 2013 1:59 AM
    Sunday, January 13, 2013 3:42 PM

All replies

  • Consider the samples. There is an example called “XAML WebView control sample”: http://code.msdn.microsoft.com/windowsapps/XAML-WebView-control-sample-58ad63f7

    • Edited by Viorel_MVP Sunday, January 13, 2013 10:24 AM
    Sunday, January 13, 2013 10:22 AM
  • I tired it. but cant get it to work with many buttons. 
    • Marked as answer by Jesse Jiang Friday, February 1, 2013 1:59 AM
    Sunday, January 13, 2013 3:42 PM
  • Hello,

    Would you please provide us the whole codes to reproduce this issue,

    You can upload your project to SkyDrive
    http://skydrive.live.com/

    It is not necessary that you send out the whole of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business details from it.

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 17, 2013 10:41 AM
  • There is no problem. 

    but I just want a code like this:

    button1 when clicked goes to www.google.com 

    button2 when clicked goes to www.bing.com and so on.

    so when I press button1 the webview shows google.com and so on.

    Friday, January 18, 2013 1:49 AM
  • Hi,

    First, we should drag a WebView control into XAML editor and named as "webview"

    Then add two buttons and add the click event for these buttons.
    Here is the codes for XAML

            <WebView Name="webview" HorizontalAlignment="Left" Height="383" Margin="173,262,0,0" VerticalAlignment="Top" Width="969"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="469,137,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
            <Button Content="Button" HorizontalAlignment="Left" Margin="751,137,0,0" VerticalAlignment="Top" Click="Button_Click_2"/>
    

    At last, we should use navigate function to redirect the webview control

    void App1::MainPage::Button_Click_1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	webview->Navigate(ref new Uri("http://www.google.com"));
    }
    
    
    void App1::MainPage::Button_Click_2(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	webview->Navigate(ref new Uri("http://www.bing.com"));
    }
    

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Jesse Jiang Friday, February 1, 2013 1:58 AM
    Friday, January 18, 2013 2:29 AM
  • now I ran into little problem.

    Error 1 error C2063: 'School::SplitPage::Button_Click_1' : not a function C:\Users\USERNAME\Desktop\School\School\SplitPage.xaml.cpp 196 1 School
    Error 2 error C2063: 'Origin::SplitPage::Button_Click_2' : not a function C:\Users\USERNAME\Desktop\School\School\SplitPage.xaml.cpp 202 1 School
    Error 3 error C1004: unexpected end-of-file found C:\Users\USERNAME\Desktop\School\School\SplitPage.xaml.cpp 204 1 School

    If you want we can do it over skype or something. its much easier for both of us.


    • Edited by musa0217 Friday, January 18, 2013 3:27 PM
    Friday, January 18, 2013 10:56 AM
  • You need to add declarations for those functions to the class definition in SplitPage.xaml.h . The declarations need to be public.

    XNA/DirectX MVP | Website | Blog | @mikebmcl

    Friday, January 18, 2013 4:42 PM
  • I know you are trying your best guys but I'm just a student and I don't even study about programming I just wanted to make this app so I can prove for my self that I can learn new stuff. Would you please add my in a live chat like Skype or something else? so I could show you the whole thing that I'm working on and also so you could help me.

    Skype: musa0217

    Best regard 


    • Edited by musa0217 Friday, January 18, 2013 7:59 PM
    Friday, January 18, 2013 7:50 PM
  • You can upload a project to SkyDrive
    http://skydrive.live.com/

    We can help you to change the codes.

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, January 21, 2013 9:22 AM
  • Ok its up now. 

    now what I really want is the webview will be on www.google.com when the app starts 

    and then there is three buttons one with www.bing.com and the other www.youtube.com 

    and another to go back to www.google.com

    Thanks for your time. 

    P.S I removed the photos and logos because it might be too hard on you. I study medicine.

    Click here to download the project


    • Edited by musa0217 Monday, January 21, 2013 4:42 PM
    Monday, January 21, 2013 3:04 PM
  • Hi,

    I think the way you add the click function is not correct.
    First, we should create Black App (XAML), because this template is simple

    Then, we drag a WebView control and three buttons.

    The WebView control should be named "webview". So that we can use it directly in button click.

     When we drag a button control, there is no click event general by default.

    We should click the button in XAML editor, and press F4, the property page will be shown, in the Event page of property page, we double click the TextBox of "Click " the button click by Visual Studio.


    For detail steps, please check this document
    http://msdn.microsoft.com/en-us/library/windows/apps/hh986965.aspx

    The error you get in front is caused by the button click add incorrectly.

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, January 22, 2013 6:53 AM
  • Please could you add the things I need to my project? and then upload it.

    I tried to do the same things you told me to a blank page but it didn't work. I'm just new to thees stuff. 

    Yours

    Musa


    • Edited by musa0217 Tuesday, January 22, 2013 8:26 AM
    Tuesday, January 22, 2013 7:56 AM
  • Please reply for my last comment.
    Sunday, January 27, 2013 11:56 PM
  • Hi,

    I did not change your codes, because you use a listview as three button. And it will change a lot codes to achieve this function. I upload a sample code based on the blank template. Please check this
    http://sdrv.ms/Wwy8zd 

    Download the WebViewwithButton.zip

    Best regards,
    Jesse


    Jesse Jiang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.



    Monday, January 28, 2013 9:38 AM
  • Thanks for your help. 

    you really did help me. I dont know what I would do with your help.

    Monday, January 28, 2013 10:32 AM