WP 8.1 Silverlight : How to update a Line (coordinate change) - c#

I'm working on an OCR project and part of it is finding the outlines of an object. To debug it, I output lines on the screen of the phone (to represent the outlines) with the <Line /> Xaml element. I'm trying to update the Line each time I find a different outline. The lines show the good result on the first "frame" but then don't move anymore. (The thing that I change are their X1,Y1 and X2,Y2 attributes).
For a Line1 element :
XAML of the element :
<Line x:Name="Line1"
Stroke="Yellow" />
C# that changes the coordinates :
Line1.X1 = some_new_value;
Line1.Y1 = some_new_value2;
Line1.X2 = some_new_value3;
Line1.Y2 = some_new_value4;
This is the C# I have tried to update the line :
Line1.InvalidateArrange();
Line1.InvalidateMeasure();
(separatly and together but it doesn't change anything)
What is the good way of doing this? Or perhaps I shouldn't be using <Line /> and there is a better way to do this, in which case what is it?

You could try Binding through a ViewModel or you can call UpdateLayout for the control or the page itself.
this.UpdateLayout();
Or
Line1.UpdateLayout();

Related

2 Buttons but just one work in wpf window

I want to insert 2 Buttons in my C# Project. But just one of them works. I Tried different things, and i noticed in the second button script BorderBrush="{x:Null}" /> is a /> i think this is the problem. But at the time i remove it / convert it to a > it gives me an error out.
But heres the code, maybe you can help:
*Edit: Code is to long so heres a Link: http://pastebin.com/MysA7Dh1
**Edit: First a big Thanks for the Help :)! And i dont want you to do the work for me but i dont find an solution. The first button just looks like the second on the xaml code for me.
But now i can click the button but this time i dont see the image. I see it on the first button but not on the second.
Updated code: http://pastebin.com/PZhtssSy
nvm i set the Margin wrong. :/
Are you trying to include that image inside the button code? Or is the image supposed to be separate?
If you're trying to include the image inside the button, your code should look like this (code overly simplified for clarity):
<Button>
<Image/>
</Button>
If they are supposed to be separate:
<Button />
<Image />

How to get an icon in stackPanel in a XAML file

I am new to XAML and C#
I have an icon created already in a project and and I have to use this icon whenever I select one of the option from the dropdown menu.
I made a stackpanel in XAML file
<StackPanel Name="stackPanelforIcon">
</StackPanel>
In the code behind file I have different cases for the dropdown menu.
case IconOnSelect:
?????? = IconList.NewIcon;
This NewIcon is the one already created and I am using the source also for this
using IconProject.Iconlists;
On writing IconList.NewIcon I am not getting any error, it is referenced correctly.
What should I write at ?????? to reference it. Is there any other way apart from using stackPanel to include an icon
A StackPanel cannot show an icon on it's own. You need a control for it, for example an Image.
<StackPanel Name="stackPanelforIcon">
<Image x:Name=theImage" />
</StackPanel>
Then you can use your Icon in your code behind like this:
this.theImage.Source = IconList.NewIcon;
You may need to convert your value, you never said what type it actually is.
Please note that using code-behind is not the preferred way with WPF. Using MVVM is way easier and more natural working with WPF, using code-behind you will fight WPF all the way. Using MVVM, this could be:
<StackPanel Name="stackPanelforIcon">
<Image Source="{Binding CurrentImage}" />
</StackPanel>
with your ViewModel having a property called CurrentImage that you would set when you want to change it. Don't forget to implement INotifyPropertyChanged for the changes to take effect though.

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.

How to create Image in runtime in windows phone?

I am trying to create custom menu which consists of text at least 2 textblock in one rectangle, which will act as button, For that purpose, May be converting the text into Image may be good idea to implement and serve my purpose to. so I want and Idea or code to create image during runtime, any suggestion ? If you have any sample code or link to refer??
if by "2 textblock in one rectangle" you mean text in two lines then try this
<Button>
<StackPanel>
<TextBlock Text="ABC"/>
<TextBlock Text="DEF"/>
</StackPanel>
</Button>

Metro application directly focuses on my first field

I'm creating this test Metro application using Windows 8, VS2012, C# and XAML. There are different TextBox in the application page arranged in a StackPanel. When the application is launched the focus is on the first TextBox.
I was wondering how to "deactivate" this.
Here's a pic, as you can see the first field is focused (color changed and ToolTip displayed).
When your UI is loaded you can remove focus from the TextBox by applying a Programmatic focus state to any other control.
Imagine that you have a Button named myButton. You can:
myButton.Focus(FocusState.Programmatic);
You cannot however use FocusState.Unfocused state to remove focus from the TextBlock because it is not allowed and will throw an exception.
One simple fix for this is place something to catch it first with IsTabStop="True" with a 0 Opacity which is a bit hacky but the only way I know. So something like;
<TextBox IsTabStop="True" Opacity="0" Height="1" Width="1"/>
<!-- Then the rest of your content like your other TextBox stuff -->

Categories