I have applied SmallCaps as shown below, but it doesn't seem to have any effect on in the browser or in a design window.
<TextBlock Text="Text Here !" Typography.Capitals="SmallCaps"/>
Why is Typography.Capitals parameter ignored? Are there any settings that need to be enabled for this ?
UPDATE
It seems that for these properties to work, the font used must support them. Silverlight can not perform magic with the font, it can only work with the features built into the font itself. And it seems that there are some differences between different versions of Windows, which made this even more confusing. I have tried this on Windows 7 and 8 using the following fonts:
Gabriola, Georgia, Verdana, Arial, Comic Sans MS, Calibri, Segoe UI, Portable User Interface
On both Win7 and 8 the only properties that ever worked were SmallCaps and AllSmallCaps. None of the other settings made any difference whatsoever, neither on Win7 or Win8. On Windows 8 these two properties worked for all the fonts listed above. On Windows 7 the only fonts where they did work were Calibri and Gabriola. I then started looking into the versions of the fonts installed on the two different machines. It turns out they are different. For example, on my Win7 machine both Verdana and Segoe UI is of version 5.05. On the Win8 machine Verdana is version 5.31 and Segoe UI is version 5.28.
So I think this is why we get different results on different machines. It has nothing to do with Silverlight, but with the versions of the fonts installed on the client machine. The version of Verdana installed on Win7 has no support for SmallCaps and AllSmallCaps, but the version that comes with Win8 does have that support.
END UPDATE
I am definitely seeing a difference with SmallCaps and AllSmallCaps. The rest of the values don't seem to do anything. It could depend on the FontFamily used I suppose. Any way, the following code renders like the screen shot below.
<ContentControl FontSize="18"
FontFamily="Segoe UI">
<StackPanel>
<TextBlock Text="Writing Some Text Here in the Text Block. AllPetiteCaps"
Typography.Capitals="AllPetiteCaps"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. AllSmallCaps"
Typography.Capitals="AllSmallCaps"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. Normal"
Typography.Capitals="Normal"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. PetiteCaps"
Typography.Capitals="PetiteCaps"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. SmallCaps"
Typography.Capitals="SmallCaps"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. Titling"
Typography.Capitals="Titling"></TextBlock>
<TextBlock Text="Writing Some Text Here in the Text Block. Unicase"
Typography.Capitals="Unicase"></TextBlock>
</StackPanel>
</ContentControl>
I'm not sure how much difference there is between WPF and Silverlight on this, but apparently for WPF the font has to be an OpenType font. According to wpf.2000things.com:
WPF includes a Typography class, which allows setting various attached properties for textual elements. These properties only affect text that is rendered using an OpenType font.
And in Programming WPF, 2nd Edition:
WPF supports both TrueType and OpenType fonts. OpenType fonts often contain
many alternates to the basic set of character shapes in order to support advanced
typographical functionality. If you are using a low-level text-handling feature such as
GlyphRun, you can use these alternates directly, referring to them by glyph index. But
if you are using the higher-level elements, such as TextBlock or the FlowDocument
viewers, these can locate and use the appropriate glyphs for you. You can control
which character shapes are used with the attached properties defined by the
Typography class.
Related
I am working on a simple WPF app that needs to be accessible for people with impaired vision.
I am testing my app with the Windows 10 -> Settings -> Ease of Access -> Display -> Make text Bigger slider setting.
I have some section titles (TextBlock) that I want to have a bigger font than the rest of the labels and text in the window. However, if I use the FontSize attribute to make it bigger it is no longer affected by changes to the system text size. Thus, while all other text that hasn't FontSize set gets bigger, the ones that do remain at their fixed size.
Is there a simple way to make some text relatively bigger than the rest while not setting a specific font size value?
Is there a simple way to make some text relatively bigger than the rest while not setting a specific font size value?
I am afraid there is no support for relative font sizes in WPF but you could try to apply a ScaleTransform:
<TextBlock Text="Bigger">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="1.2" ScaleY="1.2" />
</TextBlock.RenderTransform>
</TextBlock>
This achieved exactly what I wanted. It is not the prettiest, but it works well.
https://github.com/dotnet/wpf/issues/3701
I am working on a Windows application using WPF Ribbons. On these ribbons, there are controls with images, which are specified by (Large/Small)ImageSource, just like in this sample:
<Ribbon>
...
<RibbonGroup>
<RibbonToggleButton Name="NotExecutedQCButton" Margin="8,0,8,0"
Command="{Binding FilterNotExecutedCommand}"
IsChecked="{Binding NotExecutedChecked, Mode=TwoWay}"
LargeImageSource="pack://application:,,,/Sensor.UserControls;component/Icons/icons8.com/qc_notExecuted.png"
Label="Not Executed"/>
<RibbonButton Name="AllQCButton" Margin="8,0,8,0"
Command="{Binding FilterAllCommand}"
LargeImageSource="pack://application:,,,/Sensor.UserControls;component/Icons/icons8.com/qc_erase.png"
Label="Remove Filters"/>
</RibbonGroup>
...
Now when I use 48x48 pixel images here, they show up blurry and distorted. Just like here:
Images do not render correctly in WPF ribbon control
When I rescale the images to 32x32, it shows up fine. This is due to the RibbonImageSize having a fixed value which can be found here:
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.ribbon.ribbonimagesize?view=netframework-4.8#System_Windows_Controls_Ribbon_RibbonImageSize_Large
According to this doc:
A Small image is typically 16x16 pixels at 96 dpi. A Large image is typically 32x32 pixels at 96 dpi.
Notice the word "typically". When doing some further research, this value seems to depend on the dpi of the monitor being used:
https://learn.microsoft.com/en-us/windows/desktop/windowsribbon/windowsribbon-imageformats
This document states that I need to provide differently scaled versions of the image to support different monitors, like this:
<Command.LargeImages>
<Image Source="res/CutLargeImage32.bmp" Id="116" Symbol="ID_CUT_LARGEIMAGE1" MinDPI="96" />
<Image Source="res/CutLargeImage40.bmp" Id="117" Symbol="ID_CUT_LARGEIMAGE2" MinDPI="120" />
<Image Source="res/CutLargeImage48.bmp" Id="118" Symbol="ID_CUT_LARGEIMAGE3" MinDPI="144" />
<Image Source="res/CutLargeImage64.bmp" Id="119" Symbol="ID_CUT_LARGEIMAGE4" MinDPI="192" />
</Command.LargeImages>
Now where do I put this code in my example? I don't have a Command in my code like in the example, and the RibbonButton or other Ribbon control elements do not have a LargeImages property.
Or better, how can I know for sure these fixed values of 16x16 or 32x32 are always being used? If I can't, how can I provide these values for the ribbon controls in my applications? Right now I'm not interested in having different sizes across monitors and I'm fine with using one hard-coded resolution for all the images (one for small, one for large) on every monitor. But now it seems that when I run my application on a machine with a different monitor, the images might be blurry. Even when I manage to specify images for all these four cases, it will not work on monitors that do not have one of these four specified DPI values.
All I want is to be sure that these images are not blurry, at least on standard modern monitors. How can I achieve this?
Or better, how can I know for sure these fixed values of 16x16 or 32x32 are always being used?
Look in the default ControlTemplate for the control. You'll find it in the System.Windows.Controls.Ribbon.dll assembly which is located in C:\Windows\Microsoft.NET\Framework64\v4.0.30319\WPF.
If you decompile it using a tool such as dokPeek and look at the templates in the themes folder, you will notice that the Image elements that bind to the LargeImageSource property has a fixed width and weight of 32 and that the images that display the SmallImageSource has a fixed widht and heigt of 16.
You probably want to modify the templates if you intend to display images of any other sizes.
I am facing display issues with winforms in window 10 OS. The fonts used for forms is 'Estrangelo Edessa’. In windows 10, this font doesn't come installed by default and hence text/content looks ugly (cutoff/improperly sized). So i am thinking to change the font that looks closer to 'Estrangelo Edessa' and will be native to windows 7, 8 and 10. Please suggest one such font.
I suggest trying Verdana or Lucida Sans Unicode as they have similar proportions to Estrangelo Edessa. Alternatively, Calibri is narrower but otherwise similar and nicer to read.
You may also want to look into having your forms size the controls so text is never cut off, just in case. For example, all WinForms controls have a PreferredSize property.
I cannot figure out how to determine how to render a specific OpenType font correctly in WPF (.NET 4.5 / VS2012 / Windows 8). I have a font installed on my computer called "DINPro-BlackItalic".
The file name is: DINPro-BlackItalic.otf
Windows reports the font name is: DINPro-BlackItalic
In WPF, I do something simple, like this:
<TextBlock Text="This is a sample sentence in DINPro-BlackItalic"
FontFamily="DinPro-BlackItalic" FontSize="24" />
or FontFamily="#DinPro-BlackItalic"
This doesn't work (clearly not italic) and it falls back to the default font. I've tried lots of other variations which do work for other fonts in the font directory.
For example, Comic Sans works: FontFamily="Comic Sans MS" (awesome...)
Now, this is why I am really confused: If I just guess at a different way to punctuate the font name, it renders correctly!
This works: FontFamily="Din Pro Black Italic"
In summary, here is a screen shot of different FontFamily settings in WPF:
Two questions:
1) How am I supposed to guess at the right way to tell WPF to render this font? It must have a canonical name registered somewhere but it isn't visible in the filename, file properties, or the Font Name that Windows reports after it has parsed the file.
2) What's worse is that if I'm attempting to render the same font in a desktop application and on the Web, browsers like Chrome on Windows and even IE expect "DINPro-BlackItalic" and will not render the spaced out version of the name. It seems that WPF and windows browsers make mutually exclusive decisions about which Font Name to use to index fonts. How do I work around this for arbitrary fonts?
You can pack the font with the Application, and you can refer it from the project directory.
Say if you place the font inside Fonts Directory in the Project.
You can add as follows,
<TextBlock FontFamily=”/Fonts/DINPro-BlackItalic.otf#DinPro-BlackItalic”/>
So you can be sure the, font gets deployed with the application.
Okay so I think i found the solution..
<TextBlock FontFamily=”/Fonts/DINPro-BlackItalic.otf#Din Pro”/>
or
<TextBlock FontFamily=”/Fonts/DINPro-BlackItalic.otf#Din Pro Black Italic”/>
Havn't tried your code, but This seemed to work for me.. Referencing the path of the file+fontname
Opentype files have a commen name they share. And this is where it gets tricky, because you can only see this name if you install the font on your pc, and check it in the familytree. Like you showed before in your question:
FontFamily="Din Pro Black Italic"
This is my experience, not 100% sure that i'm correct, only that it works for me :)
For WPF, Better to try it with designer for selecting the font for Textblock
For Browsers, It can be tried with Label or any other UI controls to display.
The syntax that works for me is:
/{Application Name};component/{Font Folder in Project}/#{Font Name (not filename)}
Example:
/ApplicationName;component/Fonts/#Proxima Nova Lt
Why does WPF render differently on Windows XP vs Windows 7?
I'm using .NET SP1 on both computers..
My layout is like this window that has no toolbar and is set to maximize so it fits the whole screen.
Under that, I have a Viewbox set to use Stretch: Uniform, and under that I have my LayoutRoot.
This way I hoped to get the same layout on all computers, but it seems it doesn't render exactly the same on Windows XP. Some items are a bit smaller and the layout doesn't look that great.
I have tried to change my resoulution on my Windows 7 computer to the same as the Windows XP computer, and it keeps the layout like it is supposed to.
And both computers use 96 DPI.
Windows XP
Windows 7
Took me about three hours to finally figure this out - after much detective work, but now it is pixel perfect!
It appears that WPF on Windows XP and WPF on Windows 7 not only have different default font faces as well as a default font sizes.
I had a problem where fonts were rendering differently on Windows XP from how they were on Windows 7. It was quite critical since the final output was to the printer, and they needed to be identical. It appeared initially that the problem was a difference in line spacing.
Yes - I had the same exact font installed on Windows XP as I was using on Windows 7
Yes - I tried a very generic font (Arial) and still had the same problems.
Yes - Same DPI on both machines.
Yes - Same result whether in a VM (Windows XP Mode) or on a real Windows XP machine.
Eventually I discovered that the fonts where I was specifying an explicit size looked identical on Windows XP, and only the ones where I didn't specify an explicit size were they different.
So here's how I fixed it in my MainWindow.xaml - with a ContentControl to set a default size:
<Grid x:Name="LayoutRoot" Background="#FFDEDEDE" UseLayoutRounding="True">
<ContentControl FontFamily="Segoe UI" FontSize="12">
... window contents ...
</ContentControl>
</Grid>
Note: If you're using Blend you may need to enter FontSize="12" by hand. If you select it from the properties designer it will delete it, because it thinks 12 is already the default!
Like I said my destination was the printer - so I had to do the same for the control being printed.
Where else can I set this default font size? Anyhow, I now have pixel perfect rendering on Windows XP and Windows 7, and they differ only by the cleartype anti-aliasing differences.
Note: UseLayoutRounding is not part of my solution - but I always use it on my root control also.
The default fonts are different
Make a WPF button
<Button x:Name="button" Width="100" Height="25" Content="Button" Click="Button_Click"/>
and code behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
string msg = string.Format("Number of fonts: {1}{0}Font Family: {2}{0}Font Size: {3}",
Environment.NewLine,
button.FontFamily.FamilyNames.Values.Count.ToString(),
button.FontFamily.FamilyNames.Values.First().ToString(),
button.FontSize.ToString());
MessageBox.Show(msg);
}
Run this on each operating system and you will see that the default fonts for XP and Windows7 are different.
Default font for XP is “Tahoma” size 11
Default font for Windows 7 is “Segoe UI” size 12
My experience:
I'm not sure if it is the issue, I noticed Windows 7 uses hardware acceleration to draw the WPF application. Windows XP doesn't.
You can check if this is the case by using something like this:
public partial class App
{
public static int Tier { get { return RenderCapability.Tier >> 16; } }
static App()
{
Console.Out.WriteLine("Render Tier: {0}", Tier);
}
}
Your rendering tier should return 2 if it used full hardware accelerated drawing. 0 = software, 1 = something in the middle if guess
Different versions of Windows have different default fonts (also different versions of the same fonts) and different font rendering engines - as a result the text size is different between systems.
You can try to set the font to the same font and see how it works, maybe try several fonts to check where the difference is smallest.