Search code examples
c#xamlwindows-phone-8mytoolkit

mytoolkit:FixedHtmlBlock changing styles, xaml


So I'm developing a Windows Phone 8 app, and I'm using mytoolkit:FixedHtmlBlock to display html content. My code is below

<mytoolkit:FixedHtmlTextBlock Html="{Binding Content}" FontSize="24" Foreground="{StaticResource AppForegroundColor}" />

I want to customize the styles of the h3 tags, I found this documentation here https://mytoolkit.codeplex.com/wikipage?title=HtmlTextBlock

It says we can use the following code to customize styles

((ParagraphGenerator)((HtmlTextBlock)html).Generators["h2"]).FontSize = 26; ((ParagraphGenerator)((HtmlTextBlock)html).Generators["h3"]).FontSize = 20; ((ParagraphGenerator)((HtmlTextBlock)html).Generators["h3"]).FontStyle = FontStyles.Italic;

But I can't figure out how to use these, or where to put them. Could someone tell how to use these codes?

Update: So the <mytoolkit:FixedHtmlTextBlock x:Name="pcd" Html="{Binding Content}" FontSize="24" Foreground="{StaticResource AppForegroundColor}" /> is in a resourcedictionary given below stored in Views/DataTemplates/Post1Detail.xaml.

<DataTemplate x:Name="Posts1DetailLayout">
    <Grid Margin="10,5,5,5">
        <ScrollViewer>
            <StackPanel>

                <mytoolkit:FixedHtmlTextBlock Html="{Binding Title}" FontSize="32" Foreground="{StaticResource AppForegroundColor}"/>
                <mytoolkit:FixedHtmlTextBlock x:Name="pcd" Html="{Binding Content}" FontSize="24"  Foreground="{StaticResource AppForegroundColor}" />

            </StackPanel>
        </ScrollViewer>
    </Grid>
</DataTemplate>

The Resource dictionary is accessed in Views/Posts.xaml as

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackgroundColor}">
     <phone:Pivot Name="Container" Grid.Row="0" Foreground="{StaticResource AppForegroundColor}" Background="{StaticResource AppBackground}" SelectionChanged="OnSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
                TitleTemplate="{StaticResource AppPivotTitle}"
                HeaderTemplate="{StaticResource AppPivotHeader}"
                ItemTemplate="{StaticResource Posts1DetailLayout}"
                ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

    </phone:Pivot>
</Grid>

Note that the resource dictionary data template 'Post1DetailLayout' is being used in ItemTemplate="{StaticResource Post1DetailLayout"}

In PostsDetail.xaml constructor I tried doing the following

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows.Navigation;
using System.Windows.Threading;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Net.NetworkInformation;

using Microsoft.Phone.Controls;

using MyToolkit.Paging;

using AppStudio.Data;
using AppStudio.Services;
using MyToolkit.Controls;
using MyToolkit.Controls.HtmlTextBlockImplementation.Generators;
using System.Windows.Resources;
using System.IO;



namespace AppStudio
{
    public partial class PostsDetail
    {
        private bool _isDeepLink = false;


    public PostsDetail()
    {
        InitializeComponent();
        pcd.Generators["h3"] = new ParagraphGenerator()
        {
            FontSize = 26,
        };
    }

I get an error "The name pcd does not exist in the current context". Now how do I access the fixedhtmltextblock name in the resource dictionary and use it in the PostDetail constructor?


Solution

  • <mytoolkit:FixedHtmlTextBlock x:Name="YourHtmlBlock" Html="{Binding Content}" FontSize="24"  Foreground="{StaticResource AppForegroundColor}" />
    
    
    YourHtmlBlock.Generators["p"] = new ParagraphGenerator()
    {
    //change properties here :)
    };
    

    If you want to change more you can make custom ParagraphGenerator.