How to hide scrollbars in WebView in Windows 8? - xaml

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"

Related

Windows Phone StackPanel control alternative for Xamarin Forms?

I prototyped an app in Windows Phone 8.1 (WP) I was able to create cool controls using the which would allow me to put Labels and other controls inside a button and this would glue them all together.
I am now rebuilding the app in Xamarin.Forms (XF).
I am working around this issue for the time being in XF by using Absolute Layout but I fear and I am expecting this to fall apart over differnt phones, sizes and models.
I am certainly sure I am not the first to have this problem so I'm wondering how others have gotten around it.
Thank you :)
What I like doing in WP:
<Button Height="200" HorizontalAlignment="Left" Margin="232,1,0,0" Name="BtnVisitorScore" VerticalAlignment="Top" Width="220" Click="btnVisitorScore_Click" Grid.Row="1">
<StackPanel Margin="-5,-30,0,0" >
<TextBlock Text="{Binding MatchSettings.VisitingTeam.Name}" Height="40" HorizontalAlignment="Left" Width="180" FontSize="18" FontFamily="Arial" TextAlignment="Center" />
<TextBlock Text="{Binding VisitingTeamCurrentScore, StringFormat=N0}" Height="70" Width="180" FontSize="72" FontFamily="Arial" TextAlignment="Center" VerticalAlignment="Top" />
</StackPanel>
</Button>

Trying to arrange Ui Responsive to all uwp platform

I'm trying to arrange UI Responsive in all uwp platform But some issue arises
,I'm new to uwp development .Any idea how to implement look same in windows 10 mobile ,tabs and desktop.
Xaml code
<Grid Name="HomeView" >
<Grid.Background>
<ImageBrush ImageSource="Assets/Home/home_android.jpg"/>
</Grid.Background>
<StackPanel>
<MediaElement x:Name="mycontrol" Source="/Audio/bg_sound.mp3" AutoPlay="True"/>
</StackPanel>
<StackPanel>
<MediaElement x:Name="mediaElement1" />
</StackPanel>
<RelativePanel>
<Image Source="Assets/Home/btn_learn_colours.png"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="20,90,0,60"
Width="180" Height="200"
Tapped="L_color_tap"/>
<Image Source="Assets/Home/btn_paint.png"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="220,90,0,0"
Width="180" Height="200"
Tapped="Paint"/>
<Image Source="Assets/Home/btn_quiz_f.png"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="440,60,0,0"
Width="180" Height="200"
Tapped="Quiz"/>
<Image Source="Assets/Home/btn_other_apps.png"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="440,140,0,0"
Width="180" Height="200"
Tapped="Other_Apps"/>
</RelativePanel>
</Grid>

Stretch my buttons in a TopAppBar

I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:
<CommandBar Height="51" >
<CommandBar.Content>
<Grid>
<StackPanel>
<Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
<Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Button.Content>
<Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
This what I want to get:
This is going to get you there:
<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid>
<!--Left element-->
<Rectangle Margin="10" Height="35" Width="35" Fill="Red"
HorizontalAlignment="Left"/>
<!--Right elements together in a horizontal StackPanel-->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?
But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.
<CommandBar IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add" />
</CommandBar.PrimaryCommands>
</CommandBar>
More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx
There are a few issues with what you're trying.
The XAML you have is more complicated than it needs to be.
You've tried to align controls by setting margins - this doesn't work with
variable sized containers.
You're not using any of the functionality of the CommandBar so you probably don't need it.
Instead you can make the layout you desire with a simple grid.:
<Grid VerticalAlignment="Top" Height="51">
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image1" Source="images/name.png" />
<Image x:Name="image" Source="images/icon.png"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button >
<Image Source="images/home.png" />
</Button>
<Button>
<Image Source="images/search.png" />
</Button>
<Button >
<Image Source="images/profil.png" />
</Button>
</StackPanel>
</Grid>

windows phone 7 app on full screen

I started to write an app for windows phone 7, but when I test it in the emulator,there is an empty strip in the side of the screen that I can't fill. Here is the XAML of the page:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="776*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition Height="480*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="1" Margin="0,0,0,0" Grid.ColumnSpan="2">
<Image Height="480" Name="image1" Stretch="Fill" Width="728" Source="/app;component/Background.jpg" />
<MediaElement Height="0" Name="mediaElement1" Width="1" Volume="1" Source="Kalimba.mp3" />
</StackPanel>
<Image Grid.Row="1" Height="51" HorizontalAlignment="Left" Margin="78,164,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="180" Source="/app;component/Easy_Button_Normal.png" />
<Image Grid.Row="1" Height="51" HorizontalAlignment="Left" Margin="468,164,0,0" Name="image3" Source="/app;component/Hard_Button_Normal.png" Stretch="Fill" VerticalAlignment="Top" Width="180" />
<Image Grid.Row="1" Height="51" HorizontalAlignment="Left" Margin="272,164,0,0" Name="image4" Source="/app;component/Medium_Button_Normal.png" Stretch="Fill" VerticalAlignment="Top" Width="180" />
<Image Grid.Row="1" Height="118" HorizontalAlignment="Left" Margin="286,362,0,0" Name="image5" Stretch="Uniform" VerticalAlignment="Top" Width="148" Source="/app;component/Play_Button_Normal.png" />
<Image Grid.Row="1" Height="36" HorizontalAlignment="Left" Margin="78,122,0,0" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="238" Source="/app;component/Headline.png" />
<Image Grid.Row="1" Height="34" HorizontalAlignment="Left" Margin="620,426,0,0" Name="image7" Stretch="Fill" VerticalAlignment="Top" Width="32" Source="/app;component/Play_Button.png" Tap="image7_Tap" />
<Image Grid.Row="1" Height="34" HorizontalAlignment="Left" Margin="58,426,0,0" Name="image8" Source="/app;component/Scores_Button.png" Stretch="Fill" VerticalAlignment="Top" Width="32" Tap="image8_Tap" />
<!--ContentPanel - place additional content here-->
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
Can anyone help me?
Thanks
There is no "Fullscreen" concept on the phone. Simply change the control so that it takes up the whole screen.
You could do this explicitly or, if you have size set to auto, just hide all other items on the screen.
All differences between Windows Phone 7 and Windows phone 8 screen-size (resolution) are explain here. (in the MSDN websites, with samples).
On windows phone, you must manage all screen resolutions... If you have a project Windows Phone 7 by default, your screen size is adapted to this project and you are on WVGA (480 * 800). And, if you don't manage all size screen, on the Windows Phone device (or emulator) in 720p, you are a part of black screen on the top of your applications.
For informations: Windows Phone 7 devices just manage
the WVGA resolution (480*800)
Windows Phone 8 devices manage three screen sizes:
the WVGA resolution (480*800)
the WXGA resolution (768 × 1280)
the 720p resolution (720 × 1280)
// rumors Part
And, Maybe with Windows phone 8 and GDR3 update, Windows Phone 8 manage one additional screen size
the 1080p resolution (1080*1920)
// End rumors part
Be sure there is the Attribute in
<phone:phoneApplicationPage shell:SystemTray.IsVisible="True">
which must be set to false for the full screen show.
You are setting two columns in your grid, but you are using only one. Try by removing the column definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="776*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>

XAML: WebBrower Background Color?

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox HorizontalAlignment="Left" Name="number" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="240" Margin="24,0,0,0" InputScope="Number" MaxLength="3" />
<Button Content="find" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269,0,0,0" Width="161" RenderTransformOrigin="0.743,0.541" Name="searchbutton" Click="search"/>
</Grid>
<Grid Grid.Row="1" Margin="0,84,0,0" Grid.RowSpan="2">
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Background="Black" Foreground="Black"/>
</Grid>
Here is my xaml code for initializing web browser in my app. But, the web browser appears in white color. I have given all coloring properties as much i know. But it stills in same white color. I need to make it transparent.
Here's my sample image files I captured - http://img829.imageshack.us/img829/6956/rt0n.png
Best answer will be much appreciated.
You can change the background color for webbrowser. Just look at this answer
How to make Webbrowser control with black background in Windows Phone 7.1