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?

Answer 1

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();
}

Display HTML in dataGrid RowDetail wpf

Question

1 answers

solution1
0 ACCPTED 2017-01-15 14:20:18

Display HTML in dataGrid RowDetail wpf

Question

1 answers

solution1 0 ACCPTED 2017-01-15 14:20:18

solution1
0 ACCPTED 2017-01-15 14:20:18