Dynamically change the font size in webbrowser in wp7 - windows-phone-7

Could anyone please help me , how I can programmatically increase or decrease the font size of web browser control in windows phone 7 c sharp . I need this to implement the zoom functionality in web browser control.
here is my code
private void btn_zoomin_click(object sender, EventArgs e)
{
double fs = webBrowser1.FontSize;
webBrowser1.FontSize = fs+10;
}
But the font is not being changed at all.
Any kind of help will be appreciated.
Many thanks,
Munazza

Yes there is a solution, you can fire a script inside the html page to enlarge the font by using the webBrowser's "InvokeScript" , here is a sample:
webBrowser1.InvokeScript("ChangeFontSize","12");
TO DO : a script inside the html :
<script type="text/javascript">
function ChangeFontSize(size) {
.....
....
return true;
}
<script/>

I don't think it's supposed to work this way.
The user can zoom in and out like he does in the Internet Explorer, but you can't change the font size.
You could, technically, get the html file that you want to display, parse it and if the fontsize is defined inline, you could change it and then display the new html file in the WebBrowser control, but I don't think that's a very good idea.

You have to use WebBrowser.InvokeScript:
// Initial text size
int textSize = 100;
private void TextPlusOnClick(object sender, EventArgs e)
{
textSize *= 2;
string szfn = "{styleText = \"body { -ms-text-size-adjust:" + textSize + "% }\";styleTextNode = document.createTextNode(styleText);styleNode = document.createElement(\"style\");styleNode.appendChild(styleTextNode);document.getElementsByTagName(\"head\")[0].appendChild(styleNode);};";
webBrowser.InvokeScript("eval", szfn);
}
private void TextMinusOnClick(object sender, EventArgs e)
{
textSize /= 2;
string szfn = "{styleText = \"body { -ms-text-size-adjust:" + textSize + "% }\";styleTextNode = document.createTextNode(styleText);styleNode = document.createElement(\"style\");styleNode.appendChild(styleTextNode);document.getElementsByTagName(\"head\")[0].appendChild(styleNode);};";
webBrowser.InvokeScript("eval", szfn);
}
See a description on the text size adjust property and this post on MSDN.

Related

Label is not show in print

I have used below code to print the Panel of windows form.
private void button1_Click(object sender, EventArgs e)
{
System.Drawing.Printing.PrintDocument doc = new System.Drawing.Printing.PrintDocument();
doc.PrintPage += new System.Drawing.Printing.PrintPageEventHandler(Doc_PrintPage);
doc.Print();
}
private void Doc_PrintPage(object sender, PrintPageEventArgs e)
{
Panel grd = new Panel();
Bitmap bmp = new Bitmap(panel2.Width, panel2.Height, panel2.CreateGraphics());
panel2.DrawToBitmap(bmp, new Rectangle(0, 0, panel2.Width, panel2.Height));
RectangleF bounds = e.PageSettings.PrintableArea;
float factor = ((float)bmp.Height / (float)bmp.Width);
e.Graphics.DrawImage(bmp, bounds.Left, bounds.Top, bounds.Width, factor * bounds.Width);
bmp.Save("test12.jpg");
}
Now from above code, when i click on button the print function will be call but it excluded label in it. i am attaching image for your reference. first image is my UI design. , when i use print functionality it removes the label value as you can see in other image. i have used rectagleshap control which are in Pink color and i am displaying label on it. I think the label may be send back but when i used front back then also it is not appear.
Can you just try this one here i was using this for capture the whole screen which ever is active window its like screencapture or screenshot.
private void Doc_PrintPage(object sender, PrintPageEventArgs e)
{
Bitmap bitmap = new Bitmap(panel2.Width, panel2.Height);
Graphics graphics = Graphics.FromImage(bitmap as Image);
graphics.InterpolationMode = InterpolationMode.Default;
graphics.CopyFromScreen(0, 0, 0, 0, bitmap.Size);
bitmap.Save(pathDownload + filename + ".jpeg", ImageFormat.Jpeg);
bmp.Save("test12.jpg");
}
In my case label was shown back to the rectangle, so i added one more label and set it as bring front. thanks for the help.

Custom ListPopupWindow rendered in different widths

I am using Android.Support.V7.Widget.ListPopupWindow as a Drop-Down Menu from a Button within my layout. Here is the code snippet I am using
void MenuIcon_Click (object sender, EventArgs e)
{
popupWindow = new Android.Support.V7.Widget.ListPopupWindow (this);
popupAdapter = new MenuPopUpAdapter (this,selectedIndex,menuList);
popupAdapter.ItemClick+= PopupAdapter_ItemClick;
popupWindow.SetAdapter (popupAdapter);
popupWindow.AnchorView = menuButton;
Display display = WindowManager.DefaultDisplay;
Point size = new Point();
display.GetSize (size);
int width = size.X;
popupWindow.Width =160;
popupWindow.Show ();
}
But while debugging I noted that, even though I have given it a static width, it is rendered differently in different devices. What is causing this issue ?
This is because of the different screen densities in Android devices. You need to mention dimensions in DPs(Density Independent Pixels) to overcome this issue. This documentation from Google will be a nice read
You can get the corresponding pixel value to be mentioned while setting dimensions programatically from this method.
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = Resources.DisplayMetrics;
int px = (int)Math.Round(dp * (displayMetrics.Density));
return px;
}
You may modify the code as above to fix the issue
popupWindow.Width =dpToPx(160);

How to set Seek Bar thumb by code?

I am trying to set the seekbar thumb using code not XML
I tried
Drawable a = null;
a = Drawable.CreateFromStream(Assets.Open("Drawable/Icon"),null);
seekBar.SetThumb (a);
also tried:
seekBar.SetThumb() //Adding the image path but it said the it requires a drawable but it was giving it a int
how can i use set the image with code?
also i am using Xamarin free version.
I had the same issue and I solved it with the following code.
Hope it helps
public void seek_bar_ProgressChanged(object sender, SeekBar.ProgressChangedEventArgs e) {
Bitmap img = BitmapFactory.DecodeResource(Resources, Resource.Drawable.yellobar);
Drawable d = new BitmapDrawable(Resources, img);
seek_bar.ProgressDrawable = d;
}

Windows phone - Avoid scrolling of Web browser control placed inside scroll viewer

I have to show a web browser inside a scroll viewer in windows phone application, with these requirements :
Web browser height should be adjusted based on its content.
Web browser scrolling should be disabled, ( when user scrolls within web browser, scrolling of scroll viewer should take place )
Web browser can do pinch-zoom and navigate to links inside its content.
How can I implement that? Any links or samples is greatly appreciated.
I'm using code like this. Attach events to the Border element in the Browser control tree (I'm using Linq to Visual Tree - http://www.scottlogic.co.uk/blog/colin/2010/03/linq-to-visual-tree/).
Browser.Loaded +=
(s,e)=>
{
var border = Browser.Descendants<Border>().Last() as Border;
if (border != null)
{
border.ManipulationDelta += BorderManipulationDelta;
border.ManipulationCompleted += BorderManipulationCompleted;
border.DoubleTap += BorderDoubleTap;
}
};
Further more the implementation I'm using is to prevent pinch and zoom, something you want to have working. Though this should help you in the right direction.
private void BorderDoubleTap(object sender, GestureEventArgs e)
{
e.Handled = true;
}
private void BorderManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
// suppress zoom
if (Math.Abs(e.DeltaManipulation.Scale.X) > 0.0||
Math.Abs(e.DeltaManipulation.Scale.Y) > 0.0)
e.Handled = true;
}
private void BorderManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
// suppress zoom
if (Math.Abs(e.FinalVelocities.ExpansionVelocity.X) > 0.0 ||
Math.Abs(e.FinalVelocities.ExpansionVelocity.Y) > 0.0)
e.Handled = true;
}
On Mark's direction, I used
private void Border_ManipulationDelta(object sender,
System.Windows.Input.ManipulationDeltaEventArgs e)
{
e.Complete();
_browser.IsHitTestVisible = false;
}

Cancel touches events on Windows Phone

I have a list on images in a Pivot control. If you touch an image, it navigates to another view. If if flick through a new pivot and touch the image meanwhile, it navigates.
I noticed the Facebook app or the native photo albums don't have this bug.
Any idea ?
edit: the code :
Image img = new Image();
Delay.LowProfileImageLoader.SetUriSource(img, new Uri(adViewModel.Photos[k].ThbUrl));
img.Width = 150;
img.Tag = k;
img.Height = 150;
img.MouseLeftButtonDown += new MouseButtonEventHandler(launch_Diapo);
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
PhotosGrid.Children.Add(img);
If you can show your code we can probably provide a more specific answer.
However:
I'm guessing you're using MouseButtonLeftDown or similar to detect the touching of the image. Rather than this, use the Tap gesture from the toolkit. This should prevent the issue you're having.
There is a possible alternative to disable the pivot gesture while you're touching the image, but depending on how you're using the image within the pivotItem this may end up preventing proper pivot navigation.
You can add the Tap event in code like this:
var gl = GestureService.GetGestureListener(img);
gl.Tap += new EventHandler<GestureEventArgs>(gl_Tap);
and the handler would be something like this. (but actually doing something useful-obviously.)
void gl_Tap(object sender, GestureEventArgs e)
{
MessageBox.Show("tapped");
}
Even I had a similar problem . What i did is ,check for MouseButtonLeftDown position and MouseButtonLeftUp position .If they are Equal navigate else do nothing .I will paste the code below.
Point temp;
void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
temp = e.GetPosition(null);
}
void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Point point = e.GetPosition(null);
if (point == temp)
{
this.NavigationService.Navigate(new Uri(...));
}
}

Resources