Conditional formatting on binding textblock WinRT-XAML

Question

I started my application a month ago, and this is my first time building mobile apps and first time using XAML even though I had some previous experience with C#.

This is the data format that i used :

idAyat  namaKitab   abbKitab   numBab   numAyat  isi
  1     kejadian      kej        1         1     some long string to process blah blah
  2     kejadian      kej        1         2     some long string to process blah blah
  3     kejadian      kej        1         3     some long string to process query blah
  4     kejadian      kej        1         4     some long string to process blah query
  5     kejadian      kej        1         5     some query string to process blah blah

This is my XAML code :

<GridView x:Name="gvResult">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:WrapPanel
                Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="300" />
                </Grid.ColumnDefinitions>
                <TextBlock Width="300" TextWrapping="Wrap">
                    <Underline>
                        <Run FontWeight="Medium" Text="{Binding abbKitab}"/><Run Text=" "/><Run FontWeight="Medium" Text="{Binding numBab}"/>
                        <Run FontWeight="Medium" Text=":"/> <Run FontWeight="Medium" Text="{Binding numAyat}"/>
                    </Underline>
                    <LineBreak/>
                    <Run Text="{Binding isi}"/>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

I'm trying to create a search result page that will bold or change ForeGround color of the "query" that user inserted. I've read many articles and found one thread that said we cannot change style setter from code behind.

Assuming that the article was right, how do I change the foreground color of my textblock in my page? To be more specific, I just want to change the color of the word that matched the search query.

I think it will be more like this maybe :

<Style x:Key="PriorityStyle" TargetType="TextBlock" >
    <Setter Property="Foreground" Value="#6c6d6f" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding Priority}" Value="Critical">
            <Setter Property="Foreground" Value="Red"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

(EDIT)Apparently codes above is not supported by WINRT-XAML, it's WPF-XAML

But how do I target a specific word with that code ? Any suggestions ?

Thank you.

Answer 1

Since WPF triggers are not implemented in WinRT, you could define a DataTemplateSelector on your GridView.

In this TemplateSelector, define two templates, one for "regular" entries, and one for "searched" entries.

In the SelectTemplate method of your template selector, just test the property of your data object, to check if you must apply one template or another.

Answer 2

Thank you guys for all the answer here. But finally, I came up with this :

this is my XAML code from the SearchResultPage.xaml :

   <GridView x:Name="gvResult">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <local:WrapPanel2
                    Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <local:SearchResultUC/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

and this is my SearchResultUC :

<UserControl
    x:Class="BibleApps.SearchResultUC"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BibleApps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>
        <TextBlock Width="300" Grid.Row="0" >
                <Underline>
                    <Run FontWeight="Medium" Text="{Binding abbKitab}"/><Run Text=" "/><Run FontWeight="Medium" Text="{Binding numBab}"/>
                    <Run  FontWeight="Medium" Text=":"/> <Run FontWeight="Medium" Text="{Binding numAyat}"/>
                </Underline>
        </TextBlock>
        <TextBlock TextWrapping="Wrap" Grid.Row="1" local:FormattedTextBehavior.FormattedText="{Binding isi}"/>
    </Grid>
</UserControl>

And THIS is the ANSWER from FormattedTextBehavior.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.IO;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using BibleApps.Common;
using BibleApps.DataModel; 

namespace BibleApps
{
    public class FormattedTextBehavior : DependencyObject
    {
        public static string GetFormattedText(DependencyObject obj)
        {
            return (string)obj.GetValue(FormattedTextProperty);
        }

        public static void SetFormattedText(DependencyObject obj, string value)
        {
            obj.SetValue(FormattedTextProperty, value);
        }

        public static readonly DependencyProperty FormattedTextProperty =
            DependencyProperty.RegisterAttached("FormattedText",
                                                typeof(string),
                                                typeof(FormattedTextBehavior),
                                                new PropertyMetadata("", FormattedTextChanged));

        private static void FormattedTextChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;
            string value = e.NewValue as string;
            string[] tokens = value.Split(' ');
            string[] querytokens = SuspensionManager.SessionState["query"].ToString().Split(' ');
            foreach (string token in tokens)
            {
                Run kata = new Run();
                bool ketemu = false;
                foreach (string querytoken in querytokens)
                {
                    if (token.ToLower().Contains(querytoken.ToLower())) {
                        ketemu = true;
                        break;
                    }
                }
                if (ketemu){
                    kata.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 255, 80));
                    kata.FontWeight = Windows.UI.Text.FontWeights.Bold;
                    kata.Text = token + " ";
                    textBlock.Inlines.Add(kata);
                }
                else {
                    kata.Text = token + " ";
                    textBlock.Inlines.Add(kata);
                }
            }
        }
    }
}

I Thank You all for all your time and your thought..

that really-really helps me..

Thanks :)