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>
Related
I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>
This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
I am absolutely new in UWP and its responsive design, so I need help.
Where's the problem?
e.g. I need 4 responsive buttons on landing page, but in each view it looks quite the same. So the button doesn't change, but looks same on desktop, and same on the phone emulator (or when I change screen resolution). For better description, there are some screens:
Buttons on large 23" screen - looks good, but...
..buttons on small 5" screen (portrait) - buttons are larger then canvas...
So my question is: How to make buttons responsive?
Here is my sourcecode:
<Page
x:Class="STCApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:STCApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="83*"/>
<RowDefinition Height="998*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"></Button>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/>
<Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/>
</Grid>
</Page>
For responsive design, we'd better avoid using fixed width and height. We can remove Width and Height setting in Button and set it's HorizontalAlignment and VerticalAlignment to Stretch like following to make the button responsive.
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
In this scenario, each button will occupy a cell in the grid and their width and height will change automatically according to the size of the gird. Following is a complete sample and for more info about the layout design, please see Layout for UWP apps.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="83*" />
<RowDefinition Height="998*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
<Button x:Name="button_Copy" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33FF0000" Content="Button" />
<Button x:Name="button_Copy1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#3300FF0C" Content="Button" />
<Button x:Name="button_Copy2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#330080FF" Content="Button" />
</Grid>
In this case it's better for you to use a RelativePanel which you can handle with Visual States that will change according to the available screen size. This might help
Windows 10 RelativePanel Sample
How can I add shadow effect in Windows universal app?
I have added Image into StackPanel. I want to add shadow effect to that control (StackPanel).
I am trying to do something like below image.
This should give you the inspiration to arrive at something you like.
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Width="100" Height="100" Margin="0,10">
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.5"/>
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
<Grid Width="100" Height="100" Margin="0,10">
<Image Source="GraySquare.png" Width="95" Height="95" HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.5"/>
<Image Source="PinkSquare.png" Width="95" Height="95" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
Add borders, rounded corners, gradients, etc. to achieve the final look you like.
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>
I want to create a simple Browse button like that found on the Windows 8.1 Reader app:
However, after searching for an hour I'm still no wiser. There must be a standard Button style for circle buttons? And where would I find the browse icon?
Not sure this is the most elegant XAML in the world, but it gets the job done.
<Button Style="{StaticResource TextBlockButtonStyle}">
<Button.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</Button.RenderTransform>
<Grid>
<Rectangle Fill="DimGray" />
<Grid Margin="7,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,-2,0,0" />
<TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="Browse" FontWeight="Light" Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</Grid>
</Button>
Here's the result:
Best of luck!
you should see this
AppBar button style images
Symbol enumeration
Modern UI
Icons