locked
How do I insert an image in the middle of a string?

    Question

  • For example, I can create something like "double h = 3.455" and char a = "hello".  Then I would do string^ abc = a + h + "voila"; and it would yield hello3.455voila.

    How do I insert an image in the middle?  Is there an easy way to just insert an image path and the image would display in the app between the texts or paragraphs?

    Friday, May 31, 2013 3:46 AM

Answers

  • Here is how to implement my first suggestion to modify the Grid App template so that each item has its own page.  The advantage is that it is very simple and your item details can be very rich: rich text, images, controls, video, animation, etc.

    1. From the Grid App template add a Basic Page to the project for each item.  Right click on the project in the Solution Explorer, then Add > New Item > Visual C++ > Windows Store > Basic Page.  Name the page then click Add.  Make sure you select Basic Page and not Blank Page.

    2. In SampleDataSource.cpp configure each item with the Content parameter to contain the Namespace.pageName as a string like this example:

    ...
    	group1->Items->Append(ref new SampleDataItem("Group-1-Item-1",
    		"Item Title: 1",
    		"Item Subtitle: 1",
    		"Assets/LightGray.png",
    		"Item Description: Pellentesque porta, mauris quis interdum vehicula.",
    		"CustomGridApp.ItemPage0",
    		group1));
    ...

    Here, "CustomGridApp" is the namespace for the project and "ItemPage0" is the name of the Basic Page that I added for this item.

    3. Modify GroupedItemsPage.xaml.cpp Item_View click handler like this:

    void GroupedItemsPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
    	(void) sender;	// Unused parameter
    
    	// Navigate to the appropriate destination page, configuring the new page
    	// by passing required information as a navigation parameter
    	auto itemId = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->UniqueId;
    	auto itemContent = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->Content;
    	
    	TypeName tn;
    	tn.Name = itemContent;
    	tn.Kind = Windows::UI::Xaml::Interop::TypeKind::Metadata;
    	Frame->Navigate(tn, itemId);
    }


    4. Modify GroupDetailPage.xaml.cpp Item_View click handler like this:

    void GroupDetailPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
    	(void) sender;	// Unused parameter
    
    	// Navigate to the appropriate destination page, configuring the new page
    	// by passing required information as a navigation parameter
    	auto itemId = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->UniqueId;
    	auto itemContent = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->Content;
    	
    	TypeName tn;
    	tn.Name = itemContent;
    	tn.Kind = Windows::UI::Xaml::Interop::TypeKind::Metadata;
    	Frame->Navigate(tn, itemId);
    }

    5. Design your page for each item.

    Now, when an item is clicked, the item page should open.  A back button will return to the page that selected it.



    Monday, June 10, 2013 3:03 PM

All replies

  • You can use a RichTextBlock and mix text with images.  It is a little more complicated than string append.

    Here are a couple of helper functions:

    Documents::Run^ makeRun(Platform::String^ text)
    {
    	auto run = ref new Documents::Run();
    	run->Text= text;
    	return run;
    }
    
    Documents::InlineUIContainer^ makeImage(Platform::String^ uri, double size)
    {
    	auto pic = ref new Image();
    	auto ilc = ref new Documents::InlineUIContainer();
    	pic->Source = ref new Imaging::BitmapImage(
    		ref new Uri(uri));
    	pic->Width = size;
    	pic->Height= size;
    	ilc->Child = pic;
    	return ilc;
    }
    

    Then, an example of use (where myRTB is the name of a RichTextBlock in your XAML).

    	auto par = ref new Documents::Paragraph();
    	par->Inlines->Append(makeRun("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum."));
    	par->Inlines->Append(makeImage("ms-appx:///cat2.jpeg", 100));
    	par->Inlines->Append(makeRun("Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue."));
    	myRTB->Blocks->Append(par);

    Friday, May 31, 2013 4:24 PM
  • Forgive me for being ignorant.

    I'm a structure engineer with limited programming skills from the past. 

    I'm using the grid app in the templates to write an app.  Trying to make an engineering app for students and professionals.

    I'm editing the sampledatasource.cpp file in the group portion.  Here's a sample.

    group0->Items->Append(ref new SampleDataItem("Group-0-Item-0",
    		"Section I",
    		"Purpose",
    		"Assets/MediumGray.png",
    		"Purpose",
    		"I want to insert texts and images here",
    		group0));
    How would I change the last part into richtextformat to be able to add both texts and images?

    Please be patient with me.  Once I got the gist of this, I'll add several engineering tools to the winstore. 


    • Edited by RandyPete Friday, June 7, 2013 7:25 PM
    Friday, June 7, 2013 7:23 PM
  • Assuming that you want this content to be self contained within your app, the approach I would take is to modify the grid template so that instead of navigating to the ItemsDetailPage, it would navigate to a specific page that your app hosts for each item. That is, each item would have its own full XAML page that could contain rich text images, buttons, sliders and other controls.

    I am away from my computer for a couple of days so I can't post example code right now.

    There may be a somewhat more "hackish" was of doing this by using a common ItemsDetailPage and using a method of converting a string representation of the RichTextBlock content into XAML then loading it when the page is navigated to, but I need my computer to verify this for you.
    • Edited by jrboddie Saturday, June 8, 2013 11:17 AM
    Saturday, June 8, 2013 10:29 AM
  • Assuming that you want this content to be self contained within your app, the approach I would take is to modify the grid template so that instead of navigating to the ItemsDetailPage, it would navigate to a specific page that your app hosts for each item. That is, each item would have its own full XAML page that could contain rich text images, buttons, sliders and other controls.

    I am away from my computer for a couple of days so I can't post example code right now.

    There may be a somewhat more "hackish" was of doing this by using a common ItemsDetailPage and using a method of converting a string representation of the RichTextBlock content into XAML then loading it when the page is navigated to, but I need my computer to verify this for you.

    This would be great.  Thank you so much, sir.

    Sunday, June 9, 2013 5:55 AM
  • Here is how to implement my first suggestion to modify the Grid App template so that each item has its own page.  The advantage is that it is very simple and your item details can be very rich: rich text, images, controls, video, animation, etc.

    1. From the Grid App template add a Basic Page to the project for each item.  Right click on the project in the Solution Explorer, then Add > New Item > Visual C++ > Windows Store > Basic Page.  Name the page then click Add.  Make sure you select Basic Page and not Blank Page.

    2. In SampleDataSource.cpp configure each item with the Content parameter to contain the Namespace.pageName as a string like this example:

    ...
    	group1->Items->Append(ref new SampleDataItem("Group-1-Item-1",
    		"Item Title: 1",
    		"Item Subtitle: 1",
    		"Assets/LightGray.png",
    		"Item Description: Pellentesque porta, mauris quis interdum vehicula.",
    		"CustomGridApp.ItemPage0",
    		group1));
    ...

    Here, "CustomGridApp" is the namespace for the project and "ItemPage0" is the name of the Basic Page that I added for this item.

    3. Modify GroupedItemsPage.xaml.cpp Item_View click handler like this:

    void GroupedItemsPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
    	(void) sender;	// Unused parameter
    
    	// Navigate to the appropriate destination page, configuring the new page
    	// by passing required information as a navigation parameter
    	auto itemId = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->UniqueId;
    	auto itemContent = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->Content;
    	
    	TypeName tn;
    	tn.Name = itemContent;
    	tn.Kind = Windows::UI::Xaml::Interop::TypeKind::Metadata;
    	Frame->Navigate(tn, itemId);
    }


    4. Modify GroupDetailPage.xaml.cpp Item_View click handler like this:

    void GroupDetailPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
    	(void) sender;	// Unused parameter
    
    	// Navigate to the appropriate destination page, configuring the new page
    	// by passing required information as a navigation parameter
    	auto itemId = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->UniqueId;
    	auto itemContent = safe_cast<Data::SampleDataItem^>(e->ClickedItem)->Content;
    	
    	TypeName tn;
    	tn.Name = itemContent;
    	tn.Kind = Windows::UI::Xaml::Interop::TypeKind::Metadata;
    	Frame->Navigate(tn, itemId);
    }

    5. Design your page for each item.

    Now, when an item is clicked, the item page should open.  A back button will return to the page that selected it.



    Monday, June 10, 2013 3:03 PM
  • ^^ Thank you so very very much.  I love you.  Not only have I been able to edit contents in created basic pages, but I've also have been able to create contents in the item detail pages.

    You are a very kind soul. 

    • Edited by RandyPete Tuesday, June 11, 2013 6:14 AM
    Tuesday, June 11, 2013 5:49 AM