Display HTML in dataGrid RowDetail wpf

Question

I want show Table in rowDetails of dataGrid with html code.First I used RichTextbox .But it doesn't show my style .So I deleted it and use TextBlock . My XAML code is :

<Controls:MetroWindow.Resources>
<DataTemplate x:Key="RowDetailTemplate">
        <Grid x:Name="RowDetailGrid"
              Width="470"
              Height="Auto"
              Margin="5">
             <Border HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    CornerRadius="5">
                <Grid>
                    <TextBlock 
                        Margin="10"
                        HorizontalAlignment="Left"
                        Text="{Binding KalaTozihat}"
                        TextWrapping="WrapWithOverflow" />

                </Grid>
            </Border>
        </Grid>
</DataTemplate>

TextBlock binding to KalaTozihat .It fill like below :

KalaClass.KalaTozihat string s = @"<html><head><style>@font - face {font - family: myFirstFont;src: url(SegoeWP.ttf);}table {border - collapse: collapse;width: 100 %;}th, td {padding: 8px;text - align: right;border: 1px solid   #7B68EE;}.t1{width: 30 %;}th{background - color:#B0C4DE;color:#000080;font - size: 20px;font - family: myFirstFont;}tr: nth - child(even){background - color: #f2f2f2}</style ></head><body><h2> جزئیات </h2><table><tr><th> مقدار </th ><th> خصوصیت </th></tr>" +
"<tr><td>" + item.k_Name + "</td><td class=\"t1\"><strong>:نام</strong></td></tr>" +
"<tr><td >" + item.k_Tedad + "</td><td class=\"t1\"><strong>:تعداد</strong></td></tr>" +
"<tr><td >" + item.k_price.ToString() + "</td><td class=\"t1\"><strong>:قیمت واحد</strong></td></tr>" +
"<tr><td >" + item.k_Product_code + "</td><td class=\"t1\"><strong>:Product code</strong></td></tr>" +
"<tr><td >" + item.k_Signal_loss.ToString() + "</td><td class=\"t1\"><strong>:Signal loss</strong></td></tr>" +
"<tr><td >" + item.k_Current.ToString() + "</td><td class=\"t1\"><strong>:Current</strong></td></tr>" +
"<tr><td >" + item.k_Frequency + "</td><td class=\"t1\"><strong>:Frequency</strong></td></tr>" +
"<tr><td >" + item.k_Input_Voltage + "</td><td class=\"t1\"><strong>:Input Voltage</strong></td></tr>" +
"<tr><td >" + item.k_Output_Voltage + "</td><td class=\"t1\"><strong>:Output Voltage</strong></td></tr>" +
"<tr><td >" + item.k_Matching + "</td><td class=\"t1\"><strong>:Matching</strong></td></tr>" +
"<tr><td >" + item.k_info + "</td><td class=\"t1\"><strong>:توضیحات</strong></td></tr></table></body></html>";

Now I want know how can I show my HTML code in textblock.

Edit

I use the webBrowser instead of TextBlock. like below:

<Controls:MetroWindow.Resources>
<DataTemplate x:Key="RowDetailTemplate">
        <Grid x:Name="RowDetailGrid"
              Width="470"
              Height="Auto"
              Margin="5">
             <Border HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    CornerRadius="5">
                <Grid>
                   <WebBrowser local:BrowserBehavior.Html="{Binding KalaTozihat}" />

                </Grid>
            </Border>
        </Grid>
</DataTemplate>

And Added this Code to mypage.cs

public class BrowserBehavior
  {
      public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached(
         "Html",
         typeof(string),
          typeof(BrowserBehavior),
         new FrameworkPropertyMetadata(OnHtmlChanged));

[AttachedPropertyBrowsableForType(typeof(WebBrowser))]
public static string GetHtml(WebBrowser d)
{
    return (string)d.GetValue(HtmlProperty);
}

public static void SetHtml(WebBrowser d, string value)
{
    d.SetValue(HtmlProperty, value);
}

static void OnHtmlChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    WebBrowser webBrowser = dependencyObject as WebBrowser;
    if (webBrowser != null)
        webBrowser.NavigateToString(e.NewValue as string ?? "&nbsp;");
}

}

But doesn't show successfully . It show's like this

.

How can I fix it?

i binding datagrid to KalalClass . and KalaTozihat is field of KalaClass.this string is Html Code that show my table. — zfarzaneh, Jan 15 '17 at 14:27

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

The only way to show HTML document in WPF is to use it's WebBrowser control. It's highly not-recomended specially if your grid is too large. It's a build in Edge (IE) browser and consumes A LOT of memory.

If you want to use it however, see this.

--Edit--

All right, now this is encoding problem that you are facing. Do have control over the Html content that you are displaying? If yes you should place this in your html head:

<head>
  <meta charset="UTF-8">
</head>

If not, you got to set the encoding manually in load completed event:

<Grid>
    <WebBrowser local:BrowserBehavior.Html="{Binding KalaTozihat}" LoadCompleted="WebBrowser_LoadCompleted"/>
</Grid>

And in code behind:

private void WebBrowser_LoadCompleted(object sender, NavigationEventArgs e)
{
    var webBrowser = sender as WebBrowser;
    if(webBrowser == null) {
        return;
    }
    var doc = (IHTMLDocument2)webBrowser.Document;           

    doc.charset = "utf-8";
    webBrowser.Refresh();
}

edited May 23 '17 at 12:08

Community

1
1

answered Jan 15 '17 at 14:20

Emad

3,809
3
32
44

What do you mean by that? Check the Html, open it by other browser. If it works correctly, then you are not setting the document content correctly. Check the answer in the link I posted. – Emad Jan 15 '17 at 14:30
when I added mywebBrowser.Document.charset = "utf-8"; , doesn't know mywebBrowser. I think it cuse i used it in detailTemplate . – zfarzaneh Jan 15 '17 at 19:57
I mentioned how you should use it but never mind, I blown it out. See the last edit. – Emad Jan 16 '17 at 06:24

Display HTML in dataGrid RowDetail wpf

1 Answers1