I was looking in a project and realized that they used some strings like this
<system:String x:Key="icon-arrow-right"></system:String>
and then in a XAML form they used it like this
<Button Content="{StaticResource icon-arrow-right}" />
I wonder how the encoding works and also is there a place to find a list of icons
and their related code like  that I mentioned before?
XAML is essentially xml and that is xml numeric specifying a character.
You can look them up. Often shown as html numeric codes in web pages show such things.
EG α would be alpha.
https://www.rapidtables.com/code/text/unicode-characters.html
You could alternatively find a character from that page and paste it in. Like
<system:String x:Key="icon-alpha">α</system:String>
That would be my preference for a string since you can see it right there.
This is quite a limited way of doing icons though. You ought to get a fairly smooth character if the font size matches what you need because it's true type. But font size doesn't scale.
I tend to use geometries for iconography and fancy lettering. The geometry then defines the data for a path.
I would usually put such geometries in a separate resource dictionary which is merged in app.xaml.
To give you a rough idea.
<Window.Resources>
<Geometry x:Key="icon_Play_Geometry">
"M36,16.8,46.8 36,76.8 36,16.8z"
</Geometry>
</Window.Resources>
<Grid>
<Button>
<Path Fill="Red"
Data="{StaticResource icon_Play_Geometry}"
Stretch="Fill"/>
</Button>
</Grid>
I'd want a bit more sophisticated than just a big triangle fills the button for production code, obviously.
I obtain the geometries using syncfusion metro studio. Which is free. But I think Blend can extract geometries from characters. You can also find svg online and use the geometry out one of those.
For some things where I just have a jpg to work with I use the functionality in inkscape ( which is free ) to automagically "trace" bitmap to vector and export xaml.
Related
I'm currently working on a window that focuses on some elements on screen while blurring the rest of the area.
Using common methods like the WindowCompositionAttribute and the others are not suitable for this situation as there are limitations to it and it doesn't meet the standards regarding the intensity of the blur, contrast and colors which should be strict.
What i have managed to solve my problem was building an image stream with a light image encoder to enhance performance but then that wasn't enough. So, i thought of writing a motion detection algorithm to only steam when there's motion, but it still didn't change the performance drops.
What i need is something like those of the native OSX windows and Windows 10 Start Menu, so how are they created and run efficiently without any heavy load on the performance?
To create a new Window from scratch you have to set WindowsStyle to none (AllowTransparency="True" can be set only along with WindowsStyle="None") and from there build the style of the window.
However, you will face several issues if you follow this approach:
-no buttons (minimize, close)
-no support for fullscreen (taskbar issues)
I would suggest you to have a base view and include the other views inside the main view(which has the blur effect).
The blur effect could be obtained easily by doing something like below:
<Grid>
<Grid Margin="5" Background="#FF3782DC">
<!--<Grid.Background>
<Image Source="test.png"></Image>
</Grid.Background>-->
<Grid.Effect>
<BlurEffect Radius="100" />
</Grid.Effect>
</Grid>
<TextBlock
x:Name="textBlock"
Height="61"
Margin="136,82,211,0"
VerticalAlignment="Top"
Text="test"
TextWrapping="Wrap" />
</Grid>
I've set a color for the background, but you could set an image as background and by default it would be blurred (here you should set a binding and every time the view changes, you have to take a snapshot of the screen and set the source of the Image). However you will probably have some performance issues, but with a good encoder (JPEGencoder) it will be fast enough.
Hope that helps you!
Since the creators update came out, uwp can use svg images as briefly explained here (minute 3).
I have this svg (48x48) and i can use it fine, if (and only if) i set the image's width&height to 48 and the strech to none:
<Image Source="ms-appx:///Assets//check.svg" Height="48" Width="48" Stretch="None"/>
If i set the stretch to fill, the image disappears. If i increase the width and height i can see that the icon is pinned to the upper left corner of the image (screenshot with a different svg but same size). Isn't Stretch=Fill and a fixed height/width the intended way to scale an image?
It looks to my as if the stretching algorithm does not grasp that my svg is supposed to be 48x48. Am i doing it wrong, or are there workarounds?
Okay, so here is how I solved this!
YouTube Video for this!
Open the SVG file
The SVG file Width and Height - set these to auto!
I've been having the same issue all morning and was about to completely give up on Svg support, seems mad that you can't get a scalable format to scale properly...
But, I had one more go and I think I've worked this out.
It seems that you need to tell the SvgImageSource to rasterize at the SVG's original design size and then get the Image to scale it. Not sure it's a particularly helpful approach, but certainly solves it as of build 15063.
<Image Width="24" Stretch="Uniform" VerticalAlignment="Center">
<Image.Source>
<SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg"
RasterizePixelHeight="48"
RasterizePixelWidth="48" />
</Image.Source>
</Image>
So if the SVG was 48x48 we turn it into a bitmap at 48x48 using the RasterizePixelHeight and RasterizePixelWidth values and then the image scales that to 24x24.
Hope that helps.
Update
I just re-read your question and realised that you were looking to increase the scale whereas I've been working to decrease it. Looks as though the technique still works, but as you scale up you're going to lose any sharpness of image due to the bitmap scale process. I think this points to a fundamental flaw in the current implementation. They seem to be rendering the svg as a bitmap, and we have to tell it the original size to get it to render properly, and then they allow the bitmap code to do the rest of the work.
I think it's somewhat debateable whether this is true support or an odd half way house. Somewhere someone suggested that Adobe Illustrator can generate XAML paths, I think I'm going to look at that to see whether I can get a better quality output, shame though because I really like Inkscape :-(
For me, it worked with modifying SVG file like this:
Add appropriate preserveAspectRatio property to svg tag. For me it was "xMinYMin meet".
Set viewbox property of svg tag to this template "0 0 ActualHeight ActualWidth", in my case it was "0 0 1050 805".
Set height and width of svg tag to "auto".
Now svg element is relative to Height, Width and Stretch properties you provide in your XAML page or view.
It might be needed to rebuild the project for XAML Designer to take effect.
SVG File:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1050 805" width="auto" height="auto" ... > ... </svg>
XAML File:
<Image
Width="200"
Source="ms-appx:///Assets/Photos/Illustrations/sample.svg"
Stretch="UniformToFill" />
For me it works only if you set RasterizePixelHeight and RasterizePixelWidth to the svg original resolution (e.g. document properties in Inkscape).
For me it worked without setting those Properties, but adding preserveAspectRatio="xMinYMin" to the <svg ...> tag and deleting width and height from the <svg ...> tag.
I need to create a control, that behaves like a textbox, but allows you to replace some (or all) of the characters with pictures that behave (select and remove with backspace/delete) as a normal characters.
I tried to create a RichTextBox inherited control, with "CanPaste - Paste" construction, but the images added this way didn't act like the characters, but as the images which can be resized. It's not a correct solution for me.
So, the question is: How can I override "symbol drawing" method? I mean, get actual (x,y) coordinates of drawing character, and draw picture instead of it (or in front of it). Is that possible?
Control should look similar to this picture. (lockers on picture are images, acting like symbols.)
UPD: Control must be working on systems from XP to 8, so using UTF-8 lock-style symbol won't be a solution for me. Control shown on the screenshot above works in an application that is running on a Windows XP — though I have no idea which way it was implemented.
What I would is use a PasswordBox with a FontFamily="Segoe UI Symbol" and the PasswordChar="& # xE14D;" (remove the spaces). This will render this:
The complete code: <PasswordBox Password="Example" Width="100" FontFamily="Segoe UI Symbol" PasswordChar="" />
In a view I have a smaller font, foreground is white and background is dark grey.
At the moment I use a drop shadow effect like
<DropShadowEffect BlurRadius="0"
Opacity="0.99"
ShadowDepth="1"
Direction="270"
Color="Black"
This looks zoomed as this:
It works good on bigger fontsizes, but not very good on small scales as can be seen here:
What would be a good text effect to enhance overall readability?
I found this question which uses an outer stroke around the text,
but it does not work at all on smaller fontsizes.
For completeness:
As#sa_ddam213 said use TextFormattingMode.
Furthermore you can experiment with the Anti-Aliasing algorithms via TextRenderingMode.
If you use ClearType, you can additionally experiment with ClearTypeHint.
Alternatives are use larger text or a font specially designed for small sizes like a pixel font.
(Let me give you some context)
I am currently designing an application that is supposed to generate a printable A4 page based on some data.
Naturally, the device independent pixels of WPF (96 pixels/inch) are not a very natural unit of measurement in the paper world. Something like millimetres would be more appropriate. So I got my calculator out and arrived at a scaling factor of something around 3.779.
It turns out that simply slapping everything that's supposed to go on the page in a ScaleTransform has one nasty side effect: Font sizes are scaled too (naturally). This, however, is not what I intended. I would like 12pt Arial to render like 12pt Arial would render normally.
Is there any other way to change the coordinate system without having to call into extensions or whatever to convert each and every coordinate, length, thickness and so on?
- or -
Is there any way to map font sizes on-the-fly, being DependencyProperties? Via a custom control that wraps all the paper content, maybe?
For the outlined requirements you do not need to do anything special at all, just go ahead and use centimeters as unit of measurement for the WPF elements themselves (i.e. without any transform) - the very nature of WPF device independence allows you to to the following:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="29.7cm" Width="21cm" FontSize="16pt">
<Grid>
<TextBlock Text="Sample" Height="1in" Width="1in" FontSize="12pt"
HorizontalAlignment="Center" VerticalAlignment="Center"
TextAlignment="Center"/>
</Grid>
</Window>
That is: you'll get a A4 window specified in 'cm' with a centered square TextBox specified in 'in' and a font specified in 'pt'. All these will scale properly by whatever transform you might apply additionally, if need be (e.g. via a zoom slider for the users view port), respecting their relative sizes regardless of being specified with different units each (i.e. mixed usage at will).
Available units are px (default), in, cm and pt, see for example FrameworkElement.Height for details on their specification.
You can also set sizes in points (FontSize="10pt"), in inches (FontSize="10in") or in centimeters (FontSize="10cm"). Of course the real size depends on the DPI setting of Windows and the DPI of your monitor or printer in this case.
Just set the font size to 12 / 3.779 = 3.175, no? Assign it to the containing object and it should trickle down to all children.