How do I include an icon font? - c#

I'm trying to include icon font in my wpf application, but my icon never appears and only displays a rectangle.
Projet structure :
MyProject/
-- Fonts/
-- myFont.ttf
-- MyWindow.xaml
MyWindow.xaml
<Label Text="" FontFamily="/Fonts/#myfont" />
"myfont" is the name of the font (the one I see after "Font name" when I double click on the file). The file's Build Action is set as "Resource".
I also tried the following :
Using style
<Window.Resources>
<Style x:key="MyFont">
<Setter property="TextElement.FontFamily"/Fonts/#myfont" />
</Style>
</Window.Resources>
<Label Text="" Style="{StaticResource MyFont}" />
Using pack URI
<Window.Resources>
<Style x:key="MyFont">
<Setter property="TextElement.FontFamily" value="v/Fonts/#myfont" />
</Style>
</Window.Resources>
<Label Text="" Style="{StaticResource MyFont}" />
None of them work. Moreover, the last one (with pack URI) generates an error. Something like an "index out of range error" (I have VS in French so I can't tell what the message is in English).
Already tried to find a solution on the internet, but all I could find was using pack URI, or checking that the name of the font is correct or that Build Action is set to "Resource".
Thank you.
EDIT
I precise that I don't want to use Blend. I would like to manage to do it directly in code. Thank you.

Wpf supports embedded fonts - the easiest way to set these up is to assign a font to a visual element, such as a label via the font family property. I normally use blend (part of visual studio) which displays a font manager button. You can then embed the font in your application from there.
Otherwise MSDN have a page which details other options. https://msdn.microsoft.com/en-us/library/ms753303%28v=vs.110%29.aspx
If you edit the .csproj file for your project and add the item group...
<ItemGroup>
<BlendEmbeddedFont Include="Fonts\ahronbd.ttf">
<IsSystemFont>True</IsSystemFont>
<All>True</All>
<AutoFill>True</AutoFill>
<Uppercase>True</Uppercase>
<Lowercase>True</Lowercase>
<Numbers>True</Numbers>
<Punctuation>True</Punctuation>
</BlendEmbeddedFont>
</ItemGroup>
You will need a Fonts folder with that .ttf file in there as part of your solution folder. This isn't pretty, but it will work without relying on additional tools.

Related

WPF and FontAwesome problem with hyphenated icons

I am using FontAwesome in my WPF app for icons.
Everything works as expected with single name icons, but whenever I try to use a hyphenated icon name, the font does not understand this, and either does not draw anything, or it draws the two icons (left and right of the hyphen) individually (if they exist).
This draws the user icon. Great.
<!--FontAwesome Font applied in style-->
<TextBlock Style="{DynamicResource mainButtonImage}" Margin="5" Text="user"></TextBlock>
This, draws the User icon, a "-" and a circle icon. It should be the "user-circle" icon.
<TextBlock Style="{DynamicResource mainButtonImage}" Margin="5" Text="user-circle"></TextBlock>
It should be drawing this: https://fontawesome.com/icons/user-circle?style=regular
When I test in notepad on my system, it works as expected.
Any ideas?
I implemented the "user-circle" icon in two ways below:
Method 1:
1.You can install FontAwesome.WPF in project's Package NuGet Manager.
2.Import xmlns:fa="http://schemas.fontawesome.io/icons/" into your XAML code.
3.Use it into your TextBlock like this:
<fa:FontAwesome Icon="UserCircle" FontSize="100"></fa:FontAwesome>
Method 2:
1.Download font awesome at fontawesome.
2.Unzip the file and copy font to the project as a resource. The path is \Font\fa-regular-400.ttf.
3.Add FontAwesome style in Window.Resources:
<Window.Resources>
<Style x:Key="FontAwesome">
<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Font/#Font Awesome 5 Free Regular" />
</Style>
</Window.Resources>
4.Use style in TextBlock and write the Unicode code of user-circle in Text like this:
<TextBlock Text="" Style="{DynamicResource FontAwesome}" />
Maybe you can refer to these two methods to implement your program.

How to disable the default Shadow from Xaml controls which is provided in Windows Build 1903?

So, Windows build 1903 sdk has applied a default "Shadow" on certain xaml controls, as can be seen from the list. I am using CommandBar in a project, and the "See more" button has an associated Popup with it, however I find no way to disable the shadow of it. This shadow does not show in any other previous windows Builds. Reference: https://learn.microsoft.com/en-us/windows/uwp/design/layout/depth-shadow
In the microsoft's blog post regarding this, they have given out the following code to remove shadow from a flyout like object, however they did not specify any code for removing the shadow from other controls.
This particular property in the following code named "IsDefaultShadowEnabled" is only accessible from the FlyoutPresenterStyles, I have tried from other controls, such as GridView, Border, couldn't find it in there. I tried attaching this flyout with the flyoutbase associated with the command bar. but did not help.
I added the code for the commandbar I am having the shadow on.
<Flyout>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="IsDefaultShadowEnabled" Value="False" />
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
<CommandBar Background="Yellow" FocusVisualPrimaryThickness="0" FocusVisualSecondaryThickness="0">
<CommandBar.CommandBarOverflowPresenterStyle>
<Style TargetType="CommandBarOverflowPresenter">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</CommandBar.CommandBarOverflowPresenterStyle>
<CommandBar.SecondaryCommands>
<AppBarButton Label="YELLOW!"/>
<AppBarButton Label="YELLOW!"/>
<AppBarButton Label="YELLOW!"/>
</CommandBar.SecondaryCommands>
</CommandBar>
Can you guys tell me any workaround to fix the shadow issue if there's no direct solution?
With # Faywang - MSFT 's advice, the issue was registered in Win UI team's repository,
Mr. #jevansaks response mentioned of using SDK Build Version 1903 as the Target version, additionally setting the MaxTestedVersion to the version one tested their app on.
https://github.com/microsoft/microsoft-ui-xaml/issues/1136
In conclusion, to fix Shadows, we need to set Target Version for building app to SDK 1903, however we can set MaxTestedVersion to the version we tested our app on, for instance it can be 1809.

MahApps PasswordBox not showing the clear button

I'm using the latest MahApps WPF toolkit and I'm having a bit of trouble with applying my own styles onto its controls, precisely the PasswordBox.
I've defined the styles in a separate .xaml file which is included in the App.xaml file so that it is globally visible, across all .xaml files.
But when I use the style specified under a key the MahApps ClearTextButton refuses to appear on the control.
Here is my style:
<Style x:Key="DefaultPasswordBoxStyle"
TargetType="{x:Type PasswordBox}"
BasedOn="{StaticResource ResourceKey={x:Type PasswordBox}}">
<Setter Property="HorizontalContentAlignment">
<Setter.Value>Center</Setter.Value>
</Setter>
<Setter Property="FontSize">
<Setter.Value>16</Setter.Value>
</Setter>
</Style>
And its usage in a separate .xaml file:
<PasswordBox Margin="{StaticResource ControlMargin}"
controls:TextBoxHelper.ClearTextButton="True"
Style="{StaticResource DefaultPasswordBoxStyle}"
Width="200" />
If I delete the Style attribute the button shows as it is supposed but want to be able to apply my own styles also. It is actually visible in the XAML designer, which is funny. I tried DynamicResource, as well, but with the same results.
So to continue on from the original comments, you had a Type set as your Resource instead of pointing to a Key name. So once you gave your new custom template a proper path to find the original Style template as a BasedOn condition to inherit the rest of the MahApps style then the issue was resolved.
The VS underlining/not locating the resource thing, well I run into that all the time and I'm kind of convinced it's a defect in VS though I wouldn't mind knowing how to clear that off as well. It's annoying since sometimes it will have those errors in the IDE, sometimes it won't, lots of fun.
In the meantime, now that you have your template referencing the correct one as its base with the resource dictionaries referenced properly then all is well in the world again. Hope this helped, cheers!

How to set the Edge label in GraphX

I am using GraphX in Winform project. I am trying to display labels besides the edges. I want to know what property do I have to set in order to display some text in the label.
I have tried setting the 'Text' property of DataEdge, and then calling
ShowAllEdgesLabels(true);
but it does not work this way. Going through the forums I have found that WPF has a way to bind this property to the visual control. The XAML code is as follows
<gxl:EdgeLabelControl x:Name="PART_edgeLabel" Content="{Binding Edge.Text, RelativeSource={RelativeSource TemplatedParent}}" />
Now the question is what is the equivalent of Winform to achieve this functionality.
I found a solution with the help of the admin at the host of GraphX (PantheR).
Basically, we need to add the hostControler for WPF in a windows form.
We need to add a custom XAML template in the resources folder.
We need to load the XAML as a new resource in the code, before we initialize the graph.
We need to add a line of code to merge the resources.
Then in the XAML code we do the binding as mentioned in the question. The code has been updated at the repository to reflect these changes.
The downfall of this solution is that, we need to provide a XAML resource file with the program, but thats just another resource (in my opinion).
For anyone that need some reference code from #ResVic's answer:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:graphx="http://schemas.panthernet.ru/graphx/"
xmlns:local="clr-namespace:YOUR_NAME_SPACE">
...
<Style TargetType="{x:Type graphx:AttachableEdgeLabelControl}">
<Setter Property="ShowLabel" Value="False" />
</Style>
...
</ResourceDictionary>
The Show case demo is protentially helpful for figuring out what stuff the lib could do and how to tweak it to work.

Silverlight defaultStyle problem

I have the following scenario:
Create a new class library project called Lib1
1.1. Add a new control called control1, Themes/generic.xaml file and specify
the default style of control1.
Create a new class library project called lib2.
2.1.Add a new control called control2, Themes/generic.xaml file and specify
the default style of control2. In the dafaultStyle of control2 I use control1.
My question is: Do I have to copy/paste the defaultStyle xaml of control1 into the
generic.xaml of lib2, to use control1 with its style applied in control2?
The default style lookup for a Control is always done in the assembly that the Control is defined in. So if Control1 is defined in Lib1.dll, the default style will always be looked for in generic.xaml in Lib1.dll. It doesn't matter where the Control is being used from.
Just to make sure I understand your answer correctly, I will restate it in my own words:
You want to have a Silverlight class
library (Lib1) that houses a control
(Control1).
You want to have a
Silverlight class library (Lib2)
that houses a control (Control2).
You want to have the control use their respective generic.xaml files for respective control styles.
Control2 is to include Control1 in its style definition, without redefining its style in the generic.xaml file from Lib2.
If this is correct, I will describe my answer below:
Yes, this is possible as Keith Mahoney said here. I will go into detail on his answer and an example.
Each Silverlight class library generates a Dynamic-link library (dll) when compiled. All the classes (controls) and resources (styles) are contained in these dll's. Thus, when you create a lib1 class library with a style resource for a control contained within, it will all be stored in the lib1 dll.
Below is my example of the solution:
Setting up the solution:
First, I created new solution (StackOverflow Example.sln). Then I added a new project to the solution of type Silverlight Class Library (Lib1 1.1). Please note that Silverlight does not always play nicely with spaces in the namespace, so you may want to (as I did) rename the namespace to Lib1. See "How-To's" section for details on how to do this. Next I added the second project to the solution of type Silverlight Class Library (Lib2 2.1). I again, changed the root namespace of this project to one without spaces. Finally, I added a Silverlight Application project to my solution (SLApplication). Please note that in adding the Silverlight application project, you will be prompted to add a web project or web page to your project for creating the Silverlight control. Either option will work, please use the best for your situation. I used the separate website option (default). Now, when we setup the two class libraries, we were given a default starter class1.vb file. Let's rename these file to Control1.vb (for Lib1 1.1) and Control2.vb (for Lib2 2.1) in the solution explorer. When we do this, Visual Studio 2008 asks us if we'd like it to rename the class to match this new name, Click 'Yes'. Next up, let's figure out how to setup the themes for each of our controls.
Setting up themes:
I will start with the first control library (Lib1 1.1). First, create a new folder under the root of the project; name it "Themes" (case doesn't matter). Under this folder, add a new item of type xml and name it generic.xaml. For help on how to do this, see the "How-To's" section. Open the generic.xaml file, if it isn't already open. Delete the xml declaration text that was automatically inserted for you, and use the following for your initial definition:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Styles go here. -->
</ResourceDictionary>
Now, since our Control1 control lives in this class library, we will need to add an xml namespace declaration (xmlns) (http://en.wikipedia.org/wiki/XML_namespace -sorry about the non link, my rep needs to be higher.) to our generic.xaml file. To do this, add the following line: xmlns:lib1="clr-namespace:Lib1" before the grater than symbol (>) in the top declaration. Once this is done, we can layout a simple style. Please note that we're setting the default background color to "Red" in order to differentiate the two controls. Please see below for the simple style for Control1:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lib1="clr-namespace:Lib1">
<!-- Style for Control1 -->
<Style TargetType="lib1:Control1">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="lib1:Control1">
<Grid x:Name="LayoutGrid" Background="{TemplateBinding Background}">
<TextBlock Text="Control 1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
With this let's start with the Control2. This will be very similar to the previous declaration for Lib1 1.1. If you haven't already done so, please add the Themes folder and the generic.xaml file as you did for the first library (Lib1 1.1). Now, for this project, you will need a reference to the Lib1 1.1 project. If you need help doing this, please see the "How To's" section. Once this is referenced, open the generic.xaml file, if it isn't already open. The definition of this file is almost identical; however, we will also be referencing the other projects namespace as well. See below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lib2="clr-namespace:Lib2"
xmlns:lib1="clr-namespace:Lib1;assembly=Lib1">
<!-- Styles go here. -->
</ResourceDictionary>
Notice that now we are not only referencing our own namespace (lib2) but also referencing the other control's namespace (lib1) in the xml namespace declaration. Also notice that in the non-local control library, we also must reference the assembly name. Since we want to use the control (and its style) from lib one, we will need a place to use it in this project. For this, I have setup a grid with separate rows for each control. Please note that we're setting the default background color to "Blue" in order to differentiate the two controls. Please see below for Control2's definition:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lib2="clr-namespace:Lib2"
xmlns:lib1="clr-namespace:Lib1;assembly=Lib1">
<!-- Style for Control2 -->
<Style TargetType="lib2:Control2">
<Setter Property="Background" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="lib2:Control2">
<Grid x:Name="LayoutGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<lib1:Control1 Grid.Row="0" />
<Grid x:Name="Control2" Grid.Row="1" Background="{TemplateBinding Background}">
<TextBlock Text="{TemplateBinding Text}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
This just sets up the fact that we want to have styles. We now need to tell Silverlight that we want these styles to be applied to our controls.
Using themes:
In our classes, we have to tell Silverlight that these are going to be custom user controls, to do this, we need to inherit from Control (or any other UIElement control - for this example, we will stay simple, and use Control). In order to tell the control to use a style defined in the generic.xaml, we need to do this in our constructor of each control.
For Control1:
Public Sub New()
MyBase.DefaultStyleKey = GetType(Control1)
End Sub
For Control2:
Public Sub New()
MyBase.DefaultStyleKey = GetType(Control2)
End Sub
Now all we have to do now, is tell our web site to use our new control(Control2).
Setting up the WebApplication:
You will need to reference both class libraries from your web project. See "How-To's" section for details on how to do this. Open up the Page.xaml file in your web application project (SLApplication). Your default should look something like this:
<UserControl x:Class="SLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
We will add to this the xml namespace declaration for our Silverlight class library (Lib2 2.1) so that we may reference Control2. Now that we have referenced our class library, we can use any controls that are declared within. If you try to use the namespace without building after you add it to your xmlns declaration, you may not see any declared classes (controls) within. To fix this, build once. Please also note, that Visual Studio 2008 is sometimes weird about custom libraries, and may generate an error that says the custom library is not defined. This is fixed with a re-launch of the solution (Close Visual Studio and reopen). The final code to show the Control2 (which contains Control1) is as follows:
<UserControl x:Class="SLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lib2="clr-namespace:Lib2;assembly=Lib2"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<lib2:Control2 />
</Grid>
</UserControl>
Now build, and run. If everything went well, you should see the following:
Screen Shot http://www.imagefrog.net/out.php/i40631_StackOverflowExample.jpg
The full project can be downloaded from Google Code:
http://code.google.com/p/stackoverflow-answers-by-scott/wiki/1366075
Zipped source:
http://stackoverflow-answers-by-scott.googlecode.com/files/1366075.zip
Enjoy!
How-To's:
Change project namespace
In the solution explorer expand the project on which you want to change the namespace, and double click on the "My Project". For Silverlight class library projects, you will have four tabs on the left, one of which is "Silverlight". Select this tab, if it is not already selected. Under the "Root namespace" textbox, change the namespace to your desired namespace.
Add 'generic.xaml' to project
In the solution explorer, right click on the project name. Click "Add", and then click "New Folder". This will create a folder under the root of the project. Name this folder "themes". Please note that case does not matter here. Right click on the "themes" folder, click "Add", then click "New Item...". A dialog box appears for you to select what item type you want to add. Click "XML File" under the Templates section. Change the name to generic.xaml under the name field (at the bottom of the dialog). Click Add.
Create a project reference
To create a project reference, right click on the project that needs the reference. Select "Add Reference..." from the menu. A dialog box will be displayed for you to choose the reference to add. Select the "Projects" tab at the top of this dialog. Select the desired project reference. If you do not see the project that you want to reference in this list, check that you have added the project to the solution.

Categories

Resources