Laptop-like background for TextBox in Windows Phone app
I am trying to create a note-taking app for Windows Phone 8.1. I want to give the user the type of laptop. For this, I created a UI for Notes, XAML:
<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 notebookpaper.jpg image looks like this:
When the user enters text in the text box, it looks like this:
The problem is that some characters appear slightly above the line, some exactly on the line, etc. which looks strange. Also, when I try to scroll, the UI is displayed as:
The text appears strikethrough because only the text scrolls, not the background image. Also I want to provide the user with a list of 5-6 fonts from which they can choose which one to use for entering notes.
What should I do to make the text look correct and the text scrolls correctly. Is there any other way to do this?
source to share
It looks like you have two problems:
- Changing the line height
- Scrolling doesn't match lines
To solve the first problem, you can probably work with TextBlock.TextLineBounds , talked a bit in this MSDN blog post and TextLineBounds text documentation . This is only similar to TextBlocks, so you may have to swap the text between the TextBlock and the TextBox as users are editing their text.
To solve the second problem, the TextBox page and the templates page contain a lot of useful information. It looks like you can customize ImageBrush
your control's background by overriding TextBoxButtonBackgroundThemeBrush. If that doesn't work, you might need to take the entire template listed on the linked page and edit it to put your image in the background (there's a lot of XAML in there, but you should just place your image in the BackgroundElement or directly in front of it).
If it still doesn't scroll, you can try installing ScrollViewer.Background
; if that doesn't work, you need to handle the events ScrollViewer.ViewChanging
or ScrollViewer.ViewChanged
(perhaps overriding it) so that you can transform the background image by the number of pixels moved by the scrollviewer.
You can also find the ScrollViewer in your code (and skip the template call) using the VisualTreeHelper . This will allow you to set the background ScrollViewer
and / or subscribe to its events. It is, however, more fragile than other methods and usually a last resort.
source to share