How to display HTML article in app? WinRT - c#

I'm creating client-side WP 8.1(appx) app for one website.
Well, let's say that I got html code of some article(with images, lists etc), only article(without site's header etc).
I want to display that article in my WP 8.1 app with article's formatting and images.
How can I do that?
I tried using WebView but it's not what I need, because text in WebView is really small and needs zooming and so on.
* for Tamás Deme *
<RichTextBlock>
<common:Properties.Html>
<![CDATA[ <img width="100" height = "100" src="https://www.google.com/images/srpr/logo11w.png"/> ]]>
</common:Properties.Html>
</RichTextBlock>
It displays p, b tags properly, the only problem is images.
* for Tamás Deme *

You could use the HtmlAgilityPack to parse the page, and then rerender the article's contents in a RichTextBlock.
To do the conversion these two links I found might help: http://blogs.msdn.com/b/tess/archive/2013/05/13/displaying-html-content-in-a-richtextblock.aspx and https://github.com/MacawNL/WinRT-RichTextBlock.Html2Xaml

have you tried the JavaScript Windows Store App templates (available in VS2013)?
you can find some good tutorials here: https://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx?f=255&MSPPError=-2147217396

Related

Unable to retrieve shot location data from NBA.com, while using C# with HTML Agility Pack

I would like to retrieve shot location datasets from HTML webpages on websites such as NBA.com, CBSsports.com and espn.go.com and then do some data analysis.
My problem is I was unable to retrieve that data I need, while using C# with the help of HTML Agility Pack to do HTML scraping.
First. For example, here is a game tracker on CBS sports between LAL and LAC on April 07, 2013. Link address is,
http://www.cbssports.com/nba/gametracker/live/NBA_20130407_LAL#LAC.
I try to capture x and y coordinates values of those red X points and green O points on court graph.
(sorry about I can not post image here due to limited reputation :( )
Safari web inspector is used to randomly get one of those points. It shows,
<div class="homeShot made" playerid="555969" period="1" type="1" ypos="-17" xpos="-1" result="1" time="4:37" distance="25" style="right: 165.53191489361703px; top: 161.6px; "></div>
Noticed that the “ypos” and “xpos” in HTML is what I want exactly.
Then I use C# with HTML Agility Pack to retrieve them.
C# code:
string link = "http://www.cbssports.com/nba/gametracker/live/NBA_20130407_LAL#LAC";
HtmlWeb hw = new HtmlWeb();
HtmlDocument doc = hw.Load(link);
HtmlNodeCollection items = doc.DocumentNode.SelectNodes("//div[#class= 'homeShot made']");
foreach (HtmlNode item in items)
{
// blablabla
}
But error message in visual studio popped up and told me “items reference is null”.
How can I fix that in a right way?
Second. Another issue is on NBA.com. (sorry about that I can not post second link due to limited reputation)
Similarly, Safari web inspector is used to randomly get one of those red and green points. It shows,
<image x="385.12" y="218.3404255319149" width="16" height="16" preserveAspectRatio="none" href="/media/shotchart_legend_o.png"></image>
And I noticed it is bounded in a SVG,
<svg height="613" version="1.1" width="652" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; ">...</svg>
How can I use C# (with or without HTML Agility Pack) to get all of x and y data like “x="385.12" y="218.3404255319149"”?
I appreciate for all of your idea and help :D
The HTML returned by link you give doesn't have any DIV with CLASS='homeShot made' inside it. If you use a browser to inspect the HTML you're looking at an in-memory representation of the DOM, not the content of the file. The Html Agility Pack only handles raw HTML input, it's not a browser.
If you do a view source, you can confirm that.
So, if the content is built by some javascript code, you must use an embedded browser control, not a static tool such as the Html Agility Pack.

Creating a FaceBook Like Button for C# Winforms Desktop Application

I want to link my winforms application to Facebook fanpage,So that a +1 is added when the user clicks the Like button on the Form .How can do it in C# winforms.Is it possible by invoking a URL.
You can get some LIKE button code: http://developers.facebook.com/docs/reference/plugins/like/ it will give you a few options, then you have a choice of delivery formats - choose IFRAME.
you'll get something that looks like this:
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.webbod.info&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true">
</iframe>
You are only interested in the src and the dimensions.
In your winforms application you can host a webbrowser control size it to the dimensions and point it at the src - this will give you an embedded facebook like button.
Facebook allows people to Like URLs, so you'll need to provide one - in my example it's www.webbod.info, but anything should do and by varying the href part of the src url you can let people like any part of the application.

convert html code into xaml for RichTextBox in Windows Phone

how can I format this html code:
<p>For the iPhone do the following:
<ul>
<li>Go to AppStore</li>
<li>Search by M&#229lApp</li>
<li>Download</li></ul>
</p><p>
Android To do this:
<ul>
<li>Go to the Market</li>
<li>Search by M&#229lApp</li>
<li>Download</li>
</ul>
</p>
into XAML for RichTextBox in Windows Phone?
Update
so in result it should be:
For the iPhone do the following:
Go to AppStore
Search by M&#229lApp
Download
Android To do this:
Go to the Market
Search by M&#229lApp
Download
In your code you can Replace < li > tags with & # 8226 ;
See http://www.fileformat.info/info/unicode/char/2022/index.htm
The basic approach is to verify the html as valid and then walk the content converting to the XAML equivalent.
There are lots of examples of attempting this online
It is far more performant to do such a conversion on a server and pull the formatted version to the phone and then display with XamlReader.Load.
Update
For each element in the HTML you'll just be adding a new TextBlock to a container (probably a StackPanel) and for the <li> items you'll just want to prefix with a symbol to represent the bullet and adjust the left margin appropriately. You'll probably benefit from defining appropriate styles and then just applying the appropriate style for the element you're converting.

drawing lines on screen?

I've been reading through a few asp.net articles, and attempting some code, but I think I may be confused. Can you or can you not draw lines on the screen with code on a ASP.NET webform using c#?
If so, can anyone direct me to some examples?
You cannot directly draw on a webform. You may draw on the image and then embed it on your webform (like any other image).
You can make a canvas and then you can draw whatever you want to draw on it.But direct drawing is impossible.
If you are fine with HTML5 you can try lineto Javascript method:
<script>
context.lineTo(100, 200);
</script>
Please refer # following link for more details:
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
Not sure what you mean by "draw a line" but if you are using a web browser you need some kind of HTML object to display this "line". If all you need is a horizontal line you can just add a HR html tag and use CSS toy stylize it. You can also include this line in an image or HTML5 Canvas.
Because there is not screen for your server side code. Your code generates HTML, JavaScript etc. and then browser uses that content to render it on the client screen. So your options are to generate image (draw all that you need) in server side code and send it to the browser, or you can use JavaScript and send browser instructions how to draw lines.
You could probably create a new image using the System.Drawing namespace classes and then do something like dynamically load it into an <img /> tag...but depending on what you're trying to accomplish it may be far easier to either use a JavaScript library of some sort or to use some sort of very simple line image and tweak the length/height using css.
More detail would be needed to understand what you're trying to do. As others have pointed out though, there's no direct way for your C# code to interact with the page. You'd have to have something on the page like an img tag and then set it's source to a C# file like a handler (.ashx). In that handler you could generate the image and then set the response content type as image/jpg and write the raw bytes to the response stream...
Again though, that seems like overkill for something that could be accomplished with CSS or javascript.

How to display Images from internet in a windows phone 7 app?

I am making an application which gets urls of images by parsing an RSS feed.I want to diplay that images in the application one after another when tapped on screen .How can i do it? Is it required to download all images before displaying? Please explain.
Thanks and regards
vaysage
Maybe I don't understand your question correctly but you should be able to set the Source of an Image element directly to an URI specified in your RSS feed item.
<Image x:Name="m_Image" Source="http://www.microsoft.com/silverlight/images/ms-silverlight-logo.png"/>
When changing item (by tapping) you can easily swap the source of the image from your code.
Uri uri = new Uri("...", UriKind.Absolute);
ImageSource imgSource = new BitmapImage(uri);
m_Image.Source = imgSource;
Using LowProfileImageLoader (as mentioned by Thomas Joulin and Mick N) is a good way to load images in the background and keep the UI responsive.
Parse you're RSS Feed to get the images URL's (using for exemple HTTPWebRequest)
Set the binding for the source of each of you images (since it's web based, I recommend LowProfileImageLoader which will load images in the background.
Create a SlideShow.xaml view, based on a pivot. Dynamically add Pivot items
On tap on a thumbnail, launch the SlideShow.xaml, at the specified index
You will need to get the images download in some form.
You might find these posts an interesting read.
Keep a low profile [LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background] - Delay's Blog
**There's no substitute for customer feedback! [Improving Windows Phone 7 application performance now a bit easier with LowProfileImageLoader and DeferredLoadListBox updates] - Delay's Blog

Categories

Resources