I am looking to get a specific behavior on TextBlock so that its height only includes the height of the capital letters (from baseline to top minus "ascender height"). Please see the image Sphinx from Wikipedia to see what I mean. Also the image below may indicate better what I am after.
I am not specifically looking for a pure XAML solution (probably impossible) so a C# code behind (a converter) is also fine.
This is the XAML used in XamlPad to produce the left A in the image above.
<TextBlock Text="A" Background="Aquamarine" FontSize="120" HorizontalAlignment="Center" VerticalAlignment="Center" />
u can try to use attribute LineStackingStrategy="BlockLineHeight" and a Converter on the LineHeight attributes and a converter on the Height of TextBlock.
This a sample code of converters
// Height Converter
public class FontSizeToHeightConverter : IValueConverter
{
public static double COEFF = 0.715;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (double)value * COEFF;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
// LineHeightConverter
public class FontSizeToLineHeightConverter : IValueConverter
{
public static double COEFF = 0.875;
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return double.Parse(value.ToString()) * COEFF;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
The Coefficient used on converters depends on Used Family Fonts (Baseline and LineSpacing):
<TextBlock Text="ABC" Background="Aqua" LineStackingStrategy="BlockLineHeight"
FontSize="{Binding ElementName=textBox1, Path=Text}"
FontFamily="{Binding ElementName=listFonts, Path=SelectedItem}"
Height="{Binding RelativeSource={RelativeSource Self}, Path=FontSize, Mode=OneWay, Converter={StaticResource FontSizeToHeightConverter1}}"
LineHeight="{Binding RelativeSource={RelativeSource Self}, Path=FontSize, Converter={StaticResource FontSizeToLineHeightConverter}}"/>
The best solution is to find how to calculate the Coeff based on parameters Baseline and LineSpacing of the FontFamily.
In this sample (Segeo UI) the Coeff of Height = 0.715 and LineHeight = 0,875 * FontSize.
Updated:
If I understand right, there's a few tricks I know for this,
You can Scale it with RenderTransform which is usually the most efficient way;
<TextBlock Text="Blah">
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="3"/>
</TextBlock.RenderTransform>
</TextBlock>
Or you can embed the TextBlock in a Viewbox to "zoom" the text to fit the bounds of its container if for example you set hard height values on grid rows like;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="120"/>
</Grid.RowDefinitions>
<Viewbox VerticalAlignment="Stretch" Height="Auto">
<!-- The textblock and its contents are
stretched to fill its parent -->
<TextBlock Text="Sphinx" />
</Viewbox>
<Viewbox Grid.Row="2" VerticalAlignment="Stretch" Height="Auto">
<!-- The textblock and its contents are
stretched to fill its parent -->
<TextBlock Text="Sphinx2" />
</Viewbox>
or you can bind the FontSize to a Container element like;
<Grid x:Name="MyText" Height="120">
<TextBlock FontSize="{Binding ElementName=MyText, Path=Height}" Text="Sphinx" />
</Grid>
They might present the effect you're after?
Related
As of now, i assign the image of a TreeView item using a direct binding to the image's source:
<DataTemplate DataType="{x:Type local:GeoPoint}">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Color}" Height="32" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
the Color binding is referring to string containing the path to the PNG, something like "/Resources/red.png"
i would like to make the Color variable of custom type "MarkerColor", an enum containing several colors, and have the image source binding reference this value, so that if
Color = MarkerColor.green; the binding would reference "/Resources/green.png"
Note that the name of the PNG is not necessarily the same as the name of MarkerColor, an "adapter" should be used to convert the type
I know how to do this in Java Android SDK, but not really sure on how to achive this in Wpf
You could create a converter that knows how to convert the enumeration value to a valid resource:
public class ColorResourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
MarkerColor color = (MarkerColor)value;
Uri uri;
switch(color)
{
case MarkerColor.Green:
uri = new Uri("Resources/green.png");
break;
case MarkerColor.Red:
uri = new Uri("Resources/red.png");
break;
//...
default:
uri = new Uri("Resources/default.png");
break;
}
return new BitmapImage(uri);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
Usage:
<DataTemplate DataType="{x:Type local:GeoPoint}">
<DataTemplate.Resources>
<local:ColorResourceConverter x:Key="ColorResourceConverter" />
</DataTemplate.Resources>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Color, Converter={StaticResource ColorResourceConverter}}" Height="32" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
I have a TextBlock inside a custom user control that I would like to be slightly larger (maybe 7% larger) than the global font size property for that user control. I am unsure of the best way to go about this. Does anyone have any suggestions?
(Obviously this attempt is atrocious, but hopefully it helps visualize what I'm asking).
<TextBlock
x:Name="Title"
FontSize="{myUserControl.FontSize * 1.07}">
Hello Custom User Control!
</TextBlock>
The best answer (credit to #Kenny) is a simple converter that takes the user control font size as it's input.
Use in xaml:
<z:RatioConverter x:Key="AdjustTitleFontSizeConverter" Ratio="1.07" />
<TextBlock
x:Name="Title"
FontSize="{Binding FontSize, Converter={StaticResource AdjustTitleFontSizeConverter}">
Hello Custom User Control!
</TextBlock>
RatioConverter.cs
using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
public class RatioConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// Input santize first..
return (System.Convert.ToDouble(value)) * this.Ratio;
}
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
public Double Ratio
{
get { return (Double)GetValue(RatioProperty); }
set { SetValue(RatioProperty, value); }
}
public static readonly DependencyProperty RatioProperty = DependencyProperty.Register(
"Ratio", typeof(Double), typeof(RatioConverter), new FrameworkPropertyMetadata(1.0));
}
Apply ScaleTransform with a desired scale factor.
In this example all TextBlock inherit FontSize=20 from parent Window (it is Dependency Property inheritance). Then I change FontSize to 22 for one TextBlock, and scale another (20 * 1.1 == 22). They look similar to me.
<Window x:Class="WpfDemos.FontWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WpfDemos" Height="300" Width="300" FontSize="20">
<StackPanel>
<TextBlock Text="Hello Custom User Control!"/>
<TextBlock Text="Hello Custom User Control!"/>
<TextBlock Text="Hello Custom User Control!">
<TextBlock.LayoutTransform>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</TextBlock.LayoutTransform>
</TextBlock>
<TextBlock Text="Hello Custom User Control!" FontSize="22"/>
<TextBlock Text="Hello Custom User Control!"/>
<TextBlock Text="Hello Custom User Control!"/>
</StackPanel>
</Window>
You can use https://www.nuget.org/packages/CalcBinding/ library for this.
I'm developing a small application that needs to check some availability properties. I'm using for the user interface WPF. I need to change some foreground colors if a selection from a combobox. I have this DataTemplate:
<DataTemplate x:Key="userTemplate">
<TextBlock VerticalAlignment="Center">
<Image Source="imgsource.png" Height="25" Width="25" />
<Run Text="{Binding BooleanObjectName}" Foreground="{Binding boolobject, Converter={StaticResource convAvailability}}"/>
</TextBlock>
So I'm using for this convertion a IValueConverter that sets the color to the foreground:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
BooleanObject boolobject = (BooleanObject)value;
if (boolobject.IsBoolValueOne) return System.Drawing.Brushes.Green;
else if (boolobject.IsBoolValueTwo) return System.Drawing.Brushes.Red;
else if (boolobject.IsBoolValueThree) return (SolidColorBrush)(new BrushConverter().ConvertFrom("#d3d300"));
else return System.Drawing.Brushes.Black;
}
What is wrong with this, because in my interface I'm always getting the black color. Any thoughts on this ?
Any help would be very much appreciated.
Thanks in advance.
As pointed out by #Funk you return the wrong kind of brushes. You should return a System.Windows.Media.Brush object:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
BooleanObject boolobject = (BooleanObject)value;
if (boolobject.IsBoolValueOne)
return System.Windows.Media.Brushes.Green;
else if (boolobject.IsBoolValueTwo)
return System.Windows.Media.Brushes.Red;
else if (boolobject.IsBoolValueThree)
return (SolidColorBrush)(new BrushConverter().ConvertFrom("#d3d300"));
return System.Windows.Media.Brushes.Black;
}
Then it should work provided that your binding to the boolobject property actually works. Otherwise your converter won't get invoked at all.
If you want to bind to the object itself, you should specify a path of '.':
<TextBlock VerticalAlignment="Center">
<Image Source="imgsource.png" Height="25" Width="25" />
<Run Text="{Binding BooleanObjectName}" Foreground="{Binding Path=., Converter={StaticResource convAvailability}}"/>
</TextBlock>
I have a ListBox, which uses data binding for content (bound to an ObservableCollection), and an ItemTemplate for layout. Within the ItemTemplate, there is a TextBlock displaying a date (from the ObservableCollection), and a colored Rectangle.
I want the rectangle's fill color to change based on the date (to indicate age). However, since the Rectangle itself isn't bound to the date (and I don't see how it could be), I haven't been able to get a DataTrigger to work to alter the fill color.
Is there another way to get the Rectangle color to be controlled by the data binding?
Edit:
Here is a (simplified) copy of my ListBox ItemTemplate, as requested. Right now, the Rectangle's fill is a set color, but I want to change it to vary based on the targetstartdate field.
<ListBox Name="listBox1" ItemsSource="{Binding Path=testList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FF009A00" Width="5" StrokeThickness="1" Margin="0,1,4,1"/>
<TextBlock Text="{Binding targetstartdate}" Margin="0,0,0,4" Foreground="#FF009A00" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can bind the rectangle's Fill or Stroke property to the Date. Then, use an IValueConverter to convert the date to the appropriate color.
<Window.Resources>
<local:DateToBrushConverter x:Key="DateToBrushConverter" />
</Window.Resources>
<Rectangle Fill="{Binding targetstartdate,Converter={StaticResource DateToBrushConverter}}"
... />
The Convert method should return a Brush object, which matches the Rectangle.Fill property.
public class DateToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var date = value as DateTime?;
if (!date.HasValue)
return new SolidColorBrush(Colors.Transparent);
else if (!date.Value > DateTime.Today.AddDays(-1))
return new SolidColorBrush(Colors.Blue);
// etc
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Bind rectangle's color to an IValueConverter, use the date as binding and determine the color based on the date inside the IValueConverter class.
I am using IValueconverter interface to change the tooltip text of an image.
The tool tip should change based on label.
<Label Content="9898980001" Height="28" HorizontalAlignment="Left" Margin="1733,231,0,0" Name="lbl02scanning" VerticalAlignment="Top" Foreground="Blue" >
<Image Height="49" HorizontalAlignment="Right" Margin="0,131,113,0"
Name="img02scanning"
Source="/TEST;component/Images/LoadingStation.png" Stretch="Fill"
VerticalAlignment="Top" Width="30" Cursor="Hand">
<Image.ToolTip>
<StackPanel Background="AliceBlue">
<TextBlock Padding="5" Foreground="White" MinHeight="20"
Background="Blue" FontWeight="Bold"
Text="Scanning Station" />
<StackPanel Orientation="Horizontal">
<Image
Source="pack://application:,,,/TEST;component/Images/coilonsaddle_large.png"
Height="100" Width="100" />
<TextBlock Padding="10" TextWrapping="WrapWithOverflow"
MaxWidth="200" Background="AliceBlue"
Foreground="Black" FontWeight="Bold"
Text="{Binding ElementName=lbl02scanning, Path=Name,
ConverterParameter=255,
Converter={StaticResource FormatterFOrCoilToolTip}}"/>
</StackPanel>
<TextBlock Padding="5" Foreground="White" MinHeight="20"
Background="Blue" FontWeight="Bold"
Text="Report to admin in case of coil location mismatch"/>
</StackPanel>
</Image.ToolTip>
</Image>
The converter class:
public class FormatterForCoilToolTip : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if(parameter.ToString() == "02")
{
return value.ToString() + " Startin";
}
else
{
return value.ToString() + " Finishing";
}
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
The tooltip's Textblock content is not changing. But if i change to:
Text="{Binding ConverterParameter=255, Converter={StaticResource FormatterFOrCoilToolTip}}
then it is working. But i want to pass the lbl02scanning text value. Why it is not working??
First of all you should bind to Content property and not Name property in case you want Text of Label.
Most importantly Tooltip does not lies in same Visual Tree as that of label, hence binding with elementName won't work. However, you can use x:Reference to get the element even if it doesn't exist in same Visual Tree.
Text="{Binding Source={x:Reference lbl02scanning}, Path=Content,
ConverterParameter=255,
Converter={StaticResource FormatterFOrCoilToolTip}}"/>
Note - x:Reference is introduced in WPF 4.0. If you are using WPF 3.5 you can't use this.
Update for error - service provider is missing the name resolver service
Just found out bug is reported at Microsoft site that x:Reference fails in case Target is Label. However, i couldn't reproduce this issue at my end since i have WPF 4.5 installed at my end and i guess they have fixed the issue in future version.
In case you target WPF 4.0, i would advise you to use TextBlock in place of Label:
<TextBlock Text="9898980001" Height="28" HorizontalAlignment="Left"
Margin="1733,231,0,0" Name="lbl02scanning" VerticalAlignment="Top"
Foreground="Blue" />
and then bind with Text property instead of Content.
Text="{Binding Source={x:Reference lbl02scanning}, Path=Text,
ConverterParameter=255,
Converter={StaticResource FormatterFOrCoilToolTip}}"/>
Either, you can refer to workaround provide under workarounds section here.
You can override the ProvideValue method of the Reference class and skip the reference search login in design time:
[ContentProperty("Name")]
public class Reference : System.Windows.Markup.Reference
{
public Reference()
: base()
{ }
public Reference(string name)
: base(name)
{ }
public override object ProvideValue(IServiceProvider serviceProvider)
{
IProvideValueTarget valueTargetProvider = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget;
if (valueTargetProvider != null)
{
DependencyObject targetObject = valueTargetProvider.TargetObject as DependencyObject;
if (targetObject != null && DesignerProperties.GetIsInDesignMode(targetObject))
{
return null;
}
}
return base.ProvideValue(serviceProvider);
}
Update with another workaround
This will work for all versions WPF 3.5, WPf 4.0 and WPF 4.5.
First of all bind Image Tag with content of label.
Second host your stackPanel inside ToolTip control so that you can
take benefit of PlacementTarget property.
Third bind with PlacementTarget.Tag of Tooltip.
Relevant code will look like this:
<Image Tag="{Binding ElementName=lbl02scanning,Path=Content}">
<Image.ToolTip>
<ToolTip>
<TextBlock Text="{Binding RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=ToolTip},
Path=PlacementTarget.Tag,
ConverterParameter=255,
Converter={StaticResource FormatterFOrCoilToolTip}}"/>
</ToolTip>
</Image.ToolTip>
</Image>
Also you need to update converter code to put null check over there since PlacementTarget will be null until you open tooltip.
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
if (value != null)
{
if (parameter.ToString() == "02")
{
return value.ToString() + " Starting";
}
else
{
return value.ToString() + " Finishing";
}
}
return String.Empty;
}
Try This
Text="{Binding Path=Content,ElementName=lbl02scanning, ConverterParameter=255, Converter={StaticResource FormatterFOrCoilToolTip}}