How to display website in windows phone app? - xaml

I am using below code
<phone:WebBrowser source="http:example.com"/>
this is the only code inside grid. But the app is crashing. What could be the issue?

<StackPanel>
<WebView x:Name="myWebView"
Height="650"
Source="http://google.com/" />
</StackPanel>

<StackPanel>
<phone:WebBrowser x:Name="wbBrwsrUI" Source="http://www.google.com/"/>
</StackPanel>
or
wbBrwsrUI.Navigate(new Uri("http://www.google.com"));

Related

Add text on MediaElement fullscreen

I'd like to add text on WindowsPhone 8.1 MediaElement fullscreen mode, but I cannot get it visible.
Here is my code:
<Grid>
<MediaElement Name="MyMedia" IsFullWindow="True" MarkerReached="MyMedia_MarkerReached"/>
<TextBlock x:Name="MediaTitles" Text="Hello World" HorizontalAlignment="Left" Margin="55,240,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="99" Width="270" FontSize="48" />
</Grid>
Any ideas what I'm doing wrong?
The property IsFullWindow="True" is causing the problem. As you might know by now. If I want the media element full screen I usually add it to the grid and span across 1 for column and row. Something like below:
<MediaElement
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="1"
Grid.ColumnSpan="1" />
This gives the same effect as full screen on the device. And you can see your Hello world text in the Designer.

Why am I getting a XamlParseException here?

With this XAML:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource BrowsePhotosAppBarButtonStyle}" Click="btnOpenImgFiles_Click"/>
<Button Style="{StaticResource OpenAppBarButtonStyle}" Click="btnOpenMap_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource SaveAppBarButtonStyle}" Click="btnSaveMap_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
(which I adapted from markup I found online) I got a "Windows.UI.Xaml.Markup.XamlParseException"
Looking at this, I figured it should be AppBarButton instead of Button, so I changed them to that...but I'm still getting the same err msg. Is it because there's no such thing as "BrowsePhotosAppBarButtonStyle" (I can't find a list of valid values for that) or...???
Yes. It's probably the button styles which are based on legacy Windows 8 code. If you're targeting Windows 8.1 then you should use AppBarButtons rather than Buttons. I'd also put them in a CommandBar rather than layout out your own Grid in an AppBar.
If BrowsePhotosAppBarButtonStyle isn't specific to the sample you got that from it is probably available in the StandardStyles.xaml file included with Windows 8 templates. That file included a large number of commented out button styles for you to uncomment as needed.
Here's how you'd set this up in a Windows 8.1 app. For simplicity I didn't hook up the Click handlers, and you may want to update the Label and Automation names:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" />
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File"/>
<AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</AppBar>
</Page.BottomAppBar>
See Adding app bars (XAML) for more details.

how to style listpickeritem windows phone 8

can someone tell me how to style listpicker elements on fullscreen mode?
this is my code in page xaml:
<toolkit:ListPicker FullModeItemTemplate="{Binding lpkFullItemTemplate}"
ItemTemplate="{Binding lpkItemTemplate}"
x:Name="people"/>
the templates are:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="lpkItemTemplate">
<TextBlock Text="{Binding people_list}" />
</DataTemplate>
<DataTemplate x:Name="lpkFullItemTemplate">
<TextBlock Text="{Binding people_list}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
i also want to know if there's a way to prevent the listpicker go in full mode. i've tried to set the ItemCountThreshold proprety but i found out that is private in wp8 sdk
thanks in advance
Test it
<toolkit:ListPicker>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate x:Name="ListPickerFullItemTemplate">
<TextBlock FontSize="32" Text="{Binding}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>

WP8 Panorama Image Title

How do I set the Panorama App Title of a Page as an Image and not a string of text? I have added:
<phone:Panorama>
<phone:Panorama.Background>
<ImageBrush ImageSource="\Assets\image-logo-small.png"/>
</phone:Panorama.Background>
......
However this sets the entire background as the image selected.
Any idea how I can replace the <phone:Panorama Title="Text"> with an Image?
StackOverflow already has similar case in windows 7, Setting image as Panorama Title for Panorama page in wp7
In our case try these
<phone:Panorama >
<phone:Panorama.TitleTemplate>
<DataTemplate>
<StackPanel>
...........
</StackPanel>
</DataTemplate>
</phone:Panorama.TitleTemplate>
..........................
</phone:Panorama >
The following code successfully places an image within Title section of a Panorama App:
<phone:Panorama>
<phone:Panorama.Title>
<Grid Margin="0,80,0,0">
<Image Source="\images\MyImage.png"
HorizontalAlignment="Center"
Width="400" Height="50" />
</Grid>
</phone:Panorama.Title>
....
Try this, for wp8:
<phone:Panorama.TitleTemplate>
<DataTemplate>
<Grid>
<Image Source="/Assets/logo.png">
</Image>
</Grid>
</DataTemplate>
</phone:Panorama.TitleTemplate>
Have fun!!!

How to hide scrollbars in WebView in Windows 8?

I am trying to hide scrollbars in my metro application like i usually do in windows phone app:
<WebView x:Name="webView"
Height="395" Width="300"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
But it does not work even if i surround it with embedded
<ScrollViewer Name="ScrollViewerForWebView"
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden">
<WebView x:Name="webView" Height="395" Width="300" />
</ScrollViewer>
Thanks!
what if you set
ScrollViewer.VerticalScrollBarVisibility="Disabled"