Issue with Canvas view in windows phone - windows-phone-8

<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This is my MainPage.xaml file code where I have put my WebBrowser component inside a Canvas. Now my problem is, when I test this code on Emulator WVGA 512MB it looks fine like this
But when I test it on Emulator WXGA(768x1280) WebBrowser is going out of the screen and looks like this
How can I fix it. Please help. I dont want to remove canvas view.
EDIT:
Got fixed with this. Thanks to #Vyas_27 and #KooKiz
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas"
Background="Transparent">
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
</Grid>

You can keep your canvas, but put your WebBrowser control outside of it:
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted">
</phone:WebBrowser>
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
This way, it'll be correctly sized by the Grid, and you can still place the other controls as you wish by using the canvas.

try this see if it works;
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="GestureListener_Flick"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Background="Black">
<Canvas Name="ContentPanelCanavas" Background="Transparent">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<GoogleAds:AdView Name="BannerAd"
AdUnitID="a14e0073dbc5ecb"
Format="Banner"
VerticalAlignment="Bottom"
ReceivedAd="AdView_ReceivedAd"
FailedToReceiveAd="AdView_FailedToReceiveAd">
</GoogleAds:AdView>
</Canvas>
</Grid>
</Grid>
Just add;
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}"
to your webbrowser control.

Related

Disable the Grid vertical scroll-behavior of the scrollviewer in windows phone

Grid Structure
Load
When click on textbox and open keypad then title scroll up..I want to fix the title place (not scroll)
how to resove this problem?
when click on textbox keypad opened but title scroll up...
My xaml code
<Grid x:Name="grdEmergencyServices" ScrollViewer.VerticalScrollMode="Disabled" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/1.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="500*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="#8C6446" Grid.Row="0" Grid.ColumnSpan="3"/>
<Grid Grid.Row="0" Background="#8C6446" Opacity="0.8">
<TextBlock Name="pageTitle" Text="Title Name" Style=" {StaticResource CommonStyle}"/>
</Grid>
</Grid>
<ProgressRing Grid.Row="1" x:Name="ProgressRingLoad" Visibility="Collapsed" Background="Transparent" IsActive="True" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ScrollViewer Grid.Row="1" Margin="20">
<TextBox TextWrapping="Wrap" Text="TextBox" Margin="0,500,0,0"/>
</ScrollViewer>
</Grid>

Keep text block in view while scrolling in window phone 8.1 Runtime

my problem is exactly similar to this article
But I need to implement in wp8.1 runtime. I want textblock (name=txt_latest_update) in view while scrolling
here is my XAML code
<Grid Name="Root_content" Background="#FFF7FDF7">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Red">
<Image Source="/Assets/nepaltoday.png" HorizontalAlignment="Left" Margin="10,0,0,0"/>
</Border>
<ScrollViewer Grid.Row="1" Name="frontpage_scrollview" VerticalScrollBarVisibility="Visible"
>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Name="startscren" Stretch="Fill"/>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.3,0" EndPoint="1,0.">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Black" Offset="1.2" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid HorizontalAlignment="Right" Margin="0,10,10,0">
<StackPanel>
<TextBlock Name="txt_nepali_date" Foreground="White" FontSize="26"/>
<TextBlock Name="txt_eng_date" Foreground="White" FontSize="26" />
<TextBlock Name="txt_temp" Foreground="Yellow" FontSize="44" Margin="0,20,0,0"/>
<TextBlock Name="txt_location" FontSize="22"/>
</StackPanel>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="0,1,1,1"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Margin" Value="0,0,0,-20"/>
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Button Name="btnNews" Click="btnNews_Click">
<Image Source="/Assets/FrontPage/horoscope.png" VerticalAlignment="Stretch"/>
</Button>
<Button Name="btnHoroscope" Click="btnHoroscope_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
<Button Name="btnCurrencyExchanges" Click="btnCurrencyExchanges_Click">
<Image Source="/Assets/FrontPage/currency exchange.png"/>
</Button>
<Button Name="btnStockExchanges" Click="btnStockExchange">
<Image Source="/Assets/FrontPage/on this day.png"/>
</Button>
<Button Name="btnOnthisday" Click="btnOnthisday_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
<Button Name="btnMovie" Click="btnMovie_Click">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
</StackPanel>
<StackPanel Grid.Column="1" >
<Button Name="btnWeather" Click="btnWeather_Click">
<Image Source="/Assets/FrontPage/whether.png"/>
</Button>
<Button Name="btnLoadshedding" Click="btnLoadshedding_Click">
<Image Source="/Assets/FrontPage/loadshedding.png"/>
</Button>
<Button Name="btnGoldSilver" Click="btnGoldSilver_Click">
<Image Source="/Assets/FrontPage/gold_silver rates.png"/>
</Button>
<Button Name="btnTheatre" Click="btnTheatre_Click">
<Image Source="/Assets/FrontPage/theater.png"/>
</Button>
<Button Name="btnCalendar" Click="btnCalendars">
<Image Source="/Assets/FrontPage/horoscope.png"/>
</Button>
</StackPanel>
</Grid>
</Grid>
</StackPanel >
</ScrollViewer>
<Border Name="TitleBorder" Grid.Row="1"
Background="#FF264778" Opacity="0.7"
Margin="0,260,0,0"
Height="{Binding ElementName=TitleText, Path=Height}"
VerticalAlignment="Top">
<TextBlock Name="txt_lastest_update" HorizontalAlignment="Center"
Text="keep in view"
Foreground="White"
FontSize="22"
Margin="12" />
</Border>
</Grid>
Any suggestion?
hey i think your problem is, you want keep your textblock fixed while list is scroll. so you have to keep your list in different grid and textblock in different grid which need to fix. and make grid which contain list scrolable = true.

ScrollViewer doesn't scroll to VerticalOffset

I've got a Scrollviewer which has a StackPanel (which contain ExpanderViews)
I'm updating the ScrollViewer VerticalOffset when the ExpanderViews are expanded. However the Scrollviewer doesn't scroll up at all.
The only time the scrollviewer scrolls to a vertical offset is from within FScrollViewer_LayoutUpdated() method. (This is tied to the LayoutUpdated event of ScrollViewer)
Is there any way to update the VerticalOffset (or ScrollToVerticalOffset) from another method?
<Grid x:Name="FilterGrid" Height="696" Grid.Row="0" Background="White">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="FScrollViewer" toolkit:TiltEffect.SuppressTilt="True" LayoutUpdated="FScrollViewer_LayoutUpdated"
MouseMove="FScrollViewer_MouseMove" Width="{Binding ElementName=FilterGrid, Path=ActualWidth}" Height="{Binding ElementName=FilterGrid, Path=ActualHeight}" >
<StackPanel Name="StackPanel" Margin="50,0,0,0" >
<StackPanel x:Name="Header" Height="65" Orientation="Horizontal" Background="Transparent" >
<TextBlock x:Name="HeaderTextBlock" Text="Random text" Style="{StaticResource PhoneTextTitle2Style}" TextTrimming="WordEllipsis" FontWeight="SemiBold" Foreground="Black" Margin="60,5,5,5" VerticalAlignment="Center"/>
</StackPanel>
<Line Width="Auto" StrokeThickness="1.5" Stretch="Fill" Stroke="Gray" X1="2" />
</StackPanel>
</ScrollViewer>
</Grid>

textblock does not fill mobile phone window

I have below code
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<TextBlock x:Name="ApplicationTitle" FontWeight="Bold" Padding="20,0,0,0" Grid.Row="0" Text="فرآن کریم"/>
<ListBox x:Name="myListBox" Grid.Row="1" Padding="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Background="{Binding Converter={StaticResource AlternateRowConverter}}" Tap="pQuranAya_Tap">
<TextBlock Width="Auto" Text="{Binding Aya}" Foreground="Black" FontSize="50" Padding="20,0,0,20" TextWrapping="Wrap" Tap="TextBlock_Tap" />
<StackPanel Background="Black" />
<TextBlock Width="Auto" Text="{Binding AyaTranslation}" Foreground="Black" FontSize="35" Padding="20,0,0,20" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want textblock should be always in window size, but its text size. How can I make it to fill the window size?
Thanks,
Remove <TextBlock Width="Auto" and add <TextBlock HorizontalAlignment="Stretch". After that, your textblock will fit the parent container (window, grid, stackpanel).
Remove Padding="20,0,0,20" And Margin (if You have in that Code )

Windows Phone 8 panorama layouts

I'm new to Windows phone 8 development and I am having difficulty with a panorama view.
When I create a basic 'Windows Phone Portrait Page' I have no difficulty creating grids and aligning Toolbox controls between those grids.
However, with the Panorama page, when I create grids, those grids are applied to every page in the panorama and therefore I cannot use different layouts for each page.
How would I achieve different layouts on my panorama page?
Should I be using a WindowsPhoneControl instead?
Thanks for your time.
<phone:PhoneApplicationPage
x:Class="SmarterPower.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
<!--Panorama control-->
<phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3">
<phone:Panorama.Background>
<ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="menu"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432">
<!--Replace rectangle with image-->
<Image Source="{Binding Image}" />
<StackPanel Width="311" Margin="8,-5,0,5">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
You should define your rows and columns in a Grid control inside a panorama item, instead of defining them in the layout root grid:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama Title="My Panorama" >
<!--Panorama item one-->
<phone:PanoramaItem Header="item 1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item 2">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>