For conditional styling you have to use data binding converter. First of all create a new class like given below.
public class StatusToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var _status = value.ToString();
if (_status == "To Do")
return new SolidColorBrush(Windows.UI.Colors.Red);
else if (_status == "In Progress")
return new SolidColorBrush(Windows.UI.Colors.Yellow);
else if (_status == "Completed")
return new SolidColorBrush(Windows.UI.Colors.Green);
else
return new SolidColorBrush(Windows.UI.Colors.White);
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Now when you want to use, add it as page's resource like this
<Page.Resources>
<local:StatusToColorConverter x:Key="StatusToColor"/>
</Page.Resources>
And then you have to use that that converter in TextBlock
's foreground property which is bound by Status
. It will return appropriate color according to Status
.
You can use <Run />
to combine text with binding text.
<TextBlock Name="txtStatus" Margin="10,2,0,0" Width="350" TextTrimming="WordEllipsis">
<Run Text="Status :" /> <Run Text="{Binding Status}" Foreground="{Binding Status, Converter={StaticResource StatusToColor}}"/>
</TextBlock>