We Keep Coding

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.

Terrible performance of MapControl with multiple children in Windows Phone 8.1 Runtime

I have a MapControl which is supposed to be filled with multiple objects (500+). These objects represent some kind of POI. When the user taps on the object (pushpin) I display more info about the POI. So, I need:
A MapControl capable of handling high amount of child objects
Intercept Tappedevent of the child object
In order to achieve the second goal I decided to define my own pushpin template:
<maps:MapControl x:Name="Map">
<maps:MapItemsControl ItemsSource="{Binding Pushpins}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Image Width="40"
Height="40"
Source="{ ... }"
Tapped="OnPushpinTappedAsync"
maps:MapControl.Location="{Binding Location}"
maps:MapControl.NormalizedAnchorPoint="{Binding AnchorPoint}" />
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
This works great except for the fact that.. the visual out of such approach is AWFULL. Every time I move a map, every Pushpin flickers a lot. It's like they are not, I don't know, bound to the position. They are also lagging. It looks really bad. Rendering of those objects is really poor.
The alternative is to add elements to the MapControl's MapElements property. It makes rendering of those objects really nice.
But then I loose binding ability and will have to workaround it - I'm not a big fan of that. There's also a second problem - from what I've read, rendering objects of the MapElements collection is a best effort deal. So it does not guarantee that it will succeed. And that is not an option for me, as in the future I plan to add clustering functionality, so I need to have a full control over what is being rendered on the map and what is not.
Do you have any idea why these MapControl's elements flickers so much? What can I do to prevent it? Thanks in advance for any hint or answer.

I'm facing the exact same problem. Seems to me, that the MapControl is completely broken. There are many more bugs besides performance :(
You cannot really solve the problem, but you can create a "oldschool" WP8.0 Silverlight application and use something like this:
<Page xmlns:map="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps">
<map:Map Grid.Row="1" x:Name="myMap">
<tool:MapExtensions.Children>
<tool:MapItemsControl>
... and so on ...
This performs great but of course you have to change everything from Win(P)RT to Silverlight...

I too faced this problem, but I find this library to be usefull.
Hopefully Microsoft updates the MapControl for Windows 10.

Try this:
Tag="{Binding index_of_collection}"
and this:
OnPushpinTappedAsync()
int index = (int)(sender as Image).Tag; //index_of_collection

WPF blurry font in one control

I have the problem, that the font in my application is blurry. The curious thing is, that only one control (Grid with Columns and Rows) is blurry, the rest works perfect:
I have tried the following parameter, but that changed nothing:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"
SnapsToDevicePixels="True"
The same control (First is correct, second is blurry):
Maybe someone has an idea how to solve this problem, thank you!
ANSWER:
The problem was solved by using (Thank you Heena Patil):
RenderOptions.BitmapScalingMode="NearestNeighbor"

Try this using
RenderOptions.BitmapScalingMode and RenderOptions.EdgeMode="Aliased"
RenderOptions.BitmapScalingMode="NearestNeighbor" or RenderOptions.EdgeMode="Aliased"

Preferred behavior when going from filled to snapped Visual State

I am currently implementing a few snapped views, and I've ran into a problem I couldn't find an answer to. Perhaps you beautiful minds can help me out.
When I drag my app from a filled state to a snapped state, there is a period of about 1 - 1.5 secs where the old "filled" view is still displayed in the snapped viewspace. Doesn't look good! I would imagine there would be a standard behavior that should be applied here. Do I show the splash screen? Do I animate in items (and if so, what event should I listen for)?
Thanks for all help!
Edit: Here is a bit of simplified code from one of my views who experiences this lag - a search results page:
<Grid x:Name="LayoutRoot">
<Grid x:Name="FullViewGrid">
<!-- Two GridViews containing up to 27 items each (not very advanced) -->
</Grid>
<Grid x:Name="SnappedViewGrid">
<!-- Two ListViews doing the same thing, with different item templates -->
</Grid>
</Grid>
Basically I'm implementing my own spin of the standard Search Contract template given in VS2012. I have a feeling the CPU is being stressed a bit too much while rendering these changes in the UI - and that's why things aren't going too smoothly.

Yeah, so this is something you are doing wrong. SnapView doesn't have a delay like that. If you are interested you can review my SnapView walkthrough: http://blog.jerrynixon.com/2012/12/walkthrough-implementing-snapview-in.html
Without a code sample from your app, this is the best I can offer right now. But hopefully this will be all you need to get on the right path for SnapView. Best of luck!

WPF: Textbox scrollbar has no thumb

My textbox is the only control on a window, which is a part of a bigger application. The textbox contains a certain amount of text, large enough to show vertical scrollbar. The scrollbar appears, but without a thumb:
I can still scroll the contents, either with mouse wheel or by clicking the arrow-buttons repeatedly.
When I create a new project with the same window and textbox the scrollbar works as it should. The same happens with a WrapPanel. Do you have ideas what could be spoiling my existing project and causing this issue? In generic.xaml I found some styles overriding the defaults for scrollbar and scrollviewer, but even totally clearing generic.xaml didn't help.
Thanks in advance!
EDIT: right, the code. It's XAML only (no c# backing code).
<Window x:Class="TextBoxTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" MaxHeight="200" MaxWidth="200">
<TextBox x:Name="textbox" MaxLines="2" MaxHeight="50" VerticalScrollBarVisibility="Auto" TextWrapping="WrapWithOverflow">
Useless text..... asdasdasda ssssssssssssss sssssss ssssaokdoka sdojwoandowm nxaofwha398ua ozmca3u0a3j3 a80a9fu 03 u0sf u0s9jf4s 0cuj wuf0j w40 fcjw cujwfj9 c9 u49 wsuc j9w3
3089w 9f8u4wfv 0sf ufw0u w0fuw0 fwu f0uw 09djcazp zopf h43 wofh FYHFWFH WOWY HWO H wohg fujg 4g fugj 4 g0 4
4w fw4 f3f g555u45y 55 some more some moresome more some moresome more some moresome more some moresome more some more.
</TextBox>
</Window>

The answer is astonishing!
Just after I'd started to suspect it might be a WPF bug, I found this forum thread.
Guy who asked the question says: "My application uses a directx renderer from a DLL that's written in C++". Mine does almost the same with the difference that my renderer is written in C# (MDX) and uses D3DImage interop.
Following steps mentioned in the thread above, I moved DirectX initialization from OnInitialize() to Loaded event callback of the main window and now scrollbars regained their expected appearance. It seems that GUI must be displayed first, before the renderer is initialized.
So I guess it's reasonable to talk about a bug in this case.

It seems like a style problem. Remove explicit style setter from the TextBox (check both XAML and code behind). If TextBox has no explicit style, search for implicit styles (defined via TargetType="TextBox" or TargetType="{x:Type TextBox}" and/or x:Key="{x:Type TextBox"}).
Try snooping your application and check ScrollViewer's visual tree. It may give you some insights where to look.
Hope this helps.

At a guess: your TextBox is inside a StackPanel. If you want more than a guess, you'll need to provide code.

You can solve the problem adding CreateFlags.FpuPreserve during the creation of your D3D Device
Example:
this.device = new Device(0, DeviceType.Hardware, this.handle,
CreateFlags.HardwareVertexProcessing |
CreateFlags.PureDevice |
CreateFlags.FpuPreserve, this.pparams);