Add own glyph to uwp project - c#

I'm working on my Pivot header (UWP-Project) and wanted to add a custom glyph:
From here:
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" RenderTransformOrigin="0.5,0.5">
Now I want to use custom (or other Glyphs) for example from Fontawesome.
Here the steps:
Added fontawesome.ttf to my project
Changed FontFamily="Segoe.." to FontFamily="../Resources/#FontAwesome"
Changed Glyph to Glyph=""
But instead of the Glyph I'm getting just a empty rectangle. What did I do wrong? Is it maybe not possible in UWP-Projects? This solution here did not help me.

Changed FontFamily="Segoe.." to FontFamily="../Resources/#FontAwesome"
This is where the 2nd part is wrong. What you need is FontFamily="ms-appx:///Path/To/Font/Font.ttf#FontName" - you only have the "#FontName" part.

Related

My Universal Windows Platform Application crashs when I click menu items

I made the Icons of my menu Items using FontIcon and I write 'Segoe Fluent Icons' In the FontFamily section and use It. But when I click on my menu Items, my app crashes. I downloaded the 'Segoe Fluent Icons' font package from Microsoft's site and tried It, but when I restart my PC, the same problem happens again.
My Menu Items Code:
<muxc:MenuBar>
<muxc:MenuBarItem Title="Example">
<MenuFlyoutItem Text="Item1">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xF6FA" FontFamily="Segoe Fluent Icons"/>
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</muxc:MenuBarItem>
</muxc:MenuBar>
I tried your code, it seems that you are missing a semicolon for the value of Glyph property. After adding it, the code could run correctly and the Icon will show.
Code here:
<MenuFlyoutItem.Icon>
<FontIcon Glyph="" FontFamily="Segoe Fluent Icons"/>
</MenuFlyoutItem.Icon>
Result:

How to make the sidebar transition?

I have a simple splitview that has a rectangle of width 4px that indicates the selected item in the spiltview.
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top"
Width="4" Height="48" Margin="1,0"
Fill="{ThemeResource SystemAccentColor}" Grid.Row="2"
Visibility="{x:Bind btnHome.IsChecked, Mode=OneWay}"/>
Right now I've multiple rectangles turned on/off depending whether the checkbox is selected or not! But instead, I want a single rectangle in my code that should transition from the place where it previously was to place where the user has clicked.
Simplest for you would be using the new NavigationView if your minimum version is set to Fall Creators Update or use the HamburgerMenu control from UWP Community Toolkit (note that it's updated to use style very similar to yours, the docs aren't just updated with current screenshots). You can download the UWP Community Toolkit Sample App from Windows Store if you want to see how it currently looks.
If you want to use your custom solution, you should create a custom style or rather edit an existing style of the control you're using as hamburger menu items. Default styles are available for example here.

Notebook-like background for a TextBox in a Windows Phone App

I am trying to create an application to take notes for windows phone 8.1
I want to give the user,a notebook type of feel.
For this I have created the UI for notes, the XAML is:
<Grid Margin="0,12.333,0,-0.333">
<Grid.Background>
<ImageBrush ImageSource="Images/notebookpaper.jpg"/>
</Grid.Background>
<TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0" VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/>
<TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/>
</Grid>
The image notebookpaper.jpg looks like this:
When user types in the text in text box, it looks like:
The problem is that, some characters appear a little above the line, some exactly on the line etc. which looks odd. Also, when I try to scroll, UI appears as:
The text appears striked out, as only the text scrolls and not the background image.
Also I want to be able to provide user a list of 5-6 fonts out of which they can select which one to use for typing the notes.
What should I do, so that the text appears properly aligned and text scrolls properly.
Is there any other way to do this ?
It looks like you have two problems:
Varying line height
Scrolling doesn't match the lines
To solve the first problem, you can probably work with TextBlock.TextLineBounds, talked about a bit in this MSDN blog post and the TextLineBounds enumeration documentation. This only seems to apply to TextBlocks, so you might have to swap between a TextBlock and TextBox as users edit their text.
To solve the second problem, the TextBox styles and templates page has a lot of helpful info. It looks like you can make your ImageBrush the background of your control by overriding TextBoxButtonBackgroundThemeBrush. If that doesn't work when focused, you may have to take the entire template given on the linked page and edit it to put your image in the background (there's a lot of XAML, but you should just be able to put your image in BackgroundElement or just before it).
If it still doesn't scroll, you can try setting ScrollViewer.Background instead; if that doesn't work, you'll need to handle the ScrollViewer.ViewChanging or ScrollViewer.ViewChanged events (probably by overriding it) so that it you can transform the background image by the amount of pixels the scrollviewer has moved.
You can also find the ScrollViewer in your code-behind (and skip dealing with the template) by using VisualTreeHelper. This would allow you to set the background of the ScrollViewer and/or subscribe to its events. This however is more brittle than the other methods and is usually a last resort.

Creating a custom WP7 control with extra XAML parameters

I want to create a control that inherits from TextBox, which has an attribute called 'Filler'. I have the basic control created (named GhostBox), so I can load it in to a sample project and see it on the designer, but I don't know how to create custom XAML parameters (such as Text and Width which already exist). Please explain how to add these?
Example:
<ghostbox:GhostBox Name="ghostBox1" Text="" Height="72" HorizontalAlignment="Left" VerticalAlignment="Top" Width="460" Margin="0,80,0,0" Filler="Filler Text"/>
As you can see at the end of the tag, there is a Filler attribute. That's what I want to add, if I haven't made it clear enough.
Thanks.
They are called Dependency Properties. Have a read of this MSDN article about them.

silverlight toolkit listpicker wp7 missing icons

I'm having a problem with the listpicker (SelectionMode="Multiple"!!!). When i go to fullmode it doesnt show "done", "cancel" icons like if the images were not in my project.
On full screen mode i only have this xaml code
<DataTemplate x:Key="listPickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="30" Height="40" FontFamily="Segoe WP"/>
</StackPanel>
</DataTemplate>
<toolkit:ListPicker Header="Floral" SelectionMode="Multiple" FullModeHeader="Floral" CacheMode="BitmapCache" x:Name="floralListPicker" Margin="0,0,12,0" ItemTemplate="{StaticResource listPickerItemTemplate}" FullModeItemTemplate="{StaticResource listPickerFullModeItemTemplate}"/>
Code is ok, everything works fine but the icons doesn't show, actually it shows as the default app bar missing icon image. I copied the images from toolkit sample but no go.
anyone know whats wrong?
anyway to force icons on template?
thanks.
Do you need to set the Build Action of the icons to "Content" in their properties window?
I found out the solution by exploring the sample solution of the toolkit.
If you don't use a special page for the fullmode selection, you need to include the following images to your project:
Create one subfolder named Toolkit.Content (not ToolKit/Content).
Then, include the files named as this : ApplicationBar.Cancel.png and ApplicationBar.Check.png.
Mark them to be generated as content.
That's all! Your icons should now been displayed.
Hope this helps you !

Categories